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


    1.3.3 • Public • Published


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

    npm version npm downloads Build Status Coverage Status

    Dependencies DevDependencies


    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.


    Using the template tag


    const query = gql`
      people(uuid:"${uuid}") {
        relations {
          person {
        events {
          startDate, startTime,
          endDate, endTime

    Which is pretty big literal right?


    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 {

    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.


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


      "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": [
                "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.


    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.




    npm i babel-plugin-transform-compress-graphql

    DownloadsWeekly Downloads






    Unpacked Size

    12.1 kB

    Total Files


    Last publish


    • avatar