Nationwide Polamorous Matrimony
    Have ideas to improve npm?Join in the discussion! »

    babel-plugin-transform-compress-graphql

    1.3.3 • Public • Published

    babel-plugin-transform-compress-graphql

    Removes unnecessary white space from GraphQL queries using graphql-query-compress.

    npm version npm downloads Build Status Coverage Status

    Dependencies DevDependencies

    Installation

    npm install --save-dev babel-plugin-transform-compress-graphql

    The problem solved

    Compress GraphQL queries by simply adding a /* GraphQL */ comment or tagging them with the gql template tag. The tag name or comment text can be customized with an option.

    Example

    Using the template tag

    In

    const query = gql`
      people(uuid:"${uuid}") {
        uuid,
        fullName,
        dateOfBirth,
        nextBirthday,
        age,
        relations {
          description,
          type,
          person {
            uuid,
            fullName
          }
        }
        events {
          uuid,
          name,
          description,
          startDate, startTime,
          endDate, endTime
        }
      }`;

    Which is pretty big literal right?

    Out

    const query = `people(uuid:"${uuid}"){uuid,fullName,dateOfBirth,nextBirthday,age,relations{description,type,person{uuid,fullName}}events{uuid,name,description,startDate,startTime,endDate,endTime}}`;

    Which saves quite some white space which has no use in production builds.

    Using a comment

    Since 1.3.0 it's possible to use a comment to mark a template literals as a GraphQL query.

    const query = /* GraphQL */ `
      people {
        fullName,
        age
      }
    `;

    The value of the comment can be changed using the comment option. The comment is being matched in a case-insensitive manner so /* graphql */ is also fine.

    Important: The comment only works with template literals. Normal strings will not be compressed.

    Usage

    Via .babelrc / babel.config.js (Recommended)

    .babelrc

    {
      "env": {
        "production": {
          "plugins": ["transform-compress-graphql"]
        }
      }
    }

    Via CLI

    babel --plugins transform-compress-graphql script.js

    Via Node API

    require("@babel/core").transform("code", {
      plugins: ["transform-compress-graphql"],
    });

    Plugin options

    Options can be passed by wrapping the plugin name in an array and adding an object literal as the second item in that array.

    For example in your .babelrc:

    {
      "env": {
        "production": {
          "plugins": [
            [
              "transform-compress-graphql",
              {
                "tagName": "gql",
                "tagFunction": "",
                "comment": "graphql",
                "removeComments": true
              }
            ]
          ]
        }
      }
    }

    The following options are available:

    • tagName - String with the name of the tag to search for. Defaults to "gql".
    • tagFunction - String with the name of the tag to replace the tag with. Defaults to: "" which means the tag will be removed from the output.
    • removeComments - Boolean when set to false will leave any matched comments in place. Defaults to true.
    • comment - String with the case-insensitive text matched in any leading comments for a template literal. The entire string will be expected. Defaults to "graphql".

    What about existing variables named gql?

    For template literals with a tag named gql (or with the same name as the tagName option) the scope will be checked for an existing binding of that variable and will not be replaced with tagFunction if it exists.

    Compression

    GraphQL literals will be compressed with graphql-query-compress. Any issues related to the compressed query result should be posted as an issue in the issue tracker of that package.

    License

    MIT

    Install

    npm i babel-plugin-transform-compress-graphql

    DownloadsWeekly Downloads

    509

    Version

    1.3.3

    License

    MIT

    Unpacked Size

    12.1 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar