Convex Paginated Query with TanStack React Query

Is there out of the box support for Convex paginated queries with React Query? Or do we need to handle it ourselves?

const { data, isPending, error } = useQuery(
  // convexQuery(api.functions.myQuery, { id: 123 }),
  convexPaginatedQuery(api.functions.myPaginatedQuery, { id: 123 }), // Something like this?
);

const { data, isPending, error } = useQuery(
  // convexQuery(api.functions.myQuery, { id: 123 }),
  convexPaginatedQuery(api.functions.myPaginatedQuery, { id: 123 }), // Something like this?
);

5 Replies

Convex Bot•3w ago

Thanks for posting in <#1088161997662724167>. Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets. - Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.) - Use search.convex.dev to search Docs, Stack, and Discord all at once. - Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI. - Avoid tagging staff unless specifically instructed. Thank you!

Indy•3w ago

You can just use Convex react hooks directly for pagination. That might be the simplest way forward.

sircheferooOP•3w ago

The use case here is to take advantage of React Query's built-in caching to prevent UI flickering, sorry should have included that in the original question 😆

Indy•3w ago

Ah, I don't think that's been done yet. Maybe @ballingt has some pointers

erquhart•3w ago

Some relevant discussion here, looks like paginated queries aren't fully integrated with react query from a state management perspective, but some potential novel solutions are mentioned: https://discord.com/channels/1019350475847499849/1300261716738969714 (I know that thread is about useInfiniteQuery, but it ends up with a lot of usePaginatedQuery discussion/solutioning)

Convex Paginated Query with TanStack React Query

Did you find this page helpful?