Query Local and Remote Data in Apollo Link State
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.