T
tRPC

infiniteQuery always undefined cursor

infiniteQuery always undefined cursor

Aavallete
View on Discord
6/22/2023
Hey there ! I'm struggling a bit to understand who the 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 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.
Aavallete
View on Discord
6/22/2023
Pretty sure this is not the right solution, but as a workaround I did that: 
  const liveLogsQuery = trpc.execTask.getLogs.useInfiniteQuery(
    {
      execTaskId: execTaskResult.execTask.id,
      debug: execTaskResult.isAdmin,
    },
    {
      getNextPageParam: (lastPage) => lastPage.nextCursor,
    }
  )

  React.useEffect(() => {
    const interval = setInterval(() => {
      if (liveLogsQuery.hasNextPage && tailLog) {
        liveLogsQuery.fetchNextPage()
      }
    }, 3000)
    return () => {
      clearInterval(interval)
    }
  }, [liveLogsQuery.fetchNextPage, liveLogsQuery.hasNextPage, tailLog])
  const liveLogsQuery = trpc.execTask.getLogs.useInfiniteQuery(
    {
      execTaskId: execTaskResult.execTask.id,
      debug: execTaskResult.isAdmin,
    },
    {
      getNextPageParam: (lastPage) => lastPage.nextCursor,
    }
  )

  React.useEffect(() => {
    const interval = setInterval(() => {
      if (liveLogsQuery.hasNextPage && tailLog) {
        liveLogsQuery.fetchNextPage()
      }
    }, 3000)
    return () => {
      clearInterval(interval)
    }
  }, [liveLogsQuery.fetchNextPage, liveLogsQuery.hasNextPage, tailLog])

Looking for more? Join the community!

T
tRPC

infiniteQuery always undefined cursor

Join Server
Recommended Posts
Migrating v9 to v10 - - using the client?I'm migrating a large project from trpc v9 to v10. There is a section of the code that uses the resuUsing tRPC and something else too? For building a mobile app / public API.A bit noobish, but I'm starting a new project w/ the t3 stack and I'm looking to build a mobile app whats the difference between context and middlewareand which 1 should I use for express session cookiesAxios, ExpressMiddleware and TRPCErrorsWe have an express based TRPC server and our procedures are calling our endpoints using axios. So whbase pathHi, don’t seem to be able to find documentation but is there a way to set the base path of the serveAny Benefit using tRPC for only remote api calls?Hi, does it make sense to use trpc if all I will be doing is calling a remote api? I have set it up