Polling the Server

In the real world, despite the speed of updating the cache after a mutation, we do risk that the data could change on the server without the frontend being notified. We can prevent this using the pollInterval option in the useQuery hook, which takes a value in milliseconds that it will use to ping the server for updates.

Let's do this with the HABITS_QUERY in App.js:

const { data, loading, error } = useQuery(HABITS_QUERY, {
  pollInterval: 1000,
});

When you open the Chrome dev tools, you should see a request to the server every 1 second. Of course, if we make that polling interval too small, we're making way too many calls to the server and it defeats the purpose of using the cache. In the real world, you might set this to a few minutes or longer.

You can read more about the useQuery options in the docs.