Registry / devops / babel-plugin-transform-compress-graphql

babel-plugin-transform-compress-graphql

library1.3.3jsnpmunverified

A Babel plugin (v1.3.3, latest stable) that removes unnecessary whitespace from GraphQL queries embedded in template literals during build. It compresses queries tagged with a configurable tag (default `gql`) or marked with a block comment like `/* GraphQL */`. The plugin uses `graphql-query-compress` under the hood and integrates seamlessly with Babel's env configuration to apply only in production. Unlike manual minification, it automates compression as part of the transpilation pipeline, supporting both tag and comment-based detection.

devops testing

npm install babel-plugin-transform-compress-graphql

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-TRANS

babel-plugin-transform-compress-graphql

devopsjavascriptv1.3.3

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

plugin

✓ // .babelrc { "plugins": ["transform-compress-graphql"] }

✗ // Incorrect: using require directly in code is not intended const plugin = require('babel-plugin-transform-compress-graphql');

This is a Babel plugin, not a runtime import. It must be configured in .babelrc, babel.config.js, or CLI --plugins option.

tagName

✓ // .babelrc { "plugins": [["transform-compress-graphql", { "tagName": "gql" }]] }

✗ // Wrong: missing array wrapping { "plugins": ["transform-compress-graphql", { "tagName": "gql" }] }

Options must be passed as second element of an array per plugin entry.

Shows configuration in .babelrc for production-only compression and a typical input/output example using the gql tag.

// .babelrc { "env": { "production": { "plugins": ["transform-compress-graphql"] } } } // source.js const query = gql` people(uuid:"${uuid}") { uuid, fullName } `; // After Babel production build, the template literal is compressed: // const query = `people(uuid:"${uuid}"){uuid,fullName}`;

Debug

Known issues

breakingSince v1.3.0, comment-based detection (e.g., /* GraphQL */) works only with template literals, not normal strings.

fix

Ensure tagged literals are template literals (backticks) or use the gql tag.

affects: >=1.3.0

deprecatedThe option `tagFunction` appears unused; documentation mentions it but it may not work as expected.

fix

Avoid using `tagFunction` unless confirmed; default empty string removes the tag.

affects: all

gotchaPlugin does not compress GraphQL queries inside normal strings (string literals like '...' or "...") — only template literals.

fix

Always use template literals with backticks for GraphQL queries.

affects: all

gotchaIf `removeComments` is set to false, the block comment (e.g., /* GraphQL */) remains in the output, potentially leaking metadata.

fix

Set `removeComments: true` (default) to strip comments from output.

affects: >=1.3.0

Errors

Common errors & fixes

Error: Cannot find module 'graphql-query-compress'

Missing peer dependency graphql-query-compress.

fix

Run: npm install --save-dev graphql-query-compress

ReferenceError: gql is not defined

Using the gql tag without importing or defining it.

fix

Define a dummy tag: const gql = (strings) => strings.raw[0]; or import from a library like graphql-tag.

Plugin transform-compress-graphql is invalid: ... options must be an array

Passing options incorrectly as separate array elements instead of a nested array.

fix

Wrap options in an extra array: ["transform-compress-graphql", { ... }] inside the plugins array.

Upgrade

Version history

1.3.3latest on npm

Audit

Dependencies

graphql-query-compressrequiredCore compression logic for GraphQL query strings.

Agent activity

25 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

githubhttps://github.com/frontendr/babel-plugin-transform-compress-graphql ↗

packagebabel-plugin-transform-compress-graphql ↗

homepagehttps://github.com/frontendr/babel-plugin-transform-compress-graphql#readme ↗