skevy / babel-plugin-graphql-tag

Compiles GraphQL tagged template strings using graphql-tag.

babel-plugin-graphql-tag

Compiles GraphQL tagged template strings using graphql-tag.

Motivation

Compiling GraphQL queries at the build time:

• reduces the script initialization time; and
• removes the graphql-tag dependency

Removing the graphql-tag dependecy from the bundle saves approx. 50 KB.

Implementation

• Searches for imports of graphql-tag and removes them.
• Searches for tagged template literals with gql identifier and compiles them using graphql-tag.

Example compilation

Input:

import gql from 'graphql-tag';

const foo = gql`query {bar}`;

Output:

const foo = {
  "definitions": [
    {
      "directives": [
      ],
      "kind": "OperationDefinition",
      "operation": "query",
      "selectionSet": {
        "kind": "SelectionSet",
        "selections": [
          {
            "alias": null,
            "arguments": [
            ],
            "directives": [
            ],
            "kind": "Field",
            "name": {
              "kind": "Name",
              "value": "bar"
            },
            "selectionSet": null
          }
        ]
      },
      "variableDefinitions": [
      ]
    }
  ],
  "kind": "Document",
  "loc": {
    "end": 11,
    "start": 0
  }
};

Using fragments

Using GraphQL fragments requires to:

1. Define a fragment using graphql-tag.
2. Append the referenced fragment as a variable to the end of the GraphQL query.

Example:

import gql from 'graphql-tag';

const bar = gql`
  fragment barFragment on Foo {
    field1
    field2
  }
`;

const foo = gql`
  query foo {
    foo {
      ...barFragment
    }
  }

  ${bar}
`;