This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Read and Update Local State with Apollo Link State in React

    Ben AwadBen Awad

    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.

    apolloApollo
    graphqlGraphQL
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss