reactjs 在Apollo客户端中执行变异操作时出现错误400

k2fxgqgv  于 2022-12-12  发布在  React
关注(0)|答案(1)|浏览(161)

我得到错误400时,突变注册过程.我使用React.JS前端和阿波罗客户端消费API.让我们少说话,这里的代码. 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;

我得到这个错误。

我没有任何想法,我已经尝试和阅读文档仍然没有答案。任何帮助将不胜感激。谢谢。

bfrts1fy

bfrts1fy1#

400错误几乎总是一个错误的GraphQL请求。在这种情况下,你不会从变异中返回任何东西。查看signUp变异的定义,看看它返回了什么,并包括至少一个字段。其他可能的错误包括:

  • 在输入中使用错误的类型
  • 缺少某些必需的输入
  • 包括意外输入或某些输入变量的拼写错误

在将变异嵌入代码之前,请先使用操场测试它。

相关问题