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

Posted 2023-03-10

【中文标题】来自下一个 js 应用程序的 Graphql 400 错误请求？

【英文标题】：Graphql 400 bad request from next js application?

【发布时间】：2021-11-28 11:01:42

【问题描述】：

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

变异-

mutation signUp($avatar: Upload!) 
    signUp(
        avatar: $avatar
    input: 
        name: "Siam Ahnaf"
        email: "[e-mail]"
        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: "[e-mail]"
                      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 查询有误。

【问题讨论】：

上传需要特殊的请求表单（表单数据，不是json），阅读规范github.com/jaydenseric/graphql-multipart-request-spec

我的代码应该改变什么？

【参考方案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 格式的数据。这就是你得到错误的原因。

谢谢！

【讨论】：

谢谢哥们。我现在可以理解了。我正在检查它。

不客气。你现在可以试试。