Use fetch policies in Apollo to keep your queries fast and fresh with the latest data
Now we're going to look at fetch policies in Apollo. We'll see how we can use them to completely disable the cache for specific queries, and the effect this can have in our notes app. We'll also look at the "cache-and-network" fetch policy, which allows us to both continue to benefit from the cache, but also ensure our queries update in the background, should there be any new data on the server.
Instructor: [0:00] The Apollo cache is great, but sometimes we're faced with the problem of stale data. If it keeps saving everything in the cache and never pulling from the server if it doesn't have to, how can we ever download new data when it's available on the backend?
[0:15] One way to do it is to just refresh the page. It's an in-memory cache, so it gets cleared when the app restarts. Another way is to completely disable it for certain queries via a fetchPolicy option, which I'll set to no-cache in this case. This is useful for certain queries where it's less important that they resolve as quickly as possible and more important that they're always up to date.
[0:40] If I slow down my network a bit, and we start switching between categories, you'll see that I always need to wait now, and I always get network requests down here. That's because it's not using the cache anymore. It's always trying to get the latest data from the server.
[0:58] A good middle-ground fetch policy you can use is cache-and-network. This first tries to pull the result from the cache, if it's available. Then, in the background, it also makes a network request to the server to update the cache and its underlying data if anything changed.
[1:19] You'll see now that when I click on Shopping, it first waits for it to load. Then, when I click back to Holiday Planning, it loads instantly, but I still get a network request. If I click on Shopping and you watch the network requests, it's instant, but I also get the extra server call. Apollo, by default, never calls the server if it doesn't have to.
[1:40] Setting up fetch policies like this is a good way to both provide a good user experience, because everything feels snappy, but also make sure the data is always up to date with what's on the server.