Query Keys for Infinite Queries
Hey! I'm using
useInfiniteQuery for a really big list of posts, and I want to update a single post with queryClient.setQueryData. I thought I could do this with setQueryData(["posts", post.id], ...) but that's when I thought that the infinite query placed items as a separate query key. Can I make it do this, or would I have to do some weird stuff like send down just post IDs from the GET /posts endpoint and for each <Post /> have it's own useQuery({ queryKey: ["posts", post.id] }) but that seems really heavy on performance and doesn't feel straightforward. Can I somehow do this without having to update the whole list?5 Replies
exotic-emeraldOP•4w ago
What I'm saying is that I'd like to somehow tell Query what my key is for each item (in this case each post), and have it store them in the cache with query keys like
["posts", key]. This may be impossible due to the way Query works, but I'd atleast like to get an alternative solution. I get that it's technically possible to copy the whole list of posts, go through all of them to find the correct one, update it and return this new list, but this isn't ideal as the list grows bigger. Thanks!like-gold•4w ago
InfiniteQuery stores all pages for a query under a specific query key so that you can fetch previous and next page and store it all under one cache entry.
I believe that if you want to update a single entry in a paginated list, you will need to know which page it is under so that you can find and update that query in the relevant page of the cache.
---
If you are instead going to use an individual query for a single entry (which is the typical way of doing this), you can use an approach like TKDodo mentions here to seed the cache of your individual query from the infinite query
https://tkdodo.eu/blog/seeding-the-query-cache
You'd just need to flat map your infinite query data, see if you have the relevant data to seed the cache and then do so.
Seeding the Query Cache
With suspense for data fetching on the horizon, it is now more important than ever to make sure your cache is seeded properly to avoid fetch waterfalls.
like-gold•4w ago
Also here is a post from a while back on optimistic updates to infinite query for a concrete example of updating the cache
https://github.com/TanStack/query/discussions/3360
GitHub
How to make Optimistic Updates in useInfiniteQuery · TanStack que...
How to make Optimistic Updates in useInfiniteQuery
exotic-emeraldOP•4w ago
Thanks! I suppose that the seeding method requires a
useQuery call for each post in the list, would this work for thousands of posts or should I do the “dirty” way of filtering through the flatted array?
@ViewableGravylike-gold•4w ago
You’d only need to seed when you actually use an individual id, but yes, this should work. It also has the benefit of normalizing your data so once it’s in the individual queries, you aren’t iterating over thousands of array items to find your data each time since you only need to seed once