Apollo Client & FetchPolicy
We discuss Apollo Client's intelligent caching system and ways one can manipulate the fetch policy of query requests.
The Apollo Client documentation on the different
fetchPolicy
options can be found - here.
The Apollo Client documentation on interacting with cached data directly can be found - here.
Apollo Client doesn't only give us useful methods to conduct data fetching but sets up an in-memory intelligent cache without any configuration on our part.
When we make requests to retrieve data with Apollo Client, Apollo Client under the hood caches the data. The next time we return to the page that we've just visited, Apollo Client is smart enough to say - "Hey, we already have this data in the cache. Let's just provide the data from the cache directly without needing to make another request to the server". This saves time and helps avoid the unnecessary re-request of data from the server that we've already requested before.
Are there ways we can tell Apollo Client to force the request from the network and not from the cache, and would we ever want to do this? We can investigate two cases in our application where this might be helpful.
Case #1#
The homepage of our app displays the highest priced listings available everywhere in our app. If we were to create a new listing to have the highest price and navigate straight to the homepage, we may not see the newly created listing until we refresh the page to make a network request.
To avoid this, we can add the fetchPolicy
option in our query being made in the <Home />
component with a value of "cache-and-network"
. The "cache-and-network"
option will have Apollo first try and read data from the cache and helps make a query automatically execute with the network to get the latest information. As the Apollo Documentation states - " optimizes for users getting a quick response while also trying to keep cached data consistent with your server data at the cost of extra network requests.".
This page is a preview of TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two