Handle loading states for your GraphQL queries
Apollo gives us a simple loading flag from the useQuery hook, which we can use to display a loading spinner. Whenever the request finishes, Apollo will re-render our component so that it can display the fresh data.
Instructor: [0:00] Our app makes calls over the network, calls which might take a long time. Currently, if we have a slow network and we switch between categories, we just display a blank screen. It would be nice of us to provide some sort of indication to the user that we're waiting on something. How do we tell when this query returns?
[0:22] One way would be to check if we actually have any data. Not having any data doesn't necessarily mean that we're still waiting on a network request to resolve. The server could actually return us NULL from a given query. In addition to data, Apollo also gives us a dedicated loading flag, which we can use to show a spinner.
[0:46] Back in my browser, if I click on a new category, I get a nice loading indicator now. If notes are already in the cache, however, as we have for our first category, I wouldn't expect to see it again, though, but it does show. This is one gotcha you have to be aware of.
[1:06] If you use a fetch policy like this, the loading indicator will be true whenever there's a network request going on in the background for this query. As we've seen, we always make network requests when using this fetch policy.
[1:20] If you do want to handle loading states with this fetch policy, it might be a good idea to check the status of data as well. In my case, I'm just going to remove it because I don't need it. If I go and try this out, I click on Shopping Categories, I get a loading spinner. I click on Saved Articles, I get a loading spinner. If I click back on Holiday Planning, they load instantly.
[1:45] Whenever any of these variables change now, Apollo takes care to re-render my component. It's nice not having to worry about that.