Ошибка сети: ответ не выполнен: получен код состояния 400

Question

Мой мозг сломался. Почему сервер отправляет эту ошибку. Я просмотрел все статьи с одной и той же ошибкой и не нашел решения. В чем проблема? Как я могу исправить эту ошибку? Пожалуйста помоги. Мой код.

App.jsx Это клиент для Apollo Client

const client = new ApolloClient({
  uri: "http://localhost:4000/api/",
  request: (operation) => {
    const token = localStorage.getItem("token");

    operation.setContext({
      headers: {
        authorization: token ? `Bearer ${token}` : ""
      }
    });
  }
});

signUp. js Это мутация для sighUp

import { gql } from "apollo-boost";

export default gql`
  mutation signup($firstName: String!, $secondName: String!, $email: String!, $password: String! ) {
    signup(firstName: $firstName, secondName: $secondName, email: $email, password: $password ) 
  }
`;

RegForm.jsx Это мой компонент регистрации

import React, {Component} from 'react'
import {Field, reduxForm, SubmissionError} from 'redux-form'
import regForm from './RegForm.module.css'
import { matchInput, passLength, email, required} from '../../../utils/validators'

import RegMutation from '../../../queries/signup'
import Button from '../../../UI/Button/Button'
import myInput from '../../../UI/Input/Input'
import { withMutation } from "react-apollo";

const passwordValidator = passLength(8);


class RegForm extends Component {
  constructor(props){
    super(props)

    this.handleSubmit = this.handleSubmit.bind(this);
  }

    handleSubmit(fields) {
      console.log('Fields from handleSubmit',fields);

      const { mutate } = this.props;

      return new Promise((resolve, reject) => {
        mutate({
          variables: {
            firstName: fields.loginField,
            email: fields.email,
            password: fields.passwordField
          }
        })
          .then(res => {
           console.log(res.data);
            resolve(res);
          })
          .catch(e => {
            reject(new SubmissionError({ _error: e?.message }));
          });
   });
  }

    render(){
        return (
            <div>
            <form 
                className={regForm.formContent}
                onSubmit={this.props.handleSubmit(this.handleSubmit)}
            >

            <Field 
                name='loginField'
                type='text'
                component={myInput}
                validate={[required]}

            />
            <Field 
                name='email'
                type='text'
                component={myInput}
                validate={[email]}

            />
            <Field 
                name='passwordField'
                type='password'
                component={myInput}
                validate={[passwordValidator]}
                placeholderText='Введите пароль'
            />
            <Field 
                name='repPas'
                type='password'
                component={myInput}
                validate={[matchInput]}

            />
            <Button
                onClick={this.Click}
                className={regForm.button}>Sign Up
            </Button>

        </form>

        {this.props.error ? <span>{this.props.error}</span> : null}
        </div>
        )
    }
}
const connectedToReduxForm = reduxForm({
  form: "loginForm",
});



export default withMutation(RegMutation)(connectedToReduxForm(RegForm))

Answer 1

поле secondName отсутствует. Я знал об этом, запустив полный проект) снимок экрана