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 } } `;
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:
; const query = gql` query { hello { world } }`;