GraphQL - 语法错误 GraphQL 请求 (5:15) 预期名称

Question

我正在尝试实现一个 graphQL API，它在查询方面表现良好，但在突变方面表现不佳：

这是我使用apollo-client 和graphql-tag 的基本突变：

import gql from 'graphql-tag'
const addNewPlace = (place) => {
    return client.mutate({
        mutation: gql`
        mutation {
          addNewPlace(
          input: {
            $title: String!
          }
          ) {
            place { title }
          }
        }
        `,
        variables: {
          title: place.title
        }
      })
  }

我在这里尝试使用变量。当将突变更改为如下所示时，它进行得很顺利，但是这不是做 id 的正确方法。

const addNewPlace = (place) => {
    return client.mutate({
        mutation: gql`
        mutation {
          addNewPlace(
          input: {
            title: "${place.title}"
          }
          ) {
            place { title }
          }
        }
        `
    })
}

知道我在哪里犯错了吗？

Answer 1

使用变量时，您需要采取三个步骤：

1. 将变量添加到正在发送的请求中。在 Apollo 中，这是通过在传递给 mutate 的对象内指定 variables 属性来完成的。你写道：

   变量：{ 标题：place.title }

   这很好。我们正在向我们的服务器发送一些名为 title 的变量以及任何值的请求。此时，GraphQL 甚至不知道变量。

2. 在操作中声明变量。您不必命名您的操作，但最好这样做：

   变异 AddNewPlace($title: String) {

   在这里，我们告诉 GraphQL 我们已经包含了一个名为 title 的变量。您可以将其称为任何名称（例如 foo），只要它与您在 #1 中传递给变量 prop 的内容相匹配。这一步很重要，因为 A) GraphQL 需要了解变量，B) 它需要知道您传入的变量的什么类型。

3. 最后，在你的突变中包含变量，如下所示：

   addNewPlace（输入：{标题：$title}）{

注意不要将第 2 步中的变量定义与第 3 步中的输入定义混淆。另外，我假设您的 typeDefs 包含某种 input 类型，例如 AddNewPlaceInput。您可以像这样传入一个对象，而不是只传入标题：

variables: { input: { title: place.title } }

那么你的变异看起来像这样：

mutation AddNewPlace($input: AddNewPlaceInput) {
  addNewPlace(input: $input) {
    # fields returned by the mutation

我会强烈建议启用 GraphiQL 端点，这样您就可以在客户端实施之前轻松测试查询和突变。

最后，您可能需要检查并确保您在突变中要求的字段与您的类型定义匹配。我只是在这里猜测，但如果您的突变解析为 Place 类型，则无需输入 place { title }，只需输入 title，除非您的 Place 类型实际上具有 place 字段。