Use the React Apollo Mutation Component with Input Arguments
We can send variables to any GraphQL operation and using React Apollo, we can send these variables via the Mutation Component. In this lesson, we will collect data about a ski day from a from and send it to the addDay mutation as variables.
Instructor: [00:00] Let's say we have an Add Day form where the UI has already been constructed for us. Within this data, this component, we have information for the mountain, conditions, as well as the date. The body of this component contains form elements to collect the mountain, date, and the conditions from the user.
[00:17] Right now, the Add Day button is just logging the current state of the form. If I were to fill out the form with Rubicon on January 18th and say the conditions were thin, when I click the Add Day, I can see here we have the conditions, date, and mountain that I've added to the form.
[00:33] It's our job to collect this information and send it off to a GraphQL API. The first thing I'm going to do is import GQL from Apollo Boost and the mutation from React Apollo. I will add a constant here called Add Day mutation where we can add the GraphQL mutation itself.
[00:49] This mutation uses an input type to collect the mountain, date, and conditions. We'll create an argument that is the Add Day input type, and we can send that input argument to the Add Day mutation. I'll also select the ID, date, mountain, and conditions that are returned by the mutation.
[01:06] Now it's time to add the mutation component. This mutation component will use our Add Day mutation. The mutation itself will be passed back as a function through render props. Within our button on-click, instead of logging the state to the console, I'll go ahead and invoke the mutation.
[01:30] When I invoke this mutation, I can pass arguments to it under the variables key. Our mutation has an argument called Input. I will go ahead and set the input's value to the state of the form.
[01:40] When I come over to the form and add Rubicon Peak on January 30th, when I click Add Day, we actually invoke the mutation. However, we're not going to see the data change in this table until we hit refresh. Since this can be confusing for our users, we will add a refetchQuery.
[01:58] 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.
[02:08] Down in the mutation component, I can add a refetchQueries property. This property takes an array where we can send a list of query operations to refetch.
[02:18] This time when I come over to the form and add Castle Peak, we'll invoke the mutation, as well as refetch the Count Days query which will cause Castle Peak to show up in our table.
[02:29] To recap, we've defined a GraphQL mutation that takes in arguments, and we're sending the value for those arguments when we invoke the mutation under the variables key.