Read and Update Local State with Apollo Link State in React
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.
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.
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
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!