Variables of required type not provided despited their validity

Question

I'm getting a GraphQL error I can't seem to pinpoint the source of.

Variable "$title" of required type "String!" was not provided.
Variable "$body" of required type "String!" was not provided.
Variable "$price" of required type "Int!" was not provided.

The error message is simple. There are three required variables for this mutation and the error shows that none of the type are provided even though they're clearly provided. The confusing part is the same mutation using the GraphQL Playground works perfectly fine. Using other mutations in the front end also work as they should. This tells me this isn't an issue with the resolver nor the server in general.

My GraphQL for the mutation looks as follows:

export const CREATE_POST_MUTATION = gql`
    mutation CreatePost($title: String!, $body: String!, $price: Int!) {
        createPost(data: {
            title: $title, body: $body, price: $price
            }
        ){
            id
            title
        }
    }
`

I'm using Apollo's React Hook:

    const [createPost, { data, loading }] = useMutation(CREATE_POST_MUTATION, {
        onCompleted: data => {
            setCompleted({
                data,
            })
            setModal(true)
        },
        onError: data => {
            setCompleted({
                isOpen: true,
                error: true,
            })
        },
    }) 

The submit handler for the form:

   const submitHandler = async (value) => {
        const { title, price, description } = value
        try {
            await createPost({
                variables: {
                    data: {
                        title,
                        body: description,
                        price: Number(price),
                    }
                }
            })
        } catch(err) {
            throw new Error(err)
        }
    }

Console logging title, price, description show the state so they are properly passed to createPost. Even when I assign values directly to createPost's variables without passing in the states, the same errors show. This tells me these errors have nothing to do with the form.

I'm using Formik and Yup for the form in a child component, but even when I strip away everything down to the bare bone to just TextInput, the same error messages show:

The GraphQL schema on the server side:

type Mutation {
    createPost(data: CreatePostInput!): Post!
}

input CreateUserInput {
    title: String!
    body: String!
    price: Int!
}

When I console log the corresponding mutation resolver on the server's side, the request and arguments don't even reach there.

Answer 1

Although you're passing in your variables inside data, your graphql isn't expecting them inside data. So change

await createPost({
  variables: {
    data: {
      title,
      body: description,
      price: Number(price),
    }
  }
})

to

await createPost({
  variables: {
    title,
    body: description,
    price: Number(price),
  }
})