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

Question

我定义了以下变异和输入类型：

extend type Mutation {

    signup(input: SignupReq!): SignupStatus!

}

input SignupReq {
    email: String!
    password: String!
}

使用 graphql 操场：

mutation signup{signup(input:{password:"blabla", email: "my@email.dk"}){success, message}}

它returns:

{
  "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 突变的文档。

欢迎任何帮助。

金

Answer 1

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

variables: { email, password }

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

variables: {
  input: {
    email,
    password
  }
}

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

input SignupReq {
  email: String!
  password: String!
}

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

correct way to call GraphQL mutation from react using hooks

mutation

reactjs

graphql