useInfiniteQuery and usePaginatedQuery : Caching
I have an app where I'm displaying posts using infinite queries, with 10 posts loaded per request. When a user loads, say, 50 posts on the main page and then views a single post, I want the app to return to the main page with all 50 posts still instantly available — essentially cached.
Previously, when I was using Prisma and Neon with React Query (useInfiniteQuery), this caching behavior worked seamlessly. However, after migrating to Convex and using usePaginatedQuery, I'm running into issues due to its real-time subscription model. The posts are not being cached as expected, which results in unnecessary refetches and skeletons when navigating back to the main feed. While individual post pages load fine, the main feed redundantly refetches data — something I’d like to avoid.
Ideally, I want infinite caching behavior where previously loaded pages persist and new posts are fetched on a hard refresh, not on navigation. Unfortunately, I haven’t found a reliable way to replicate this caching behavior using usePaginatedQuery in Convex or to integrate it effectively with React Query.
I’m migrating to Convex mainly for its speed, which I really like. I found the cache helper, but the note about “subscription caching will mean strictly more bandwidth usage” concerns me. Is there a recommended way to avoid re-querying paginated posts on each navigation? Ideally, I’d like previously loaded posts to persist without using extra bandwidth unnecessarily. And I believe that fetching on each navigation would not be ideal as well.
4 Replies
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!
Query cache helper does this really well: https://github.com/get-convex/convex-helpers/tree/main/packages/convex-helpers#query-caching
In my case, the helper doesn’t help because I’m using usePaginatedQuery to load chat messages, and when switching between chats, the chatId argument changes, which causes the cache to reset. Is there an example somewhere of how to preserve the cache in such a case? Thanks in advance.
Oh, sorry. That was my mistake. The cache isn’t being reset, but only the first page is loaded, and I have to call loadMore again.
Is there a way to load the same number of items that the user had previously loaded?
You would likely need to use an external state manager to keep the results or the number or results. Otherwise its always going to be tied to the render.