CODEWITHSUNDEEP
graphqlgatsbystrapi
Seth Snr
Seth Snr

Reputation: 11

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

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.

Upvotes: 0

Views: 453

Answers (1)

Ferran Buireu
Ferran Buireu

Reputation: 29320

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

Upvotes: 1

Related Questions