GraphQL gql Syntax Error: Expected Name, found }

Question

I'm attempting to set up Apollo GraphQL support in a new React project, but when I try to compile a query using gql I keep receiving the error:

Syntax Error: Expected Name, found }

This is generated by the following code:

import gql from 'graphql-tag'

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

console.log(query)

I'm basing this code off the example code found here: https://github.com/apollographql/graphql-tag

What is the Name referred to in the error message? Does anyone know what I'm doing wrong here?

Answer 1

This error occurs mostly when there are unclosed curly braces or when some fields are not properly defined while calling the query.

Answer 2

The accepted answer didn't solve my issue. Instead, it worked if you remove the initial curly brackets.

The query should look like this instead:

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

Answer 3

The causes could be:

• you are adding a "()" at the beginning for no reason
• you need to add more 'nested' parameters.

Especially if you are using an online GraphiQL editor. Examples:

1- Wrong code (extra parenthesis)

{
  allFilms() {
    films {
      title
    }
  }
}

2- Wrong code (more parameters need it eg: title)

{
  allFilms {
    films {         
    }
  }
}

3- Correct code

{
  allFilms {
    films {
     title         
    }
  }
}

Answer 4

I'm not 100% sure what the root of my problem was, but moving all the query code into a separate es6 module fixed the issue. There must have been some kind of contamination from the surrounding code. For reference my query was embedded within a React component.

This works:

import gql from 'graphql-tag'

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

export default query

Answer 5

Another cause for this error: you are referencing a type that is defined further down. Move the type you are referencing up.

For example:

    type Launch {
        rocket: Rocket
    }

    type Rocket {
        name: String
    }

will throw an error, as Launch references Rocket before Rocket is defined.

The corrected code:

    type Rocket {
        name: String
    }

    type Launch {
        rocket: Rocket
    }

Answer 6

GraphQLError: Syntax Error: Expected Name, found "$".

One more example of a similar error (For other users).

theErrorIsHere (Could be extra ( or { before the $varName) added before $speakerId

Error code:

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

Correct code:

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

Answer 7

I was receiving a similar error server side:

GraphQLError: Syntax Error: Expected Name, found ]

I realized the cause in my case was a type definition with an empty array.

This breaks:

  type Settings {
    requires: []
  }

But this works:

  type Settings {
    requires: [String]
  }

Answer 8

I had this problem and the cause was a string value with double-quotes inside double-quotes, like so: "this "is" bad".

Answer 9

In my case I got the error because of the following:

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

When it should have been:

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

erroneously thought $authorId passed through identically to the function call instead of setting a property inside the function call.

Answer 10

On ny side the error was caused by extra {} Curly braces. Solved by just removing them.