Client Cache and GraphQL Mutations

A UX issue to fix

Let’s see what happens when a user adds a new product and is redirected to the main page. This is what that might look like:

Notice that when a user creates a product and is redirected to the main page, it doesn’t contain the newly added product! Instead, the product only appears when we refresh the page.

So, what’s happening here? It turns out that when the page initially loads, Apollo Client checks if the requested data is in the cache already. If the data isn’t there, our application sends a request to the server, saves data in the cache, and returns this data to the caller.

This is why when a user loads the page the first time, it contains all the products from the server, but the next time a user is redirected to the main page, GraphQL does not refetch the data.

This happens ...