19

Consider:

const GET_DOGS = gql`
  {
    dogs {
      id
      breed
    }
  }
`;

I found this new syntax from here.

What is the explanation for this syntax? Where can I find detail about it?

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Nicolas S.Xu
  • 13,794
  • 31
  • 84
  • 129

2 Answers2

22

It's called a tagged template. Template literals (`...`) can be prefixed with a function name. Upon evaluation, this function will be called and the static and dynamic parts of the template literal are passed to the function. Example:

function foo(staticParts, dynamicParts) {
  console.log(staticParts, dynamicParts);
}

foo`this is a ${42} test`

Tagged templates can be used to create domain specific languages, such as in this example.

There are many questions around tagged templates you can learn more from.

Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
2

It's called a template literal.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Not only does it allow you to do multi-line formatting like your example above, but it also makes it easier to mix expressions in with string content.

isherwood
  • 58,414
  • 16
  • 114
  • 157
kshetline
  • 12,547
  • 4
  • 37
  • 73