graphql-tag.macro

graphql-tag.macro

Babel Macro for the graphql-tag library.

What it does

It inlines the result of parsing the GraphQL queries with graphql-tag.

Converts this:

const query = gql`
  query {
    hello {
      world
    }
  }
`;

To this:

const query = {
  'kind': 'Document',
  'definitions': [{
    'kind': 'OperationDefinition',
    'operation': 'query',
    'variableDefinitions': [],
    'directives': [],
    'selectionSet': {
      'kind': 'SelectionSet',
      'selections': [{
        'kind': 'Field',
        'alias': null,
        'name': {
          'kind': 'Name',
          'value': 'hello'
        },
        'arguments': [],
        'directives': [],
        'selectionSet': {
          'kind': 'SelectionSet',
          'selections': [{
            'kind': 'Field',
            'alias': null,
            'name': {
              'kind': 'Name',
              'value': 'world'
            },
            'arguments': [],
            'directives': [],
            'selectionSet': null
          }]
        }
      }]
    }
  }],
  'loc': {
    'start': 0,
    'end': 45,
    'source': {
      'body': '\\\\n  query {\\\\n    hello {\\\\n      world\\\\n    }\\\\n  }\\\\n',
      'name': 'GraphQL request',
      'locationOffset': {
        'line': 1,
        'column': 1
      }
    }
  }
};

It also supports adding interpolated fragments:

const frag = gql`
  fragment Frag on Hello {
    world
  }
`;

const query = gql`
  query {
    hello {
      universe
      ...Frag
    }
  }

  ${frag}
`;

Why

To avoid the runtime overhead of parsing a string into a GraphQL AST.

Installation and setup

Install and configure babel-macros if you haven't already.

Then install this package:

# with yarn
yarn add -D graphql-tag.macro

# with npm
npm install -D graphql-tag.macro

Usage

The usage is the same as using graphql-tag directly, the only difference is that you have to import gql from the macro now:

import gql from 'graphql-tag.macro';

const query = gql`
  query {
    hello {
      world
    }
  }
`;