Mutation function returned by useMutation not passing variables

Question

I'm trying to use the mutation function returned by the useMutation hook to create a user (later on I have to make a log in mutation as well) but the variables passed on the createUser() function are not being passed.

This is my code for the sign up form:

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

This is the .graphql file containing the mutation that is being loaded by the loader() function:

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

And this is my schema:

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
}

Also running this mutation on my GraphQL server sandbox works perfectly:

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

Changing "data" on the variable object declaration to "SignupInput" hasn't worked.

This is the response I found on the network tab on the 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: {}

What am I doing wrong?

Answer 1

You might've gotten the parameter wrong:

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

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

So change this:

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

to:

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

Reference: useMutation hooks official example