infiniteQuery always undefined cursor

Hey there !

I'm struggling a bit to understand who the

useInfiniteQuery

useInfiniteQuery

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>` }
  }

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,
    }
  )

  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

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
}

🟩 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.

infiniteQuery always undefined cursor

Similar Threads

Similar Threads

Similar Threads