Manage local state in React using GraphQL and Apollo Client.
You already know that Apollo Client can manage your remote data and state from a GraphQL server, but did you know that you can also use it to manage local state in your React apps? You can!
apollo-link-state lets you query and mutate local state the same as you would a GraphQL server. This means that you don't need to add another dependency like Redux or MobX to your app.
Managing your remote and local state using the same interface results in a codebase that's easier to maintain and reason about.
Instructor: [00:00] I've got a basic React app here with a couple of nested components. Header contains the text Hello World, and then Arrow Text Color Options Component has these radio buttons for the different colors.
[00:12] What we want to happen is clicking one of these radio buttons should change this text color. We can manage the local state using Apollo Client.
[00:22] Let's first set up our client. I've already imported a number of the libraries that we're going to need. We're also going to pretend that this will communicate with a remote GraphQL server, we're going to set that part up first.
[00:35] We'll create a constant named HTTP Link and use the Create HTTP Link function from the Apollo Link, HTTP Package. This link fetches GraphQL results from a server over an HTTP connection.
[00:51] Next, we need to set up an in-memory cache. At this point, we have enough information to set up the actual client. Go ahead and instantiate a new Apollo Client instance. We'll pass it an object containing the HTTP Link we just defined, as well as our cache.
[01:13] After we create the client, we need to export it. Now that we've got our client, let's hook it up to the app. We need to wrap our header component with an Apollo Provider Component. Apollo Provider lets us access the Apollo Client from its children components.
[01:33] In case you're wondering, client has already been imported from up here. We've got our client connected, but we're not managing local state. Let's set that up now.
[01:48] We'll create a new constant called State Link and call Apollo's With Client State function, passing in our cache and two new objects -- defaults and resolvers.
[01:59] We need to create a new constant state named Defaults whose value will be an object that represents our types and our default values. Let's create an empty object for our resolvers and we'll flesh it out later.
[02:18] We now need to attach State Link to the client. We use Apollo Link From to compose multiple links into one single link. The order of the links that you compose matter. We always want the State Link to come before HTTP Link.
[02:37] Now that we have our client set up, we can write our first GraphQL query. First, import the GQL function from the GraphQL Tag Package then create a new constant called Get Text Color, and set it equal to the following GraphQL query.
[03:00] Our query is asking for the text color that we've defined up here, and then we specifically asked for its value field, which is defined here. Notice this client directive. This tells Apollo Client that the state that we're asking for is local to the application.
[03:18] Now, we can actually fetch this data in the application. We'll come back to our AppJS, and we'll update the header component to query that information. We need to import the query component from the React Apollo Package, as well as our Get Text Color query that we just defined.
[03:43] Wrap the header tag in a query component and set it to Query Prop to Get Text Color. We then set its children to be a function and we'll destructure its data argument so it's easily accessible. We'll then set the H2's class name to use the result from the query.
[04:06] As soon as we save our file, the app refreshes and Hello World takes on the appropriate text color. If we change the default color, we'll see that text change, as well. Hop back into ClientJS and change a text color's value to blue. You can see now as soon as we've changed the value to blue, the text changes, as well.
[04:29] Let's update our Text Color Options Component to show the selected color. Wrap the outer div in a query component and pass it at our text color query. Then, like we did before, set its children to a function and destructure the data argument.
[04:53] Finally, add a selected value property to our radio group and pass it the color value from our query result. Now, you can see that the radio button is automatically selected.
[05:07] Let's test this again just by changing the default color. Change the value to red. Save the file. When the app refreshes, you'll see that the red radio button is selected.
[05:19] The last thing we need to do is actually mutate the value when you select one of these radio buttons. Let's come back to our resolvers object and write the mutation for that. We define a mutation function called Set Text Color and destructure the color argument, as well as the Apollo Client cache.
[05:41] We define a new text color object whose value is the color we passed to this mutation. We create a data object which will just be text color pointing to the new text color then we write that data to the Apollo cache.
[05:57] Finally, we return the new text color object. Now that we've defined our mutation, we can actually use it. We need to import GQL again.
[06:10] Scroll down to the Set Text Color function and implement it. We'll use the client instances mutate method and pass it the actual mutation function. We'll use a named mutation and specify that it takes an argument named Color that is a required string.
[06:33] Then, we invoke the same function we defined in our resolvers and pass it a color variable placeholder. We use the client directive to specify that this is local state and we return the text color type. The last thing we do is pass an object of variables to use in the mutation. Let's try it out.
[06:56] You can see that as we clicked the different radio buttons, the text color changes. We're now managing local state using Apollo Client.