Graphql-tag: Syntax Error: Expected Name, found $

[timbergus]

I have the following code:

import gql from 'graphql-tag';

export const USER_QUERY = gql `{
    query User($id: ID!) {
        getUser(id: id) {
            name
            surname
        }
    }
}`;

Here is the connection point:

export default graphql(USER_QUERY, {
    name: 'User',
    options: ({ id }) => ({
        variables: { id }
    }),
})(User);

And the error in the title.

I am not sure if this error goes here, but I have been searching the web for this problem, and I cannot find anything. All the answers say that my code is OK, but I cannot make it work. Could you please halp me? Thanks.

[jnwng]

Apologies for brevity, I’m on my phone.

When using variables for arguments in GraphQL they must be prefixed with an
“$”. In this case, the variable you’re passing to the getUser field (“id”)
should reference the $id variable declared at the query level.

getUser(id: $id)
On Thu, May 3, 2018 at 8:46 AM Gustavo Muñoz [e-mail]
wrote:

I have the following code:

import gql from 'graphql-tag';
export const USER_QUERY = gql { query User($id: ID!) { getUser(id: id) { name surname } }};

Here is the connection point:

export default graphql(USER_QUERY, {
name: 'User',
options: ({ id }) => ({
variables: { id }
}),
})(User);

And the error in the title.

I am not sure if this error goes here, but I have been searching the web
for this problem, and I cannot find anything. All the answers say that my
code is OK, but I cannot make it work. Could you please halp me? Thanks.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/apollographql/graphql-tag/issues/180, or mute the
thread
https://github.com/notifications/unsubscribe-auth/ABERRjMD3g-QQXKjAeGW0-hK1dWE6Uqbks5tuyZEgaJpZM4TxVVV
.

[jnwng]

http://graphql.org/learn/queries/#variables for reference, particularly
replacing variables in the static query
On Thu, May 3, 2018 at 8:48 AM Jon Wong [e-mail] wrote:

Apologies for brevity, I’m on my phone.

When using variables for arguments in GraphQL they must be prefixed with
an “$”. In this case, the variable you’re passing to the getUser field
(“id”) should reference the $id variable declared at the query level.

getUser(id: $id)
On Thu, May 3, 2018 at 8:46 AM Gustavo Muñoz [e-mail]
wrote:

I have the following code:

import gql from 'graphql-tag';
export const USER_QUERY = gql { query User($id: ID!) { getUser(id: id) { name surname } }};

Here is the connection point:

export default graphql(USER_QUERY, {
name: 'User',
options: ({ id }) => ({
variables: { id }
}),
})(User);

And the error in the title.

I am not sure if this error goes here, but I have been searching the web
for this problem, and I cannot find anything. All the answers say that my
code is OK, but I cannot make it work. Could you please halp me? Thanks.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/apollographql/graphql-tag/issues/180, or mute the
thread
https://github.com/notifications/unsubscribe-auth/ABERRjMD3g-QQXKjAeGW0-hK1dWE6Uqbks5tuyZEgaJpZM4TxVVV
.

[timbergus]

I’m pretty sorry about that. That is a typo. I get the same error with the right code. I have tested it using GraphiQL and it worked. The error is in the first line query User($id: ID!). If I remove the $, it throws the same error in the !, and if I remove the !, it works, but the app fails because there is no getUser result in the props. However, I will double check this as soon as I get a computer.

[timbergus]

Doublechecked. With this code still failing:

import gql from 'graphql-tag';

export const USER_QUERY = gql `{
    query User($id: ID!) {
        getUser(id: $id) {
            name
            surname
        }
    }
}`;

The browser shows me this query in the error, and the same error as before:

body: "{↵    query User($id: ID!) {↵        getUser(id: $id) {↵            name↵            surname↵        }↵    }↵}"

Seems to be OK. Could be graphqlthe one having the problem using it?

[detrohutt]

@timbergus Make sure you are using the same type for id in your backend schema typedefs. It seems like maybe you have it defined as type ID in one place and ID! in the other?

[timbergus]

OK. I got it. The problem is that I'm passing extra curly braces. I have test this code, and it works perfectly:

import gql from 'graphql-tag';

export const USER_QUERY = gql `query User($id: ID!) {
    getUser(id: $id) {
        name
        surname
    }
}`;

I have discovered it using the importer of webpack and a code highligther for GraphQL. When creating the .graphql files, the sintax was highligted different with the curly braces and without them, so I tried.

The library is perfect. Thank you very much for your work, and sorry for the inconveniences.

Regards.

[vinayvatsa007]

i also made the same mistake, it helped Thanks for sharing.

[Tsudhishnair]

I also made the same sort of mistake thanks for helping.

[MrSunshyne]

@detrohutt I'm using gql statements with template literals as such :

return gql` query {
      ${entityTypes} {
        id
      }
    }`;

I get the error "Expected Name.... "

Any suggestions on how to deal with the above?

Thanks !

[detrohutt]

@MrSunshyne it looks like you're trying to use string interpolation syntax ${} in your query. I don't believe that is supported by the gql template function. You'll probably need to hard-code your field name. Hope that helps, good luck!

[MrSunshyne]

@detrohutt That's correct. I'm using native javascript string interpolation.
I'm not sure what you mean by "it's not supported", as it definitely works.

I'm having issues with the syntax highlighting.

You'll probably need to hard-code your field name
That's not an option because my application only knows the name of the mutation at runtime.

Here's another working example :

The above would translate to article_delete in this case, which works fine. I can also have author_delete or whatever_delete.
I have no idea if gql statements was built to be used this way, but so far this is the only way I found to create my queries at runtime. Apologies if there's something I missed. This is my first graphql project.

Any other hints? Much appreciated

[JulesMike]

it looks like you're trying to use string interpolation syntax ${} in your query

I do confirm that using interpolation syntax ${} in a query works just fine but the syntax highlighting is all over the place like @MrSunshyne showed and described.

@detrohutt is that an unintended feature?

[digeomel]

Same here. String interpolation in GraphQL queries seems to cause this error. Any updates?