babel-plugin-graphql-tag

    3.3.0 • Public • Published

    babel-plugin-graphql-tag

    GitSpo Mentions Travis build status NPM version Canonical Code Style Twitter Follow

    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 dependency 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';
    // if using apollo v3
    import { gql } from '@apollo/client';
    
    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
      }
    };

    NOTE: require() is also supported.

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

    Options

    • importSources - An array of names for modules to import (default = ["graphql-tag", "@apollo/client"])
    • onlyMatchImportSuffix - Matches the end of the import instead of the entire name. Useful for relative imports, e.g. ./utils/graphql (default = false)
    • strip - Strips insignificant characters such as whitespace from the original GraphQL string literal to reduce the size of compiled AST (default = false)
    • transform - By default, graphql query strings will be replaced with their AST representations, but you can override that behavior and do whatever you like. One possible use case would be to implement persisted queries:
    • gqlTagIdentifiers - An array of names for gql tag identifiers (default = ["gql"])
    // babel.config.js
    plugins: [
        [
            "babel-plugin-graphql-tag",
            {
                strip: true,
                transform: (source, ast) => {
                    const h = hash(source); // use your favorite hashing method
                    graphqlAstHashes[h] = ast; // write this to a file when compilation is complete
                    return {
                        queryId: h
                    };
                }
            }
        ]
    ]

    Known Issues

    Some cases are really hard to track down:

    const apolloClient = require('@apollo/client');
    // or
    import apolloClient from '@apollo/client';
    
    const { gql } = apolloClient;
    
    const foo = gql`...`;
    

    If you have this kind of syntax, this plugin won't work for you.

    Keywords

    none

    Install

    npm i babel-plugin-graphql-tag

    DownloadsWeekly Downloads

    113,965

    Version

    3.3.0

    License

    none

    Unpacked Size

    32.7 kB

    Total Files

    7

    Last publish

    Collaborators

    • gajus