Как применить мутацию с помощью Formik? - PullRequest
Новая
       42

Как применить мутацию с помощью Formik?

3 голосов
/ 12 марта 2019

Я пытался найти способ реализации функции отправки компонента react-apollo <Mutation>.Нашел несколько примеров, которые кажутся излишними для этой простой задачи, включая this и this .Так как я начинающий программист, только начинающий изучать React, не говоря уже о Formik или даже HOC (я думаю, это путь?), Я не могу по-настоящему обдумать эти примеры и то, как адаптировать их к моему аналогу Hello worldкод.

Вот моя форма регистрации: 

import React, { Component } from "react";
import { withFormik, Form, Field } from "formik";
import { Mutation } from "react-apollo";
import { gql } from "apollo-boost";

const CREATE_USER_MUTATION = gql`
  mutation CREATE_USER_MUTATION(
    $name: String!
    $email: String!
    $password: String!
  ) {
    signup(name: $name, email: $email, password: $password) {
      id
      name
      email
      password
      permissions
    }
  }
`;

class App extends Component {
  state = {
    name: "",
    email: "",
    password: ""
  };
  render() {
    return (
      <Mutation mutation={CREATE_USER_MUTATION}>
        {(signup,{loading}) => (
          <Form>
            <Field type="text" name="name" placeholder="Name" />
            <Field type="email" name="email" placeholder="Email" />
            <Field type="password" name="password" placeholder="Password" />
            <button type="submit" disabled={loading}>
              Sign Up
            </button>
          </Form>
        )}
      </Mutation>
    );
  }
}

const SignupPage = withFormik({
  mapPropsToValues() {
    return {
      name: "",
      email: "",
      password: ""
    };
  },
  handleSubmit() { ... }
})(App);

export default SignupPage;

Как я могу получить доступ к signup в handleSubmit?

1 Ответ

1 голос
/ 13 марта 2019

Использование <Formik /> было бы лучшим способом вместо использования withFormik() HOC.

Поскольку <Formik /> находится внутри <Mutation/> (а не наоборот), вы можетевызовите свою мутацию в поле onSubmit.

https://jaredpalmer.com/formik/docs/api/formik

<Mutation mutation={CREATE_USER_MUTATION}>
    {(signup,{loading}) => (

        <Formik
            initialValues={{ name: '', email: '', password: '' }}
            onSubmit={ async (values, actions) => {
                // You can access the signup mutation in here now
                // You can access values.name, values.email, values.password
                // You can access actions, e.g. actions.setSubmitting(false) once you've finished the mutation
            }}


            render={props => (

                <Form onSubmit={props.handleSubmit}>
                    <Field 
                        type="text"
                        onChange={props.handleChange}
                        onBlur={props.handleBlur}
                        value={props.values.name} 
                        name="name" 
                        placeholder="Name" 
                    />
                    <Field 
                        type="email"
                        onChange={props.handleChange}
                        onBlur={props.handleBlur}
                        value={props.values.email} 
                        name="email" 
                        placeholder="Email" 
                    />
                    <Field 
                        type="password"
                        onChange={props.handleChange}
                        onBlur={props.handleBlur}
                        value={props.values.email} 
                        name="password" 
                        placeholder="Password" 
                    />
                    <button type="submit" disabled={loading}> Sign Up </button>
                </Form>
            )}
        />
    )}
</Mutation>
...