Query Local and Remote Data in Apollo Link State

Ben Awad
InstructorBen Awad
Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated 5 years ago

In this lesson, you will learn how to query local and remote data in Apollo Link State in the same component.

We'll set the @client decorator on the local client State variable and set an empty Query object to get this done.

Instructor: [00:00] I have my Apollo Boost pointed at the Pokemon GraphQL endpoint. I want to fetch data from that and the local cache. To do this, I'm going to update my query right here and paste in the Pokemon that I want to grab from the endpoint.

[00:13] Count is coming from the local cache, and I need to decorate that with the client decorator, so Apollo knows that's coming from the local cache.

[00:22] I also need to add something to the resolvers here. I just need to specify the query. I don't actually have any queries, so I'm going to leave it blank. I need to add this, so Apollo knows that there are no queries that match to Pokemon.

[00:36] I have access to both count and Pokemon in my query down here in the data. This is going to be loading in, so it's going to be undefined at first. What I can do is I can access the loading. If we're loading, go ahead and just return null.

[00:55] Down here, I can both display the count, and I can also display my Pokemon by saying data.pokemon.image. Now, I both have access to the Pokemon that we fetched from this endpoint right here. Also, we got the count which we got from the client state or the cache. I can still increment this, if I want to and change any of the values.

egghead
egghead
~ 19 minutes 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