GraphQL gql Syntax Error: Expected Name, found }

Question

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

Syntax Error: Expected Name, found }

这是由以下代码生成的：

import gql from 'graphql-tag'

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

console.log(query)

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

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

Answer 1

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

这个有效：

import gql from 'graphql-tag'

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

export default query

Answer 2

此错误主要发生在没有闭合的花括号或调用查询时某些字段未正确定义的情况下。

Answer 3

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

查询应如下所示：

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

Answer 4

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

例如：

    type Launch {
        rocket: Rocket
    }

    type Rocket {
        name: String
    }

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

更正后的代码：

    type Rocket {
        name: String
    }

    type Launch {
        rocket: Rocket
    }

Answer 5

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

GraphQLError: Syntax Error: Expected Name, found ]

我意识到我的情况的原因是带有空数组的类型定义。

这中断了：

  type Settings {
    requires: []
  }

但这行得通：

  type Settings {
    requires: [String]
  }

Answer 6

原因可能是：

你无缘无故在开头加了一个“()”
您需要添加更多 'nested' 参数。

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

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

{
  allFilms() {
    films {
      title
    }
  }
}

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

{
  allFilms {
    films {         
    }
  }
}

3- 正确代码

{
  allFilms {
    films {
     title         
    }
  }
}

Answer 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
    }
  }
`;

Answer 8

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

Answer 9

在纽约，错误是由额外的 {} 大括号引起的。只需删除它们即可解决。

Answer 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 传递给函数调用，而不是在函数调用中设置属性。

Answer 11

在我的例子中，我得到这个错误只是因为我添加了 : 我不应该做的。

例如：

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

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

应该是：

user {
   id
   name
   ...
}

Answer 12

在 NestJS 框架中，这个错误发生在我身上，因为我在 schema.graphql 文件中将 GraphQL 字段污染为：

  lastUpdated(): Date

应该只是

  lastUpdated: Date

（不接受任何参数）

Answer 13

我遇到了同样的错误。在我的例子中，将 id 放在双引号内解决了这个问题，因为 id 的类型需要字符串值。

{
        product(id: "${id}") {
            name
        }
}

GraphQL gql Syntax Error: Expected Name, found }

GraphQL gql Syntax Error: Expected Name, found }

syntax-error

apollo

graphql

react-apollo

graphql-tag

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