Using graphql-tag in my query causes a 500 error

[lukehmu]

Hello,

I wanted some syntax highlighting in my queries in VS Code, so I installed graphql-tag and an appropriate plugin.

I think this means I can use the following syntax:

const beerQuery = gql`
         {
           entries(limit:5) {
             ...on Beer {
               id
               uri
               title
               description
               dateCreated
               percentage
               image { url }
             }
           }
         }
        `

This makes for a prettier query:

Instead of:

However, I get a 500 error back:

[error][GraphQL\Error\InvariantViolation] GraphQL\Error\InvariantViolation: GraphQL query body is expected to be string, but got array

This is almost definitely related to my lack of understanding of how GraphQL works - but Google has not helped me - any help appreciated.

Cheers,
Luke

[lukehmu]

Quick edit, after a little more reading, it seems that using gql transforms my query into something different - so nevermind!

Out of interest, what do you use for highlighting your template literals/queries?

[ParallelUniv3rse]

I've overcome the same issue by just defining a function which keeps the ES6 string templating functionality and does nothing.

export function gql(strings, ...keys) {
  /* noop, keeps the tring the same */
  const lastIndex = strings.length - 1;
  const res = strings.slice(0, lastIndex).reduce((p, s, i) => p + s + keys[i], '') + strings[lastIndex];
  /* -- end -- noop, keeps the tring the same */
  return res.replace(`\n`, ` `);
}

Then use the same way as gql - import in your file and prefix the string.