1. 4
    Handle loading states for your GraphQL queries
    1m 54s

Handle loading states for your GraphQL queries

Rares Matei
InstructorRares Matei
Share this video with your friends

Social Share Links

Send Tweet
Published 3 years ago
Updated 3 years ago

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.

egghead
egghead
~ 46 seconds ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today