useMutation 返回的突變 function 未傳遞變量

Question

我正在嘗試使用 useMutation 掛鈎返回的突變 function 來創建用戶（稍后我也必須進行登錄突變），但是在 createUser() function 上傳遞的變量沒有被傳遞。

這是我的注冊表單代碼：

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>
    </>
  )
}

這是 .graphql 文件，其中包含由 loader() function 加載的突變：

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 CreateUserTest($SignupInput: SignupInput!) {
  signup(data: $SignupInput) {
    user {
      username
    } 
  }
}

將變量 object 聲明上的“數據”更改為“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 官方示例

Answer 2

這是有趣的。

After a lot of research I gave up and I assumed that maybe Apollo doesn't convert standard JavaScript text object keys to "string" keys, because in GraphQL the keys of an input object are enveloped in " " (quotes) instead of just plain像 JavaScript 對象這樣的文本，所以我更改了我的 formState object 在鍵周圍添加引號並修復了它，但隨后我再次刪除它們以查看這是否真的是問題，事實證明它不是，所以看起來像一個正常的 Z05B6053C41A2BDA4EZ6AFD restart 使它工作，即使我之前多次重新啟動了我的容器/docker。

這聽起來真的很愚蠢，現在謎團就是為什么要修復它。