GraphQL gql 语法错误：预期名称，找到 }答案

【问题标题】：GraphQL gql 语法错误：预期名称，找到 }
【发布时间】：2018-06-28 02:30:33
【问题描述】：

我正在尝试在一个新的 React 项目中设置 Apollo GraphQL 支持，但是当我尝试使用 gql 编译查询时，我一直收到错误消息：

语法错误：预期名称，找到 }

这是由以下代码生成的：

import gql from 'graphql-tag'

const query = gql`
    {
      user(id: 5) {
        firstName
        lastName
      }
    }
  `

console.log(query)

我的代码基于此处找到的示例代码：https://github.com/apollographql/graphql-tag

错误消息中提到的Name 是什么？有谁知道我在这里做错了什么？

【问题讨论】：

它应该可以工作。你用的是graphql-tag 2.6.x版吗？
@Win 是的，我使用的是graphql-tag 2.6.1版

标签： syntax-error graphql apollo react-apollo graphql-tag

【解决方案1】：

我不是 100% 确定问题的根源是什么，但是将所有查询代码移到单独的 es6 模块中解决了这个问题。周围的代码一定有某种污染。作为参考，我的查询嵌入在 React 组件中。

这行得通：

import gql from 'graphql-tag'

const query = gql`
{
  user(id: 5) {
    firstName
    lastName
  }
}
`

export default query

【讨论】：

【解决方案2】：

此错误主要发生在大括号未闭合或调用查询时未正确定义某些字段时。

【讨论】：

【解决方案3】：

接受的答案没有解决我的问题。相反，如果您删除最初的大括号，它会起作用。

查询应该如下所示：

const query=gql`
  user(id: 5) {
    firstName
    lastName
  }
`

【讨论】：

谢谢，这也是我的问题。正在做一个突变，无法弄清楚它不需要外部卷发。

【解决方案4】：

导致此错误的另一个原因：您正在引用一个在更下方定义的类型。向上移动要引用的类型。

例如：

    type Launch {
        rocket: Rocket
    }

    type Rocket {
        name: String
    }

会抛出一个错误，因为Launch 在定义Rocket 之前引用了Rocket。

更正后的代码：

    type Rocket {
        name: String
    }

    type Launch {
        rocket: Rocket
    }

【讨论】：

【解决方案5】：

我在服务器端收到了类似的错误：

GraphQLError: Syntax Error: Expected Name, found ]

我意识到在我的例子中，原因是一个空数组的类型定义。

这会中断：

  type Settings {
    requires: []
  }

但这有效：

  type Settings {
    requires: [String]
  }

【讨论】：

【解决方案6】：

原因可能是：

您在开头无缘无故地添加了“()”
您需要添加更多“嵌套”参数。

特别是如果您使用的是在线 GraphiQL 编辑器。例子：

1- 错误代码（额外括号）

{
  allFilms() {
    films {
      title
    }
  }
}

2- 代码错误（需要更多参数，例如：标题）

{
  allFilms {
    films {         
    }
  }
}

3- 正确的代码

{
  allFilms {
    films {
     title         
    }
  }
}

【讨论】：

【解决方案7】：

GraphQLError：语法错误：预期名称，找到“$”。

另一个类似错误的例子（对于其他用户）。

theErrorIsHere（在$varName之前可以是额外的(或{）在$speakerId之前添加

错误代码：

const FEATURED_SPEAKER = gql`
  mutation markFeatured($speakerId: ID!, $featured: Boolean!){
    markFeatured(speaker_id: theErrorIsHere$speakerId , featured: $featured){
      id
      featured
    }
  }
`;

正确代码：

const FEATURED_SPEAKER = gql`
  mutation markFeatured($speakerId: ID!, $featured: Boolean!){
    markFeatured(speaker_id: $speakerId , featured: $featured){
      id
      featured
    }
  }
`;

【讨论】：

我也有“预期名称，找到 $”。我做错了类似：markfeatured($speaker_id: $speaker_id ... 所以你可以看到我做了一个草率的复制和粘贴，意思是摆脱或额外的$，但我没有。

【解决方案8】：

我遇到了这个问题，原因是双引号内有双引号的字符串值，例如："this "is" bad"。

【讨论】：

【解决方案9】：

在任何一方，错误是由额外的 {} 花括号引起的。只需删除它们即可解决。

【讨论】：

【解决方案10】：

在我的情况下，由于以下原因，我收到了错误：

const GET_POSTS_OF_AUTHOR = gql`
  query GetPostsOfAuthor($authorId: Int!) {
    postsOf($authorId: Int!) {
      id
      title
    }
  }
`;

应该是什么时候：

const GET_POSTS_OF_AUTHOR = gql`
  query GetPostsOfAuthor($authorId: Int!) {
    postsOf(authorId: $authorId) {
      id
      title
    }
  }
`;

错误地认为 $authorId 与函数调用相同地传递，而不是在函数调用中设置属性。

【讨论】：

【解决方案11】：

在我的情况下，我收到错误只是因为我添加了我不应该做的:。

例如：

const query = `
   query($id: String!) {
      getUser(id: $id) {
        user: {
          id
          name
          email
          createdAt
        }
      }
   }
`

如果你仔细观察上面代码的第 4 行，你会发现我在大括号之前的用户后面添加了:，然后我开始列出我要查询的用户数据，而这正是错误是！删除: 解决问题！

应该是：

user {
   id
   name
   ...
}

【讨论】：