babel-plugin-graphql-query-minifier

This plugin is to minify your graphql query string when transform JavaScript/TypeScript file by babel.

Install

npm install -D babel-plugin-graphql-query-minifier

Quick Start

This plugin can help you minify your graphql string when babel transform your JavaScript/TypeScript files. By minify the query string, you can get a more mini size of result bundle files.

This plugin can minify query string by certain comment or tag function name, default is graphql comment and gql tag function, you can change it by option config (see below section).

For example below is some query string:

const queryByComment = /* graphql */`
    query GetUser {
        name,
        age,
        id
    }
`;
const queryByTagFunction = gql`
    mutation ChangeSomeThing (uuid: ${uuid}) {
        result,
        log,
    }
`;

By this plugin, you can get :

const queryByComment = /* graphql */`query GetUser{name,age,id}`;
const queryByTagFunction = gql`mutation ChangeSomeThing($uuid:String=${uuid}){result,log}`;

Usage

You can use babel config to start this plugin. By using babelrc :

{
    "plugins": [
        [
            "babel-plugin-graphql-query-minifier",
            {
                "comment": "graphql",
                "function": "gql",
            }
        ]
    ]
}

Option Config

This plugin provide you can customize the comment name and tag function name to minify graphql query string, you can pass config by babel config or using CLI or API. The following options are available:

• comment : String, comment values in front of graphql query string.
• function : String, tag function name take query string as arguments.

Compare with grahpql-compress

This plugin can minify more charater than graphql-compress related plugin, and it's core is running by wasm, so it is faster than use graphql-compress.

For example, babel-plugin-transform-compress-graphql would still leave some space after argument type and the fragment spread.

const query = /* graphql */ `
    query QueryWithArgument(name: String = "test-name") {
        ... SomeFragment
        ... on SomeData {
            field
        }
    }
`;
// result of using `babel-plugin-transform-compress-graphql`
const queryResult1 = `query QueryWithArgument($name:String = "test-name"){... SomeFragment ... on SomeData{field}}`;
// result of using `babel-plugin-graphql-query-minifier`
const queryResult2 = `query QueryWithArgument($name:String="test-name"){...SomeFragment...on SomeData{field}}`;

And it's speed is also faster then using graphql-compress's related plugin, by using tinybench package, result shows that babel-plugin-graphql-query-minifier is 3 time faster then babel-plugin-transform-compress-graphql, you can see this result by running yarn bench at this repo.