尽管有效，但未提供所需类型的变量

Question

我收到一个 GraphQL 错误，我似乎无法查明其来源。

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.

错误信息很简单。此突变需要三个变量，错误显示提供了 none 类型，即使它们已明确提供。令人困惑的部分是使用 GraphQL Playground 的相同突变工作得很好。在前端使用其他突变也能正常工作。这告诉我这不是解析器或一般服务器的问题。

我的变异 GraphQL 如下所示：

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

我正在使用 Apollo 的 React Hook：

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

表单的提交处理程序：

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

控制台日志记录 title、price、description 显示状态，以便它们正确传递给 createPost。即使当我直接将值分配给 createPost 的变量而不传递状态时，也会显示相同的错误。这告诉我这些错误与表单无关。

我在子组件中使用 Formik 和 Yup 作为表单，但即使我将所有内容都剥离到只剩下 TextInput，同样的错误消息显示：

服务器端的 GraphQL 模式：

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

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

当我在服务器端控制台记录相应的突变解析器时，请求和参数甚至没有到达那里。

Answer 1

尽管您在 data 中传递变量，但您的 graphql 并不期望它们在 data 中传递。所以改变

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

至

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

Answer 2

我遇到了同样的挑战，我很沮丧，只是不知道我做错了什么。但最后我能够修复它。从您的代码中，我发现您做错的事情是 (i) 的类型应该是 CreateUserInput！ (ii) mutation 之后的 createPost 应该完全匹配，不考虑字母大小写。这应该可以修复您的错误。

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

Answer 3

我花了 8 个小时来解决这个问题。

我的回答基于 @apollo/react-hooks 模块中的 useMutation。

让用户知道您拥有相同的 (createPost or CreatePost)。并且不要忘记在数据前面加上 $ 符号。

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

确保在 data 对象中传递所有变异数据。

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

确保您在服务器端代码中定义了当前输入类型和相同的 createPost 函数。

获取信息请关注official docs

尽管有效，但未提供所需类型的变量

Variables of required type not provided despited their validity

javascript

reactjs

react-native

graphql

react-apollo