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.

https://app.egghead.io/api/v1/lessons/react-query-local-and-remote-data-in-apollo-link-state/subtitles

Query Local and Remote Data in Apollo Link State

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.

Query Local and Remote Data in Apollo Link State

Share this video with your friends