Hi guys,
I need some clarification about the apollo cache that I can’t find anywhere:
1. What’s the purpose of modifying the cache
Let me explain. The documentation states that, if you need to manually update the cache after a mutation, you can use cache.modify()
.
Documentation also says that, “Like writeQuery
and writeFragment
, modify
triggers a refresh of all active queries that depend on modified fields”.
I think I am missing something here: what is the purpose of updating the cache manually if this operation will trigger a refetch of all dependant queries, which will end up overriding the manual changed you made? Typically you want to either update cache manually OR refetch to get fresh data. You don’t want to do both. What am I missing?
I know you can pass broadcast: false
but I wonder what is the situation in which you don’t need it.
2. Best practices
I have a situation in which many React components, which are rendered in the same page, are calling the same query listAnimals
, which also support pagination, passing different filters (variables) and asking for different data. For instance one component asks for all animals with 4 legs and their data (name, age, color, etc), another component asks for just the totalCount of animals with 2 legs, another for both data and totalCount of animals that are mammals, listing them with infinite scroll, and so on.
Plus, the user can delete one of the listed animals, which will trigger a mutation of course.
Let’s say that the mutation is a bit scarce, and does not return anything else than a boolean true
if operation was successfully completed. What approach should you use to modify the cache after the mutation?
I mean, there are many components that might, and should be affected. Many components are maybe listing that specific animal that got deleted, maybe that animal is also listed at page 3 of an infinite scroll panel in another component, and again another component is showing just a totalCount that might, or might not be, affected by the just deleted animal.
What is the best practice to tackle this situation?
3. How does the Apollo Dev tools works
I see that in the tab CACHE → ROOT_QUERY all the queries are listed. Is it normal that I see also inactive (=owned by unmounted components) queries?
Why in tab QUERIES, if you click on a query and then on “Cached data” on the right (related to query), it is always empty?
Thank you everyone