How to do an async API call in useEffect (T3 stack)

Hey, I have the router below and want to call the tutortutorasync in an useCallbackuseCallback function, but the only method that is available is api.chat.queryTutor.useQuery()api.chat.queryTutor.useQuery() which is a hook where you add the input in advance. But I have it available only in the useCallbackuseCallbackfunction. is there a way to access the function directly without a hook?

export const chatRouter = createTRPCRouter({
  tutor: publicProcedure
    .input(
      z.object({
        messages: z.array(
          z.object({
            id: z.string(),
            text: z.string(),
            role: z.enum(["user", "system", "assistant"]),
            addToPrompt: z.boolean(),
          })
        ),
      })
    )
    .query(async ({ input }): Promise<ChatMessage> => {
      // ...
      return {
        // ...
      }
    }),
})

export const chatRouter = createTRPCRouter({
  tutor: publicProcedure
    .input(
      z.object({
        messages: z.array(
          z.object({
            id: z.string(),
            text: z.string(),
            role: z.enum(["user", "system", "assistant"]),
            addToPrompt: z.boolean(),
          })
        ),
      })
    )
    .query(async ({ input }): Promise<ChatMessage> => {
      // ...
      return {
        // ...
      }
    }),
})

Solution

You are after all getting a new state back from the request, the backend is creating something for you even if it doesn't store it

Jump to solution

How to do an async API call in useEffect (T3 stack)

export const chatRouter = createTRPCRouter({
  tutor: publicProcedure
    .input(
      z.object({
        messages: z.array(
          z.object({
            id: z.string(),
            text: z.string(),
            role: z.enum(["user", "system", "assistant"]),
            addToPrompt: z.boolean(),
          })
        ),
      })
    )
    .query(async ({ input }): Promise<ChatMessage> => {
      // ...
      return {
        // ...
      }
    }),
})

export const chatRouter = createTRPCRouter({
  tutor: publicProcedure
    .input(
      z.object({
        messages: z.array(
          z.object({
            id: z.string(),
            text: z.string(),
            role: z.enum(["user", "system", "assistant"]),
            addToPrompt: z.boolean(),
          })
        ),
      })
    )
    .query(async ({ input }): Promise<ChatMessage> => {
      // ...
      return {
        // ...
      }
    }),
})

Solution

You are after all getting a new state back from the request, the backend is creating something for you even if it doesn't store it

Jump to solution

How to do an async API call in useEffect (T3 stack)

How to do an async API call in useEffect (T3 stack)

Continue the conversation

tRPC

Continue the conversation

tRPC

Similar Threads