Syntax Error: Expected Name, found String "" gatsby and graphql

Question

I am getting the following error on a graphql query in a gatsby website where I am fetching data from the Strapi CMS.

Syntax Error: Expected Name, found String "" gatsby

Here is the code:

export const Query = graphql`
 {
   source {
     people(where: {isSupport: true}) {
       name
       photo {
         url
       }
       surname
       isSupport
     }
  }
`

With the above query, I am trying to fetch people that are part of the support team but I get this error Syntax Error: Expected Name, found String "isSupport"

The above code works fine on the Graphql explorer. I then thought because the query is in a template string I should change my code as follows.

export const Query = graphql`
 {
   source {
     people(where: {${isSupport}: true}) {
       name
       photo {
         url
       }
       surname
       isSupport
     }
  }
`

With the above code, I still could not get the desired results.

Looking closer into the graphql explorer I noticed that the where filter takes a JSON object so I converted my code as follows:

export const Query = graphql`
 {
   source {
     people(where: {"isSupport": true}) {
       name
       photo {
         url
       }
       surname
       isSupport
     }
  }
`

With the above code, I still could not get the desired results.

https://stackoverflow.com/a/64698051/6124657 – xadm Nov 05 '20 at 13:24 — xadm, Nov 05 '20 at 13:24

Ferran Buireu · Answer 1 · 2020-11-05T12:48:02.377

Have you tried something like:

export const Query = graphql`
 query ($isSupport: Boolean){
   source {
     people(where: {$isSupport: true}) {
       name
       photo {
         url
       }
       surname
       isSupport
     }
  }
`

You are not defining the variable type in the query constructor ($isSupport: String).

In addition, I'm not familiar with where filter. The following should work too:

export const Query = graphql`
 query ($isSupport: Boolean){
   source (people: {isSupport: {eq: $isSupport}}) {
     people {
       name
       photo {
         url
       }
       surname
       isSupport
     }
  }
`

The snippets above will filter all sources that have people.isSupport property equal to the value passed via context.

If you are not passing any value from context, check the value directly:

export const Query = graphql`
 {
   source (people: {isSupport: {eq: true}}) {
     people {
       name
       photo {
         url
       }
       surname
       isSupport
     }
  }
`

Or applying where filter:

export const Query = graphql`
 {
   source {
     people(where: {isSupport: true}) {
       name
       photo {
         url
       }
       surname
       isSupport
     }
  }
`

simplest: pass filter/where value `where: {isSupport: true}` to $where — xadm, Nov 05 '20 at 12:52
... only the last will work :D other args changes doesnt change results 1st: variable for prop name not allowed; 2nd $isSupport should be boolean; 3rd $isSupport arg not used; 4th original question :D — xadm, Nov 05 '20 at 12:58
`query ($where: SomeWhereInputType){ source { people(where: $where) {` and variables: `{ where: {isSupport: true} }` — xadm, Nov 05 '20 at 13:01

Syntax Error: Expected Name, found String "" gatsby and graphql

1 Answers1