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?

It should work. Do you use graphql-tag version 2.6.x?

– Win

Jan 22, 2018 at 2:35 — Jan 22, 2018 at 2:35
@Win Yes, I am using graphql-tag version 2.6.1

– Nathan

Jan 22, 2018 at 16:08 — Jan 22, 2018 at 16:08

Razi Abdul RasheedRazi Abdul Rasheed 7596 silver badges6 bronze badges · Accepted Answer · 2018-04-02 12:33:09Z

60

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

answered Apr 2, 2018 at 12:33

Razi Abdul Rasheed

7596 silver badges6 bronze badges

Pang 9,565146 gold badges81 silver badges122 bronze badges · Accepted Answer · 2020-12-12 04:52:34Z

35

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

edited Dec 12, 2020 at 4:52

Pang

9,565146 gold badges81 silver badges122 bronze badges

answered Jul 17, 2018 at 20:34

Joseph Lin

3513 silver badges2 bronze badges

1

1

Thanks this was my issue as well. Was doing a mutation and could not figure out that it didn't need the exterior curlies.

– Zatara7

May 1, 2019 at 5:44

score 18 · Accepted Answer · 2021-09-16 13:39:56Z

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

Ezra SitonEzra Siton 6,9072 gold badges25 silver badges37 bronze badges · Accepted Answer · 2020-10-13 15:51:51Z

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

I had the "Expected Name, found $" too. What I had done wrong was something like: markfeatured($speaker_id: $speaker_id … So you can see I did a sloppy copy and paste meaning to get rid or the extra $ but I did not. — Jul 28, 2021 at 8:02

NathanNathan 1,9072 gold badges15 silver badges16 bronze badges · Accepted Answer · 2018-01-23 15:48:23Z

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

ginnaginna 1,7231 gold badge16 silver badges16 bronze badges · Accepted Answer · 2019-05-07 23:43:46Z

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
    }

justdvljustdvl 6984 silver badges15 bronze badges · Accepted Answer · 2022-04-01 05:34:26Z

3

In NestJS framework, this error happened to me because I defiled GraphQL field in my schema.graphql file as:

  lastUpdated(): Date

Instead it should be just

  lastUpdated: Date

(it doesn’t take any argument)

answered Apr 1, 2022 at 5:34

justdvl

6984 silver badges15 bronze badges

2

1

Thanks buddy. I'm not using NestJS but your suggestion works for me too.

– slackmart

May 18, 2022 at 13:46
1

It worked for my expressJs code as well. Thanks

– Sunil Kumar Singh

Jun 16 at 8:38

ShamxeedShamxeed 3824 silver badges8 bronze badges · Accepted Answer · 2021-11-02 21:48:58Z

In my case, I got the error simply because I’m adding : which I shouldn’t have done.

e.g:

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

If you pay close attention to line 4 of the code above you’ll realize that I added : after the user before the curly brace, then I began to list the user’s data I wanna query and THAT WAS EXACTLY WHERE THE ERROR WAS!
Removing the : solve the issue!

It should be:

user {
   id
   name
   ...
}

Tigran PetrosyanTigran Petrosyan 5244 silver badges14 bronze badges · Accepted Answer · 2022-11-23 08:58:21Z

2

This can happen if you use gql from @clinet/apollo and in the backticks you try to inject dynamic js value. Remove it and replace with normal scalar and it will fix your issue.
example:

${SOME_MAX_VALUE} -> 20

answered Nov 23, 2022 at 8:58

Tigran Petrosyan

5244 silver badges14 bronze badges

JiertJiert 5651 gold badge5 silver badges11 bronze badges · Accepted Answer · 2020-06-11 20:04:12Z

1

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]
  }

answered Jun 11, 2020 at 20:04

Jiert

5651 gold badge5 silver badges11 bronze badges

SlothFriendSlothFriend 6011 gold badge7 silver badges14 bronze badges · Accepted Answer · 2021-03-25 22:15:46Z

1

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

answered Mar 25, 2021 at 22:15

SlothFriend

6011 gold badge7 silver badges14 bronze badges

Wild BillWild Bill 511 silver badge3 bronze badges · Accepted Answer · 2021-06-20 06:52:31Z

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.

Gesy DaratiGesy Darati 1131 silver badge6 bronze badges · Accepted Answer · 2021-06-02 02:35:21Z

0

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

answered Jun 2, 2021 at 2:35

Gesy Darati

1131 silver badge6 bronze badges

Md RoknuzzamanMd Roknuzzaman 11 bronze badge · Accepted Answer · 2022-06-03 08:49:28Z

0

I was getting the same error. In my case putting the id inside double quote solved the issue as the type of id required string value.

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

answered Jun 3, 2022 at 8:49

Md Roknuzzaman

11 bronze badge

Zack BiernatZack Biernat 536 bronze badges · Accepted Answer · 2022-11-02 16:05:20Z

0

Posting here in case anyone else had this problem but you also get this error if you accidentally make your query look like json with colons (:).

ex:

data {
  property {
    key: {
      deepKey
    }
  }
}

will give the same error from GQL compile

answered Nov 2, 2022 at 16:05

Zack Biernat

536 bronze badges

devjs1000devjs1000 1 · Accepted Answer · 2023-09-06 13:49:53Z

0

I was having the same issue i just resolved it by delete yarn.lock or package-lock.json and then re-installing node_modules
I was using apollo graphql/client it is used for accessing apollo GQL apis.
Worked for me not sure about you.

Just give it a try.

answered 1 hour ago

devjs1000

1

New contributor

GraphQL gql Syntax Error: Expected Name, found }