Theo's Typesafe Cult•2y ago

How to create new tRPC api route calling external api

Hi I have this app where I want to add a new prompt api route in server/api/routers/prompt.ts of the generated T3 app with all modules selected on install. The code I'm trying to run:

import { z } from "zod";

import {
  createTRPCRouter,
  protectedProcedure,
} from "~/server/api/trpc";
import { env } from "~/env.mjs";
import { Configuration, OpenAIApi } from "openai";

const configuration = new Configuration({
    apiKey: env.OPEN_AI_KEY
});

const openai = new OpenAIApi(configuration);

const getStory = async (storySummary: string, title: string) => {
    const response = await openai.createCompletion({
        model: "text-davinci-003",
        prompt: `Write me a story based on the story summary:
        ${storySummary}

        with the title:
        ${title}
        `
    })

    return response;
}
export const promptRouter = createTRPCRouter({
  createStory: protectedProcedure
    .input(z.object({ 
        storySummary: z.string(),
        title: z.string()
    }))
    .query(async ({ input }) => {
        const response = await getStory(input.storySummary, input.title);

        return response.data;
    })
});

import { z } from "zod";

import {
  createTRPCRouter,
  protectedProcedure,
} from "~/server/api/trpc";
import { env } from "~/env.mjs";
import { Configuration, OpenAIApi } from "openai";

const configuration = new Configuration({
    apiKey: env.OPEN_AI_KEY
});

const openai = new OpenAIApi(configuration);

const getStory = async (storySummary: string, title: string) => {
    const response = await openai.createCompletion({
        model: "text-davinci-003",
        prompt: `Write me a story based on the story summary:
        ${storySummary}

        with the title:
        ${title}
        `
    })

    return response;
}
export const promptRouter = createTRPCRouter({
  createStory: protectedProcedure
    .input(z.object({ 
        storySummary: z.string(),
        title: z.string()
    }))
    .query(async ({ input }) => {
        const response = await getStory(input.storySummary, input.title);

        return response.data;
    })
});

after the code above in the prompt.ts file created I attach it to the root.ts of the routers - just like with the example.ts file and proceed to call it in my client like so:

import React from 'react'
import { api } from '~/utils/api'
const Prompt = () => {
  const { data: response } = api.prompt.createStory.useQuery({ 
    storySummary: 'A little piggy lost her family in a giant thunderstorm and had to live by herself',
    title: 'The piggy tale'
  })
  return (
    <div className='bg-white md:px-6 mb-6 mt-2 shadow-lg rounded-md'>
        {response?.choices[0]?.text ?? 'Response is undefined'}
    </div>
  )
}

export default Prompt;

import React from 'react'
import { api } from '~/utils/api'
const Prompt = () => {
  const { data: response } = api.prompt.createStory.useQuery({ 
    storySummary: 'A little piggy lost her family in a giant thunderstorm and had to live by herself',
    title: 'The piggy tale'
  })
  return (
    <div className='bg-white md:px-6 mb-6 mt-2 shadow-lg rounded-md'>
        {response?.choices[0]?.text ?? 'Response is undefined'}
    </div>
  )
}

export default Prompt;

This gives me a 429 tRPC error when called and I unfortunately have no idea and have been everywhere with the documentation available, any of you friendly developers that have an idea?

4 Replies

Mads•2y ago

Was my question okay formulated? Or should I try again:)?

Pacehut•2y ago

So i guess you are calling a protectedProcedure from client side as it is not recommended to do so, you can just make tht createStory as publicProcedure and maybe the problem resolves

Mads•2y ago

Thanks for the input, unfortunately this did not work as much as I'd like it to 😦 Seems like the request get's called a multitude of times after calling the api

Unknown User•2y ago

Message Not Public

Gaming

Programming

How to create new tRPC api route calling external api