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