The Apollo Client gives you a simple way to query data from an external API in any application. With `apollo-link-state`, you can take those same concepts you've already learned and interact with local state.

In this lesson, you will learn how to query and update state in your `ApolloClient` with React using the `ApolloProvider` and `Query` components. First, we'll set up the application to read from state, then write a function that will increment that state.

https://app.egghead.io/api/v1/lessons/apollo-read-and-update-local-state-with-apollo-link-state-in-react/subtitles

Read and Update Local State with Apollo Link State in React

Instructor: [00:00] Start by installing these libraries. Now you'll notice we're actually not using Apollo Link State. The reason for that is it comes bundled with Apollo Boost. Next, we're going to create a client from Apollo Client, and we're going to pass in some parameters.

[00:15] The URI, we're going to leave this as an empty string. We're going to have client-state where we specify the default. Since we're making a counter, we're going to start the count at zero.

[00:27] Now we're going to wrap our application in an Apollo provider, and we need to provide the client, which we just created. The next thing is to use the query component to actually access the count in our application, so we're going to say "query."

[00:48] One of the props to query is the actual query we want to run. We're going to create that query. I'm going to call it "GetCountQuery.". We're going to be using GQL from GraphQL tag, so right there.

[01:03] Then we want to specify what we want to query and that's the count. Now it's important that the names match up here, and we're going to pass in that query, so GetCountQuery.

[01:17] This is a rendered prop, so we're going to turn this into a function, and we can get the data. Instead of high, we're going to render data.count, and now it's going to display zero at first.

[01:34] Our next step is we want to increment the count. You can do that by accessing the client from the query. Then we're going to add an outer div here and add a button that we can click on, and it's going to increment. Whenever I click it, we want to access the client and write data, so client.writeData.

[01:58] Now in here, I'm going to say "data," and then what we want to do is we want to increment the count. We're going to say "count is equal to data.count," and we're just going to add one to that.

[02:11] Now we have a little button here, and I can click on it. It'll increment the count and update the store.

Read and Update Local State with Apollo Link State in React

Share this video with your friends