Response promise resolves before endpoint finished processing

I want to interact with OpenAI's API in my Next.js + tRPC app. It seems that the my frontend is not waiting for the backend to finish the API call before using the response, leading to an error because the response is still undefined. This is my endpoint: 
export const llmRouter = createTRPCRouter({
  searchBarInputToQuery: publicProcedure
    .input(z.object({ text: z.string().nullish() }))
    .mutation(async ({ input }) => {
      if (!input.text) {
        console.log("Empty input, returning empty response");
        return { role: "", content: "" };
      }
      console.log("Calling OpenAI API with input:", input.text);
      const response = await openai.createChatCompletion({
        model: "gpt-3.5-turbo",
        messages: [
          { role: "system", content: SYSTEM_MESSAGE_ENGLISH },
          { role: "user", content: input.text },
        ],
      });
      const message = response.data.choices[0]!.message!;
      return message;
    }),
});
export const llmRouter = createTRPCRouter({
  searchBarInputToQuery: publicProcedure
    .input(z.object({ text: z.string().nullish() }))
    .mutation(async ({ input }) => {
      if (!input.text) {
        console.log("Empty input, returning empty response");
        return { role: "", content: "" };
      }
      console.log("Calling OpenAI API with input:", input.text);
      const response = await openai.createChatCompletion({
        model: "gpt-3.5-turbo",
        messages: [
          { role: "system", content: SYSTEM_MESSAGE_ENGLISH },
          { role: "user", content: input.text },
        ],
      });
      const message = response.data.choices[0]!.message!;
      return message;
    }),
});
I am calling from the frontend like this: 
const [userInput, setUserInput] = useState("");
const searchBarInputToQuery = api.llm.searchBarInputToQuery.useMutation();

const handleSubmit = async () => {
  props.setIsLoading(true);
  props.setCurrentPage(Pages.RESULTS);
  props.setMessages([{ role: "user", content: userInput }]);
  const response = await searchBarInputToQuery.mutate({ text: userInput });
  console.log(response);
  props.setMessages([...props.messages, response.data!]);
  props.setIsLoading(false);
};
const [userInput, setUserInput] = useState("");
const searchBarInputToQuery = api.llm.searchBarInputToQuery.useMutation();

const handleSubmit = async () => {
  props.setIsLoading(true);
  props.setCurrentPage(Pages.RESULTS);
  props.setMessages([{ role: "user", content: userInput }]);
  const response = await searchBarInputToQuery.mutate({ text: userInput });
  console.log(response);
  props.setMessages([...props.messages, response.data!]);
  props.setIsLoading(false);
};
I am getting the error: 
TypeError: Cannot read properties of undefined (reading 'data')
> 28 |   props.setMessages([...props.messages, response.data!]);
     |                                                 ^
...
TypeError: Cannot read properties of undefined (reading 'data')
> 28 |   props.setMessages([...props.messages, response.data!]);
     |                                                 ^
...
I have tried changing the endpoint to useQuery, which caused a different set of problems (calling the endpoint on each change to userInput or never when using an intermediate variable changed only in handleSubmit).
B
bencccc•368d ago
Note: when logging the result of the OpenAI API call, the error appears before the result is logged correctly.
More Posts
tRPC onErrorI am using tRPC with Fastify and would like to be able to report issues when we get an error. httpsCode structure for a large monorepo using nx + tRPCWe have a large monorepo with a single tRPC API that will be used by several web clients and other cDoes tRPC work with Clerk and Vercel Edge functions?So the answer is yes, at least locally, but I when I deploy to Vercel I get nothing. Trying to work TRPCClientError when creating a db entry without `updatedAt` value?Guys, this is my prisma schema: ``` model User { id Int @id @default(autoincrement())