after mutation update Query data by using setQueryData for paginated Queries
I am wondering how to update the paginated query data after mutation? Since paginated queries can have a long key, so you need to go through all the different query keys to find the exact query. How do you solve this problem?
for example, a paginated query can have a key like this: ["movies", 1, 10], the "1" means first page and the "10" means each page has 10 entries.
How do you solve this problem?
2 Replies
metropolitan-bronze•3y ago
it's one of the reasons why invalidation is preferred.
queryClient.invalidateQueries(["movies"]) and you are good to go.
If you want to write to the cache entry manually, my suggestion is to only write to the current view that the user is seeing, and invalidate the rest. I've written about that here: https://tkdodo.eu/blog/effective-react-query-keys
But it means you need to know what the key for the current view is, but you need to know that anyways because you need to build the query. So the solution is to make that state globally available. Putting /movies/1?amount=10 into the url seems like a good choice, because you also get sharable urls with that approach, and you can read the current url params everywhere.Effective React Query Keys
Learn how to structure React Query Keys effectively as your App grows
stormy-goldOP•3y ago
Thanks @TkDodo 🔮 !!! 🥰