https://github.com/tweag/formik-apollo

A little bit of for using Formik with Apollo
https://github.com/tweag/formik-apollo

Last synced: about 2 months ago
JSON representation

A little bit of for using Formik with Apollo

• Host: GitHub
• URL: https://github.com/tweag/formik-apollo
• Owner: tweag
• Created: 2019-10-21T15:03:52.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-10-20T01:09:08.000Z (11 months ago)
• Last Synced: 2024-07-17T05:26:09.660Z (2 months ago)
• Language: TypeScript
• Homepage:
• Size: 1.1 MB
• Stars: 8
• Watchers: 3
• Forks: 2
• Open Issues: 27
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# formik-apollo

![Build](https://img.shields.io/travis/promptworks/formik-apollo/master?style=flat-square)

![Version](https://img.shields.io/npm/v/formik-apollo?style=flat-square)

![Size](https://img.shields.io/bundlephobia/min/formik-apollo?style=flat-square)

![License](https://img.shields.io/npm/l/formik-apollo?style=flat-square)

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.

```typescript

const handleSubmit = useSubmit({

  mutate(data, actions) {

    return client.mutate(MyMutation, { variables: { data } });

  }

});

```

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

```json

{

  "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.   |