为什么我在 Apollo Client 中出现 400 错误

Question

I'm getting error 400 when mutation signUp process. I'm using React.JS for frontend and Apollo Client for consuming API. let's talk less and here's the code. SignUp.js

import React, { useEffect, useState } from 'react';
import { useMutation, useApolloClient, gql } from '@apollo/client';
import styled from 'styled-components';

import Button from '../components/Button';

const Wrapper = styled.div `
    border: 1px solid #f5f4f0;
    max-width: 500px;
    padding: 1em;
    margin: 0 auto;
`;

const Form = styled.form `
label,
input {
    display: block;
    line-height: 2em;
}

input {
    width: 100%;
    margin-bottom: 1em;
}

const SIGNUP_USER = gql `
  mutation signUp($email: String!, $username: String!, $password: String!) {
    signUp(email: $email, username: $username, password: $password)
  }
`;

const SignUp = (props) => {
const [values, setValues] = useState();

const onChange = (event) => {
    setValues({
        ...values,
        [event.target.name]: event.target.value
    })
}

useEffect(() => {
    document.title = 'Sign Up - Notedly';
});

const [signUp, { loading, error }] = useMutation(SIGNUP_USER, {
    onCompleted: data => {
        // console.log the JSON Web Token when the mutation is complete
        console.log(data.signUp);
    }
});

return (
    <Wrapper>
        <h2>Sign Up</h2>
        <Form
            onSubmit={event => {
            event.preventDefault();
            signUp({
                    variables: {
                      ...values
                    }
                  });
                }}
              >
            <label htmlFor="username">Username : </label>
            <input type="text" name="username" id="Username" placeholder="username" required/>
            <label htmlFor="email">Email : </label>
            <input type="email" name="email" id="email" placeholder="Email" required/>
            <label htmlFor="username">Password : </label>
            <input type="password" name="password" id="password" placeholder="Password" required/>
            <button type="submit">Submit</button>
        </Form>
    </Wrapper>
)
};

export default SignUp;

i got this error.

I don't have any idea, i've tried and read documentation still got no answer. any help will be apreciated. Thank you.

Answer 1

A 400 error is almost always a bad GraphQL request. In this case you're not returning anything from the mutation. Look at the definition of the signUp mutation to see what it returns and include at least one field from that. Other possible errors include:

• using the wrong types in the inputs
• missing some required inputs
• including unexpected inputs or mis-spelling some of the input variables

Use the playground to test your mutation before embedding it in code.