avallete Posts

avallete

•Created by avallete on 6/22/2023 in #❓-help

infiniteQuery always undefined cursor

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.

3 replies

TtRPC

•Created by avallete on 4/16/2023 in #❓-help

query debounce

Hey there ! I wonder if anyone could point me to a standard recipe to achieve query debouncing and caching using trpc and useQuery in react. I'm basically firing an api call everytime the user change his input which start to be quite a lot when he keep the "delete" key pressed on the keyboard.

6 replies

TtRPC

•Created by avallete on 3/14/2023 in #❓-help

async inside link next handler possible ?

Hey everyone, Today I had to do a bit of refactor, and I'm wondering something. I had to turn a synchronous function into an asynchronous one, and ended up needing async into the trpc "link" like so:

// From
const link: TRPCLink<CLIRouterType> = () => {
  return ({ prev, next, op }) => {
    next(op, (result) => {
      if (is401Error(result)) {
          synchronousFunction(result)
      }
      prev(result)
    })
  }
}

// to
const link: TRPCLink<CLIRouterType> = () => {
  return ({ prev, next, op }) => {
    next(op, async (result) => {
      if (is401Error(result)) {
          await asynchronousFunction(result)
      }
      prev(result)
    })
  }
}

// From
const link: TRPCLink<CLIRouterType> = () => {
  return ({ prev, next, op }) => {
    next(op, (result) => {
      if (is401Error(result)) {
          synchronousFunction(result)
      }
      prev(result)
    })
  }
}

// to
const link: TRPCLink<CLIRouterType> = () => {
  return ({ prev, next, op }) => {
    next(op, async (result) => {
      if (is401Error(result)) {
          await asynchronousFunction(result)
      }
      prev(result)
    })
  }
}

Is that okay to do so? Turn the callback of next into an async ?

1 replies