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

Hey, I have the router below and want to call the

tutor

tutor

async in an

useCallback

useCallback

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

useCallback

useCallback

function. 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)

Hey, I have the router below and want to call the

tutor

tutor

async in an

useCallback

useCallback

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

useCallback

useCallback

function. 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)

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads