prefetchInfiniteQuery example?
Hi, I'm trying to switch to the newer tanstack react query pattern with our existing nextjs codebase, but I keep getting type errors when trying to use
queryClient.prefetchInfiniteQuery. I noticed there's no infiniteQueryOptions alternative to queryOptions on trpc.{aRouter}.{procedure}, so I'm assuming I have to configure queryOptions somehow to get it to take.
That's on the server, the situation is similar on the client. When I try to pass options to useInfiniteQuery I get the following error:
Type 'DefinedTRPCQueryOptionsOut<LedgerResponse, LedgerResponse, TRPCClientErrorLike<{ transformer: true; errorShape: DefaultErrorShape; }>, { keyPrefix: false; }>' is missing the following properties from type 'UseInfiniteQueryOptions<unknown, Error, InfiniteData<unknown, unknown>, readonly unknown[], unknown>': getNextPageParam, initialPageParam ts(2769)
When I try to supply those fields in queryOptions({...}, {getNextPageParam, initialPageParam}) I then get
Object literal may only specify known properties, and 'getNextPageParam' does not exist in type 'UndefinedTRPCQueryOptionsInSolution:Jump to solution
Nm, I see it's documented under the React Query Integration (classic). Must provide a cursor field to unlock the infinite properties. https://trpc.io/docs/client/react/useInfiniteQuery
useInfiniteQuery | tRPC
- Your procedure needs to accept a cursor input of any type (string, number, etc) to expose this hook.
1 Reply
Solution
Nm, I see it's documented under the React Query Integration (classic). Must provide a cursor field to unlock the infinite properties. https://trpc.io/docs/client/react/useInfiniteQuery
useInfiniteQuery | tRPC
- Your procedure needs to accept a cursor input of any type (string, number, etc) to expose this hook.