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.

larzlarz 5,7242 gold badges11 silver badges20 bronze badges · Accepted Answer · 2019-12-12 20:09:52Z

5

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

answered Dec 12, 2019 at 20:09

larz

5,7242 gold badges11 silver badges20 bronze badges

3

2

Alternatively, you could also just keep your createPost call as is and change your query so that it only has a single variable ($data) with the appropriate type.

– Daniel Rearden

Dec 12, 2019 at 20:17
Thank you, this worked perfectly. But, I'm confused because my GraphQL and Schema both have data

– Kevvv

Dec 12, 2019 at 20:21
2

Your mutation defines the variables with mutation CreatePost($title: String!, $body: String!, $price: Int!) and then inside the mutation, passes them in inside an object with data. But you have to pass the variables in in the exact same way you define them.

– larz

Dec 12, 2019 at 20:22

score 1 · Accepted Answer · 2021-10-19 05:25:02Z

I spent my 8 hours for solving this issue.

My answer is based on useMutation from @apollo/react-hooks module.

make user that you have same (createPost or CreatePost) .And dont forget to put $ sign infront of data.

export const CREATE_POST_MUTATION = gql`
    mutation createPost($data: CreateUserInput!) {
        createPost(data: $data){
            id
            title
        }
    }

Make sure you pass the all your mutation data inside data object.

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

make sure you have current input type and same createPost function defined in server side code.

For for information please follow official docs

nielvidnielvid 1 · Accepted Answer · 2021-07-31 23:10:15Z

I faced this same challenge, i got frustrated and just couldn’t figure out what i was doing wrong. But finally i was able to fix it. From your code, the things i discovered you did wrong are (i) the type of should be CreateUserInput! and (ii) createPost after mutation should match exactly, take not of the letter-case. This should fix your bug.

     export const CREATE_POST_MUTATION = gql`
        mutation createPost(data: CreateUserInput!) {
            createPost(data: $data){
                id
                title
            }
        }

score 0 · Accepted Answer · 2023-11-27 17:02:51Z

It’s very easy to miss: a trailing comma in your query variables can lead to this error:

Hovering over that error, it will show Expected String, but found '}'.

Subtle, and the error message didn’t lead me in the right direction.

Variables of required type not provided despited their validity