使用钩子从反应中调用 GraphQL 突变的正确方法

Posted 2023-03-08

【中文标题】使用钩子从反应中调用 GraphQL 突变的正确方法

【英文标题】：correct way to call GraphQL mutation from react using hooks

【发布时间】：2020-12-12 00:04:54

【问题描述】：

我已经定义了以下突变和输入类型：

extend type Mutation 

    signup(input: SignupReq!): SignupStatus!



input SignupReq 
    email: String!
    password: String!

使用 graphql 游乐场：

mutation signupsignup(input:password:"blabla", email: "[e-mail]")success, message

它返回：

  "data": 
    "signup": 
      "success": true,
      "message": "Success!"
    
  

这是我所期望的。

但是如何从我的 React 客户端调用这个突变？

我现在拥有的是：

const SIGNUP_MUTATION = gql`
  mutation SignupUser($input: SignupReq!) 
    signup(signupReq: $input) success, message, token
  
`

  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')


const [signup,  data, loading, error ] = useMutation(SIGNUP_MUTATION)


const  data, loading, error  = await signup( variables:  email, password  )

这几乎是标准的。

但我错过了一些我无法确定的东西。因为运行 React 脚本给了我以下错误信息：

'Field "signup" argument "input" of type "SignupReq!" is required, but it was not provided.',

如何从 react 中正确调用 Graphql。我一直找不到任何关于如何使用输入类型进行 React 突变的文档。

欢迎任何帮助。

金

【问题讨论】：

了解如何传递变量...在 graphiql/playground 中使用变量...稍后编写代码

graphqlmastery.com/blog/…

【参考方案1】：

您将email 和password 作为变量传递到您的突变中：

variables:  email, password 

相反，正如您从突变中看到的那样，您必须传入一个 input 变量：

variables: 
  input: 
    email,
    password
  

这会起作用，因为它会反映您的 GraphQL 架构中使用的类型：

input SignupReq 
  email: String!
  password: String!