javascript - GraphQL - 语法错误 GraphQL 请求 (5 :15) Expected Name

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 属性来完成的。你写道:

   变量:{ title: place.title }

   这很好。我们正在向我们的服务器发送一些名为 title 的变量，无论值是多少。此时，GraphQL 甚至不知道变量。

2. 在您的操作中声明您的变量。您不必为您的操作命名，但这样做是一种很好的做法:

   突变 AddNewPlace($title: String) {

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

3. 最后，将变量包含在您的突变中，如下所示:

   addNewPlace(input: { title: $title }) {

注意不要将步骤 #2 中的变量定义与步骤 #3 中的输入定义混淆。此外，我假设您的 typeDef 包含某种 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 字段。