Search code examples
reactjsrelayjsrelay

What is the difference between 'store-and-network' vs 'network-only'?


I've read the documentation, and I'm still confused about the difference between the fetch policy 'store-and-network' and 'network-only'.

"store-and-network": will reuse locally cached data and will always send a network request, regardless of whether any data was missing from the local cache or not.

"network-only": will not reuse locally cached data, and will always send a network request to fetch the query, ignoring any data that might be locally cached in Relay.

I just can't figure out what the point of 'store-and-network' is. It claims that it "will reuse locally cached data"... but it ALWAYS fetches from the network, so exactly WHAT could it possibly reuse?

In my app, I've experimented with both, and I find zero difference in behaviour. Can somebody expand on this, and perhaps demonstrate a scenario where 'store-and-network' and 'network-only' would actually return different results from a query?


Solution

  • Through lots of experimentation, I found the answer:

    'network-only' fetches the data, and does not update any values in the relay store. It will not cause other fragments to be updated.

    'store-and-network' fetches the data, and then updates the store with these values. This will cause any dependent fragments to be updated, which will then cause their components to be rendered.