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

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

reactjs react-apollo formik

12.03.2019 17:22

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

2 277

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Использование <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.handleChangeEvent}
                        onBlur = {props.handleBlur}
                        value = {props.values.name} 
                        name = "name" 
                        placeholder = "Name" 
                    />
                    <Field 
                        type = "email"
                        onChange = {props.handleChangeEvent}
                        onBlur = {props.handleBlur}
                        value = {props.values.email} 
                        name = "email" 
                        placeholder = "Email" 
                    />
                    <Field 
                        type = "password"
                        onChange = {props.handleChangeEvent}
                        onBlur = {props.handleBlur}
                        value = {props.values.email} 
                        name = "password" 
                        placeholder = "Password" 
                    />
                    <button type = "submit" disabled = {loading}> Sign Up </button>
                </Form>
            )}
        />
    )}
</Mutation>

Это в значительной степени решает это. Увлекся HOC так много, что упустил из виду простой путь. Примечание: в событии onClick отсутствует props.. В любом случае это событие является избыточным, так как оно вызывается в компоненте Form.

— 13.03.2019 18:53

Здорово! Да, я думаю, что если вы хотите использовать withFormik HOC, вы также должны использовать мутацию HOC, а затем использовать compose.

— 13.03.2019 19:09

13.03.2019 00:52