Building Full Stack Applications with GraphQL/

...

/

Sending Mutations with Apollo Client

Sending Mutations with Apollo Client

Learn how to use mutations with Apollo Client.

We'll cover the following...

In this lesson, we’ll finally learn how to send mutations using Apollo Client. We’ll complete the implementation of the new product form, which will use a GraphQL mutation to create new products. We’ll also see how to implement a form using Material UI and the Formik library and then integrate it with GraphQL.

What are we implementing?

In this lesson, we’ll fully implement the new product form we discussed in earlier lessons.

Create New Product form
Create New Product form

This form will contain the following fields:

  • The name of the new product.

  • A description of the new product.

  • A URL that users can navigate to a new page to learn more about the new product.

  • A list of categories the new product belongs to.

Users will fill in information for these fields and send them to the GraphQL server using the createProduct mutation.

Setting up Formik

To implement this form using just React, we would have to write lots of boilerplate code to track the state of the form, check if we have values for all required fields, verify input values, and so on. While it is feasible to do for our form, we’re better off using a library to help us.

We’ll use a very popular React forms library called Formik. It’s easy to use and integrates well with Material UI.

We install the Formik library using the following command:

npm install formik yup

To use Formik, we also need to add two additional imports: useFormik to initialize our form, and yup for form data validation.

Press + to interact
// components/NewProduct.js
import * as yup from 'yup'
import { useFormik } from 'formik'

To define the form’s state, we need to call the useFormik function and provide three values:

  • initialValues: These are the
...