Implement an Optimistic Response to a React UI & Showcasing Offline Functionality
In this lesson, we’ll show how you can have your mutations work when the user is offline. We’ll handle the offline mutation with an optimistic response, then when the user comes back online the data will be sent to the dashboard for a seamless user experience.
Instructor: [00:01] We'd like to add an optimistic response to our application. An optimistic response will allow our UI to update instantly when a new mutation is created, without waiting for the round trip to and from the server.
[00:14] To get started, we'll go ahead and install a new package, uuid. Uuid will allow us to create randomly generated IDs. We'll update our imports. We'll import the compose high-order component from React Apollo as well as uuid.
[00:33] Uuid has multiple algorithms. We'll use V4 which will just generate a completely random ID. We'll rename the name of our mutation to Mutation, because later on, we're going to be using the createTodo reference, and we don't want to have a naming collision.
[00:49] We'll be referencing this mutation from our optimistic response, so let's go ahead and return also the name and the completed values from the mutation. Let's go ahead and recreate the list todos GraphQL query.
[01:06] List todos will return an items array containing the ID, the name and the completed values for every todo in the array. We'll update the ID todo class method to add an ID property to the todo that's being created using uuid V4.
[01:34] We'll update the default export. Instead of exporting the GraphQL high-order component, we're going to export the compose high-order component, allowing us to compose multiple GraphQL operations.
[01:57] Now, we'll add another GraphQL operation to actually hit the query. Query will contain an options object with the fetch policy of cache-and-network. For the props, we'll return a todos array.
[02:23] For the todos array, we'll first check to see if props.data.listTodos exists. If it does, we'll return props.data.listTodos.items. If not, we'll just return an empty array. We'll update the second GraphQL operation, replacing createTodo with our updated name Mutation.
[02:44] We'll update the props.mutate properties, adding two more properties, optimistic response as well as an update function. The optimistic response will contain two properties, TypeName and createTodo. CreateTodo will take in a todo that's being passed in from the mutation as well as the TypeName of todo.
[03:20] The update function takes two arguments, the proxy as well as the mutation. Here, we'll go ahead and destructure the createTodo. We'll go ahead and create a new variable called data and setting it to proxy.readQuery and passing in the query.
[03:43] Now we can call data.listTodos.items.push, passing in the new mutation. Finally, we'll call proxy.writeQuery, passing in the query and the data. We'll update our UI, mapping over all of the todos showing the todo name.
[04:31] Let's go ahead and run the app by running npm start. As we add new items, they show up instantly to our UI without any delay. Let's take a look at the offline functionality.
[04:55] To demonstrate this, let's open the network tab, enable offline mode and clear out any existing network activity. We'll add a new todo, see the todo show up in our UI, but notice that no network activity has been recorded.
[05:22] If we go to our database and click refresh, we see that the new todo has indeed not been added to our database. When we go back to the network tab and disable offline mode, we see that the GraphQL operation has been executed.
[05:42] When we go back to our database and click refresh, we see that the new todo has been added.