tRPCttRPC
Powered by
avalleteA
tRPC•3y ago•
2 replies
avallete

infiniteQuery always undefined cursor

Hey there !

I'm struggling a bit to understand who the
useInfiniteQuery
useInfiniteQuery
is supposed to work with React. I have a route fetching logs defnied like so:

On the server:
export const execTaskGetLogs = webProcedure
  .input(
    z.object({
      execTaskId: z.string().nonempty(),
      debug: z.boolean().optional(),
      cursor: z.string().nullish(),
    })
  )
  .query(async ({ ctx, input: { execTaskId, debug, cursor } }) => {
       ...
       console.log('getLogs input: ', { execTaskId, debug, cursor })
       return { logs: [...], nextCursor: `<my-cursor>` }
  }
export const execTaskGetLogs = webProcedure
  .input(
    z.object({
      execTaskId: z.string().nonempty(),
      debug: z.boolean().optional(),
      cursor: z.string().nullish(),
    })
  )
  .query(async ({ ctx, input: { execTaskId, debug, cursor } }) => {
       ...
       console.log('getLogs input: ', { execTaskId, debug, cursor })
       return { logs: [...], nextCursor: `<my-cursor>` }
  }


On react I use it like so:

  const liveLogsQuery = trpc.execTask.getLogs.useInfiniteQuery(
    {
      execTaskId: execTaskResult.execTask.id,
      debug: execTaskResult.isAdmin,
    },
    {
      keepPreviousData: true,
      getNextPageParam: (lastPage) => {
        console.log('getNextPageParams: ', lastPage)
        return lastPage.nextCursor
      },
      refetchInterval: 3000,
    }
  )
  const liveLogsQuery = trpc.execTask.getLogs.useInfiniteQuery(
    {
      execTaskId: execTaskResult.execTask.id,
      debug: execTaskResult.isAdmin,
    },
    {
      keepPreviousData: true,
      getNextPageParam: (lastPage) => {
        console.log('getNextPageParams: ', lastPage)
        return lastPage.nextCursor
      },
      refetchInterval: 3000,
    }
  )


What I'm trying to achieve is:

1. Fetch new logs if there is new logs to fetch every 3000 milisec
2. Stop to try if
lastPage.nextCursor
lastPage.nextCursor
is undefined at some point

My issue is that on server side, my "cursor" parameter always stay "undefined":

🟩 WEB [query: execTask.getLogs]
getLogs input:  {
  execTaskId: 'clj7bs90q001ayu4ix356rtll',
  debug: false,
  cursor: undefined
}
🟩 WEB [query: execTask.getLogs]
getLogs input:  {
  execTaskId: 'clj7bs90q001ayu4ix356rtll',
  debug: false,
  cursor: undefined
}
🟩 WEB [query: execTask.getLogs]
getLogs input:  {
  execTaskId: 'clj7bs90q001ayu4ix356rtll',
  debug: false,
  cursor: undefined
}
🟩 WEB [query: execTask.getLogs]
getLogs input:  {
  execTaskId: 'clj7bs90q001ayu4ix356rtll',
  debug: false,
  cursor: undefined
}


I must be missing something.
tRPCJoin
Move Fast & Break Nothing. End-to-end typesafe APIs made easy.
5,015Members
Resources

Similar Threads

Was this page helpful?
Recent Announcements

Similar Threads

useContext utils getData always returning undefined
bigtechguyBbigtechguy / ā“-help
3y ago
createTRPCNext config ctx always returns undefined.
MonkeyStructMMonkeyStruct / ā“-help
3y ago
How do I prefetch the nextPage of an infiniteQuery?
ygor perezYygor perez / ā“-help
3y ago