Package Exports

babel-plugin-graphql-tag

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (babel-plugin-graphql-tag) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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:

Define a fragment using graphql-tag.
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}
`;