Name: Remove a Data Record with the React Apollo Mutation Component
Uploaded: 2019-02-01T19:48:47-06:00
Description: The Mutation Component is what is used to trigger mutations from a user interface. In this lesson, we will add a remove button to each table row that allows users to remove records with a mutation.

The Mutation Component is what is used to trigger mutations from a user interface. In this lesson, we will add a remove button to each table row that allows users to remove records with a mutation.

https://app.egghead.io/api/v1/lessons/react-remove-a-data-record-with-the-react-apollo-mutation-component/subtitles

Remove a Data Record with the React Apollo Mutation Component

Instructor: [00:00] Let's say we wanted to add the ability to remove an individual record. We could add an additional table cell to each row that contains a Remove button. When we click this Remove button, we'll have to invoke a mutation.

[00:10] I'm going to go ahead and import GQL from Apollo Boost and the mutation component from React Apollo and I'm going to create a new mutation. We'll call this constant the Remove Day mutation, and it will contain the GraphQL mutation necessary to remove a day.

[00:24] In order to remove a day, we'll have to provide the ID of the record to remove, so we can add that as an argument to this mutation.

[00:32] Within the Remove Day mutation, we can select information about the data change itself. We'll select Removed, the total after the removal, as well as the ID of the data that was removed.

[00:43] Now it's time to add the mutation component. We'll use our Remove Day mutation and a function that we can use to invoke this mutation will be passed within the render props.

[00:53] When the user clicks the button, I'll invoke the mutation function for our Remove Day mutation. I'll pass the ID for the current record as variables.

[01:02] We already have all the information about the day used to construct this row. I will just pass the day's ID as the ID of the mutation to remove when the user clicks this button.

[01:10] This will take care of sending the mutation. We also want to update the local cache once we've received a successful response from the mutation.

[01:19] Within the Day Removed function, we can read the current value that the cache has for all days by using client.read query. All we need to do is specify a GraphQL query to run against the current local cache.

[01:33] Up here, I will create a constant called the Count Days query where I will define a query that selects the total days, as well as information about each day. The mutation response will tell us whether a record has been removed or not.

[01:47] We'll test the value of data, Remove Day Removed. If a day was removed, we also want to remove it from our local cache. I'll use the client.write query method to change the local cache.

[01:58] Within this method, I will define which query I want to write the data to. We'll set the value for total days to the total count after the removal. We requested that value when we sent the mutation.

[02:10] Now we can use all days to filter out the day that has been removed because we received the ID of the data that was removed within our mutation response as well.

[02:19] At this point, our application allows us to remove records by sending a Remove mutation. As I remove each record, we update the local cache and the UI follows. We can also still use the form to add new data records to our application as well.

Remove a Data Record with the React Apollo Mutation Component

Share this video with your friends