Блог

Я пытался придумать способ реализации функции отправки react-apollo <Mutation> компонента. Нашел несколько примеров, которые кажутся излишними для этой простой задачи, включая это и это. Поскольку я начинающий программист, только начинающий изучать React, не говоря уже о Formik или даже HOCS’ах (полагаю, это правильный путь?), я не могу по-настоящему разобраться в этих примерах и в том, как адаптировать их к моему аналоговому 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 ?

Использование <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>