babel-plugin-transform-minify-gql-template-literals

1.1.1 verified Sat Apr 25 auth: no javascript maintenance

A Babel plugin that minifies gql template literals by removing whitespace, comments, and unnecessary characters from GraphQL queries defined inline with the gql tag. Compatible with Babel 6 and 7 (used in many projects still). Current stable version 1.1.1, no active development seen since 2019. Uses simple string manipulation (full name removal) rather than parsing with graphql-js, making it lightweight and fast. This approach avoids bundle size increases from AST pre-compilation while still reducing payload. Alternative to graphql-tag/loader for those who inline queries.

Common errors

error Error: Cannot find module 'babel-plugin-transform-minify-gql-template-literals' ↓

cause Package not installed or not in node_modules.

fix

Run npm install --save-dev babel-plugin-transform-minify-gql-template-literals or yarn add --dev babel-plugin-transform-minify-gql-template-literals

error ReferenceError: gql is not defined ↓

cause graphql-tag not imported but gql used in code.

fix

Add import gql from 'graphql-tag' at top of file.

error TypeError: this.data.metadata.plugins is not iterable ↓

cause Plugin inserted incorrectly in Babel config (e.g., as string without array).

fix

Use plugins: ['babel-plugin-transform-minify-gql-template-literals'] in config object.

Warnings

gotcha Plugin must be placed early in plugin chain before other Babel transforms that may strip template literals. ↓

fix Place plugin first in plugins array.

gotcha Only handles the gql tag name; custom tag names (e.g., graphql) are not minified. ↓

fix Use gql tag exactly, or fork plugin to support other tags.

gotcha Does not validate GraphQL syntax; malformed queries may produce invalid minified output. ↓

fix Ensure GraphQL queries are valid before minification.

gotcha No support for Babel 8+; may break with future Babel versions. ↓

fix Consider alternative plugins or contribute updates.

Install

npm install babel-plugin-transform-minify-gql-template-literals

yarn add babel-plugin-transform-minify-gql-template-literals

pnpm add babel-plugin-transform-minify-gql-template-literals

Imports

default

wrong

import plugin from 'babel-plugin-transform-minify-gql-template-literals'

correct

module.exports = require('babel-plugin-transform-minify-gql-template-literals')

CommonJS export; no default export for ESM. Use require() in Node.js or babel.config.js.

plugin

wrong

plugins: ['transform-minify-gql-template-literals']

correct

plugins: ['babel-plugin-transform-minify-gql-template-literals']

Babel plugin name must be the full package name in babel.config.js or .babelrc.

Quickstart

Shows configuration as Babel plugin and example of minification effect on a simple gql template literal.

// In babel.config.js
module.exports = {
  plugins: ['babel-plugin-transform-minify-gql-template-literals']
};

// Input: gql`
//   query {
//     foo
//   }
// `
// Output: gql`query{foo}`