来自下一个 js 应用程序的 Graphql 400 错误请求？

Question

我使用 graphql 创建了一个后端应用程序。在这里，我创建了一个用于创建用户的突变。在graphql游乐场（我使用altair客户端上传文件）它运行成功-

变异-

mutation signUp($avatar: Upload!) {
    signUp(
        avatar: $avatar
    input: {
        name: "Siam Ahnaf"
        email: "siamahnaf198@yahoo.com"
        password: "siam1980"
    }
){
        message
        token
    }
}

然后我正在构建下一个 js 应用程序。在下一个 js 中，我使用 redux 进行状态管理。 我创造行动-

export const signUp = (data) => async (dispatch) => {
    dispatch({type: SIGNUP_LOADING})
    await axios.post("http://localhost:3001/graphql", {
        query: `mutation signUp($avatar: Upload!) {
                  signUp(
                    avatar: $avatar
                    input: {
                      name: "Siam Ahnaf"
                      email: "siamahnaf198@yahoo.com"
                      password: "siam1980"
                    }
                  ){
                    message
                    token
                  }
                }`,
        variables: {
            avatar: data.pictures[0]
        },
    })
        .then(res => {
            console.log(res)
            dispatch({
                type: SIGNUP_SUCCESS
            })
        })
        .catch(err => console.log("here", err))
}

我将此动作称为onSubmit函数表单组件。

const Signup = () => {
    const dispatch = useDispatch();
    const onSubmit = (data, e) => {
        dispatch(signUp(formData))
    };
    return (
        .......
    );
};
export default Signup;

提交表单后，我收到一个错误，例如错误请求 400。但我不明白我的错误在哪里。请如果有人理解这个问题，请帮助我。

提示**如果我删除查询并放置另一个没有变量或上传文件的查询，它可以工作。我认为操作文件中的 axios 查询有误。

Answer 1

您收到此错误是因为您必须发送实际上不是 json 格式的 formdata。这里我可以举个例子。

如果突变是-

query: `
    mutation($file: Upload!) {
      singleUpload(file: $file) {
        id
      }
    }
  `,
  variables: {
    file: File // a.txt
  }

然后你必须提出 cUrl 请求。喜欢-

curl localhost:3001/graphql \
  -F operations='{ "query": "mutation ($file: Upload!) { singleUpload(file: $file) { id } }", "variables": { "file": null } }' \
  -F map='{ "0": ["variables.file"] }' \
  -F 0=@a.txt

以这种方式将文件上传到您的后端，您必须通过 cUrl 发送表单数据。在您的示例中，您发送了一个 json 格式的数据。这就是你得到错误的原因。

谢谢！