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

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

大多数情况是在没有大括号的情况下或调用查询时未正确定义某些字段时发生的。

Answer 2

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 3

原因可能是您无缘无故地添加了“()”，或者您需要添加更多“嵌套”参数。（特别是如果您使用在线 GraphiQL 编辑器）

错误的代码（额外的括号）

{
  allFilms() {
    films {
      title
    }
  }
}

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

{
  allFilms {
    films {         
    }
  }
}

正确的代码

{
  allFilms {
    films {
     title         
    }
  }
}

Answer 4

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

这有效：

import gql from 'graphql-tag'

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

export default query

Answer 5

我发现接受的答案不能解决我的问题。我发现行之有效的是，如果您删除了最初的大括号。查询应该看起来像这样：

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

Answer 6

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

例如：

    type Launch {
        rocket: Rocket
    }

    type Rocket {
        name: String
    }

将抛出错误，因为定义了之前的Launch引用。 RocketRocket

更正后的代码：

    type Rocket {
        name: String
    }

    type Launch {
        rocket: Rocket
    }