How does the Apollo cache works?

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

Hi again @davidecantelli! These are definitely some Big Questions, thanks so much for asking them. I have a few links to recommend, each of which answers some high-level and low-level questions about the cache that should address questions 1 and 2:

Regarding the browser extension: the dev tools track the state of Apollo Client, not React components. The cached data bit I’m less familiar with, hopefully someone else can chime in about that feature!

Regarding the empty cached data section, this is a known bug with a fix that we plan to review this week. Thanks for your patience!

1 Like

Hello @JeffAuriemma, thank you very much for your links, interesting stuff!

I think I have a better understanding of when I need to update the cache and when I can rely on Apollo automatic updates.

However it is still not clear to me HOW and WHEN Apollo automatically decides to re-fetch a query whenever the cache gets updated after a mutation.

Could you help me understanding?