formik-apollo

A React hook to extract validation errors from a GraphQL request and apply them to a Formik form.

useSubmit

This is a React hook that will automatically extract validation errors from a failed GraphQL response and apply them to a Formik form.

const handleSubmit = useSubmit({
  mutate(data, actions) {
    return client.mutate(MyMutation, { variables: { data } });
  }
});

On the server side, a failed GraphQL response should look like this:

{
  "errors": [
    {
      "message": "Some generic error message",
      "extensions": {
        "code": "VALIDATION_ERROR",
        "problems": {
          "email": ["is required"]
        }
      }
    }
  ]
}

Options

Name	Required	Type	Description
mutate	✔️	Function	Performs the form submission.
onCompleted		Function	Add behavior after a successful submission.
onError		Function	Add behavior after a failed submission.
getStatus		Function	Extracts the error message from the GraphQL response.
getErrors		Function	Extracts field validation errors from the response.