Sharing cache between single objects vs group of objects
I have two endpoints that I can use to fetch a resource, once will return an array todo[] and the other will return a single todo by id.
I have two different keys:
['todos'] // to fetch all
['todo', id] // to fetch a specific Foo
What's the best pattern to reconcile the two?
When I call the todo.id one I'd like to update the todos and viceversa. Furthermore, I'd like to reuse data existing in todos as a stale-while-revalidate initial value.
Are we correct in using two separate caches and trying to keep them aligned or is there something else for this use case?
2 Replies
grumpy-cyan•9mo ago
https://tanstack.com/query/latest/docs/framework/react/guides/initial-query-data#initial-data-from-the-cache-with-initialdataupdatedat
for the other way around, you will have to update the cache of the
['todos'] query, but I do not recommend that, if you have pagination you will end up with desync between server and client data
see for more details:
https://tanstack.com/query/latest/docs/reference/QueryClient/#queryclientsetquerydataconscious-sapphireOP•9mo ago
thank you so much, the pagination issue has crossed our mind too, so that's probably out of the question