DxD
DxD•10mo ago

trpc Pagination

Does somebody have any example how can i do pagination in trpc and react query?
3 Replies
vildantursic
vildantursic•10mo ago
Hi, I haven't had that usecase but I was mostly refering to Tanstack React Query docs, whatever you do with react query you can do with TRPC wrapper. I would pass query params to trpc route (page, limit) and do logic in trpc route and keep (page and limit) on client. This might help https://tanstack.com/query/v4/docs/react/examples/react/pagination
React Query Pagination Example | TanStack Query Docs
An example showing how to implement Pagination in React Query
DxD
DxD•10mo ago
danke i will try it
Nick
Nick•10mo ago
You can also do a infinite query which is RQ, but we have a special extension of it for type safety: 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.
More Posts
Auth through trpc proceduresHas Anyone Successfully Implemented Supabase Auth through tRPC Procedures in a Next.js App? Hello esupabase + trpcdid anyone handle to make it work -> context and all signup signin etc methods?How to update query data after mutationAny idea?standaloneMiddleware: Merge ctx/meta/input typesUsing standaloneMiddleware, it would be great to merge the types (ctx, input, meta) with what is alrDoes `fetchRequestHandler()` automatically opt out of /app Route Handler caching?I noticed that Next.js always skips cache for my TRPC API Route Handlers even though the request URLCold Boot OptimizationsI have a next.js app that uses trcp for all of the routes. I am noticing cold boots are slow. It is Cancel useQueries with single functionis there a way to abort useQueries with function call (e.g. cancel, abort)?There is a logger middleware like morgan for express?There is a package with a nice logger middleware? ThanksImplementing wsLink causes issues on ReactI get an error within the console stating ``` Uncaught (in promise) TypeError: Cannot read propertieUnderstanding how too reuse TRPC with React Server ComponentsHopefully I am understanding this correctly, but I have created a `experimental_createTRPCNextAppDir