A fake template literal tag to trick syntax highlighters, linters and formatters into action. Interpolations and escapes are tested.
To install with npm, run:
npm install fake-tag
A fake template literal tag that doesn’t do anything except return the tagged template string. Import and use the fake tag with the required name, e.g. gql
.
Parameter | Type | Description |
---|---|---|
literals |
Array | Template string literals. |
expressions |
…* | Template string expressions. |
Returns: string — The tagged template string.
How to import
.
import fakeTag from 'fake-tag';
How to require
.
const fakeTag = require('fake-tag');
Tagging a GraphQL SDL string with gql
.
import gql from 'fake-tag'; const typeDefs = gql` "A foo." type Foo { "The \`Foo\` ID." id: ID! } `;
A comment tag looks like this:
const QUERY = /* GraphQL */ `
{
foo
}
`;
They are far superior to a fake tag:
- No dependency to manage.
- No inconvenient imports.
- No bundle size bloat.
- No runtime overhead.
Unfortunately not all tools support them yet. prettier
has since v1.13.0, but eslint-plugin-graphql
at v3.1.0 still doesn’t.
This may be temptingly simple:
const gql = String.raw;
const QUERY = gql`
{
foo
}
`;
However, it doesn’t unescape characters. For the usage example, if you console.log(typeDefs)
before and after replacing the import with const gql = String.raw
you will see the difference in the type description markdown:
"A foo."
type Foo {
- "The `Foo` ID."
+ "The \`Foo\` ID."
id: ID!
}