swc-plugin-minify-graphql

GraphQL query and schema minimizer plugin for SWC

Compatibility

Since WASM plugins are not fully backward compatible (see swc-project/swc#5060, Selecting the version - SWC), use the table below to select the correct plugin version:

| plugin version | used swc_core version | potentially compatible swc_core versions* | | -------------: | ----------------------: | :------------------------------------------- | | 0.5 | 55.0.2 | >=47 | | 0.4 | 46.0.3 | >=46 <47 | | 0.3 | 43.0.1 | >=40 <46 | | 0.2 | 10.6.1 | >=10 | | 0.1 | 1.0.2 | >=0.98.0 <10 |

* since this plugin uses a very small part of the API, the compatible version ranges are sometimes larger

[!NOTE] Version 0.5 and later use swc_ast_unknown, which should improve plugin compatibility (see this SWC's blog post and PR swc-project/swc#11100 for more info)

Usage

Install the package:

npm i swc-plugin-minify-graphql

and add it to your SWC config.

Basic

The plugin handles string literals and template literals marked with the GraphQL comment

const QUERY = /* GraphQL */ `
	query ($id: ID!) {
		image (id: $id) {
			...img
		}
	}

	fragment img on Image {
		id
		url
	}
`;

minifying them:

const QUERY = /* GraphQL */ `query($id:ID!){image(id:$id){...img}}fragment img on Image{id url}`;

Minification is supported not only for entire queries and schemas, but also for their individual parts (e.g., fragments):

const IMAGE_FIELDS = /* GraphQL */ `
	id
	url
`;
const IMAGE_FRAGMENT = /* GraphQL */ `
	fragment image on Image {
		id
		url
	}
`;

// becomes

const IMAGE_FIELDS = /* GraphQL */ `id url`;
const IMAGE_FRAGMENT = /* GraphQL */ `fragment image on Image{id url}`;

GraphQL comments are case-insensitive and can have any number of whitespace characters and asterisks at the beginning and end. /* graphql */, /* GraphQL */, /** GraphQL */ and even /* *** * gRaPhQl * *** */ will work.

Template literals with expressions

Expressions within template literals are also supported:

const IMAGE = /* GraphQL */ `
	id
	url
`;

const ENTITY = /* GraphQL */ `
	id
	image {
		${IMAGE}
		previewUrl
	}
`;

// becomes

const IMAGE = /* GraphQL */ `id url`;

const ENTITY = /* GraphQL */ `id image{${IMAGE} previewUrl}`;

But with a single exception: expressions cannot break GraphQL tokens. The following code is invalid:

const LONG = 'Long';

const FIELD = /* GraphQL */ `
	id
	some${LONG}FieldName
`;

// becomes

const FIELD = /* GraphQL */ `id some ${LONG} FieldName`;

// instead of

const FIELD = /* GraphQL */ `id some${LONG}FieldName`;

const FORMAT = 'long';

const IMAGE = /* GraphQL */ `
	id
	url (format: "${FORMAT}")
`;

// will throw error like this:

//   × failed to minify GraphQL
//    ╭─[input.js:4:1]
//  3 │
//  4 │ ╭─▶         const IMAGE = /* GraphQL */ `
//  5 │ │               id
//  6 │ ╰─▶             url (format: "${FORMAT}")
//    · ╰───                         ┬
//    · ╰───                         ╰── unknown token at 112
//  7 │             `;
//    ╰────

While the minified code may be correct in some cases, this usage is not intended and can be broken at any time.

gql tag support

gql/graphql tagged template literals are not currently supported, and there are no plans to add support. You can use other plugins like graphql-tag-swc-plugin that support minification.

Credits

• graphql-minify: a re-implementation of stripIgnoredCharacters from the GraphQL.js reference implementation in Rust

License

Licensed under either of

• The Unlicense (UNLICENSE or https://unlicense.org/UNLICENSE)
• MIT license (LICENSE-MIT or http://opensource.org/licenses/MIT)

at your option.

1. on Codeberg - hikiko4ern/swc-plugin-minify-graphql (with releases)
2. on Radicle - rad:z3Bv8pFGLdQ8jhW6dwq2x96tzvpiC (code only)