fake-tag

A fake template literal tag to trick syntax highlighters, linters and formatters into action. Interpolations and escapes are tested.

Setup

To install with npm, run:

npm install fake-tag

API

function fakeTag

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.

Returns: string — The tagged template string.

Examples

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

FAQ

Why not comment tags?

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.

Why not String.raw?

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