Issue
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.
Solution
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 By - larz
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.