javascript - useMutation 返回的突变函数不传递变量

Question

我正在尝试使用 useMutation Hook 返回的变异函数来创建用户(稍后我还必须进行登录变异)，但是传递给 createUser() 函数的变量没有被传递。

这是我的注册表单代码:

import './SignUpForm.scss'
import { loader } from 'graphql.macro'
import { useMutation } from '@apollo/client'
import { useState } from 'react'

const CREATE_USER_MUTATION = loader('../../graphql/signup.graphql')

export default function SignUpForm(props) {
  const [createUser, { data, loading, error }] = useMutation(CREATE_USER_MUTATION)
  const [formState, setFormState] = useState({
    firstName: undefined,
    lastName: undefined,
    email: undefined,
    username: undefined,
    password: undefined
  })

  const setAttr = (attr, e) => setFormState({ ...formState, [attr]: e.target.value })

  return (
    <>
      <form className='signUpForm' onSubmit={async (e) => {
        e.preventDefault();
        await createUser({ variables: { data: formState } })
      }}>
        <h2>Member registration</h2>
        <input placeholder='First name' autoComplete='on' id='firstNameInputField' onChange={ (e) => setAttr('firstName', e) }/>
        <input placeholder='Last name' autoComplete='on' id='lastNameInputField' onChange={ (e) => setAttr('lastName', e) }/>
        <input placeholder='Email' autoComplete='on' id='emailInputField' onChange={ (e) => setAttr('email', e) } />
        <input placeholder='Username' autoComplete='on' id='usernameInputField' onChange={ (e) => setAttr('username', e) }/>
        <input placeholder='Password' type='password' id='passwordInputField' onChange={ (e) => setAttr('password', e) }/>
        <input type='submit' id='submitRegistrationButton'/>
      </form>
      <a href='/auth/signin'>Do you already have an account?</a>
    </>
  )
}

这是包含由 loader() 函数加载的突变的 .graphql 文件:

mutation signup($SignupInput: SignupInput!) {
  signup(data: $SignupInput) {
    user {
      username
    } 
  }
}

这是我的模式:

extend type Mutation {
  signup(data: SignupInput!): AuthenticationResult!
}

extend type Query {
  currentUser: User
}

type User {
  id: ID!
  email: String!
  firstName: String!
  lastName: String!
  username: String!
  salt: String!
  password: String!
}

input SignupInput {
  email: String!
  firstName: String!
  lastName: String!
  username: String!
  password: String!
}

type AuthenticationResult {
  user: User
  jwt: String
  authError: String
}

在我的 GraphQL 服务器沙箱上运行这个 mutation 也能完美运行:

mutation CreateUserTest($SignupInput: SignupInput!) {
  signup(data: $SignupInput) {
    user {
      username
    } 
  }
}

将变量对象声明中的“data”更改为“SignupInput”无效。

这是我在 DevTools 的网络选项卡上找到的响应:

{operationName: "signup", variables: {},…}
operationName: "signup"
query: "mutation signup($SignupInput: SignupInput!) {\n  signup(data: $SignupInput) {\n    user {\n      username\n      __typename\n    }\n    __typename\n  }\n}\n"
variables: {}

我做错了什么？

Answer 1

你可能把参数弄错了:

const CREATE_USER_MUTATION = loader('../../graphql/signup.graphql')

mutation signup($SignupInput: SignupInput!) { // <- notice the parameter takes a "SignupInput"
  signup(data: $SignupInput) {
    user {
      username
    } 
  }
}

所以改变这个:

await createUser({ variables: { data: formState }})

到:

await createUser({ variables: { SignupInput: formState }})

引用:useMutation hooks official example