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

我试图在一个新的 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是什么? 有人知道我在这里做错了什么吗？

138536 次浏览
小开
最佳答案

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

这种方法是有效的:

import gql from 'graphql-tag'


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


export default query
小开

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

小开

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

查询应该是这样的:

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

出现此错误的另一个原因是: 您正在引用一个在更下面定义的类型。将引用的类型向上移动。

例如:

    type Launch {
rocket: Rocket
}


type Rocket {
name: String
}

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

更正后的代码:

    type Rocket {
name: String
}


type Launch {
rocket: Rocket
}
小开

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

GraphQLError: Syntax Error: Expected Name, found ]

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

这就是问题所在:

  type Settings {
requires: []
}

但这种方法是有效的:

  type Settings {
requires: [String]
}
小开

原因可能是:

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

特别是当你使用在线 GraphiQL 编辑器的时候。例子:

错误的代码(额外的括号)

{
allFilms() {
films {
title
}
}
}

错误的代码(更多的参数需要它例如: title)

{
allFilms {
films {
}
}
}

密码正确

{
allFilms {
films {
title
}
}
}
小开

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

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

theErrorIsHere(可能是额外的 (或 {之前的 $varName)在 $speakerId之前加入

错误代码:

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

Error output

密码正确:

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

我遇到了这个问题，原因是双引号中包含双引号的字符串值，比如: "this "is" bad"。

小开

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

小开

在我的例子中，我得到错误是因为以下原因:

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

错误地认为 $authId 传递给函数调用的方式与传递给函数调用的方式完全相同，而没有在函数调用中设置属性。

小开

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

例如:

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

如果你密切关注上面代码的第4行，你会意识到我在用户之后添加了 :，然后我开始列出我想查询的用户数据，这正是错误所在！ 移除 :解决了这个问题！

它应该是:

user {
id
name
...
}
小开

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

  lastUpdated(): Date

相反，它应该是公正的

  lastUpdated: Date

(不需要任何争论)

小开

我得到了同样的错误。在我的例子中，将 id 放在双引号中解决了作为 id 类型所需的字符串值的问题。

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

小开

在这里发帖，以防其他人有这个问题，但是如果您不小心使查询看起来像带冒号的 json (:) ，您也会得到这个错误。

例如:

data {
property {
key: {
deepKey
}
}
}

将在 GQL 编译中给出相同的错误

小开

如果使用 gql from@clinet/apollo，并在反勾中尝试注入动态 js 值，就会发生这种情况。删除它，并替换为正常的标量，它将修复您的问题。 例如:

${SOME_MAX_VALUE} -> 20


提交答案