ts-transform-graphql-tag


Compiles GraphQL tagged template strings using graphql-tag in TypeScript files.

The plugin was mostly inspired by great Babel's plugin babel-plugin-graphql-tag.

Motivation

Compiling GraphQL queries at the build time:

* reduces the script initialization time; and
* removes the graphql-tag dependency

Removing the graphql-tag dependecy from the bundle saves approx. 50 KB.

Implementation

* Searches for imports of graphql-tag and removes them.
* Searches for tagged template literals with gql identifier and compiles them using graphql-tag.

Installation

The following command adds the packages to the project as a development-time dependency:

``sh
npm i --save-dev ts-transform-graphql-tag
`

This also depends on graphql and graphql-tag so you'll need those in your project as well (if you don't already have them):

`sh


usually, this is a production dependency

npm i graphql

add this as a development-time dependency

npm i --save-dev graphql-tag
`

Usage

$3

If you using Webpack, there are two popular TypeScript loaders that support specifying custom transformers:

* awesome-typescript-loader, supports custom transformers since v3.1.3
* ts-loader, supports custom transformers since v2.2.0

Both loaders use the same setting getCustomTransformers which is an optional function that returns { before?: Transformer[], after?: Transformer[] }.
In order to inject the transformer into compilation, add it to before transformers array, like: { before: [getTransformer()] }.

#### awesome-typescript-loader

In the webpack.config.js file in the section where awesome-typescript-loader is configured as a loader:

`js
// 1. import getTransformer from the module
var getTransformer = require('ts-transform-graphql-tag').getTransformer

// 2. create a transformer and add getCustomTransformer method to the loader config
var config = {
/// ...
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'awesome-typescript-loader',
options: {
// ... other loader's options
getCustomTransformers: () => ({ before: [getTransformer()] })
}
}
]
}
/// ...
}
`

#### ts-loader

In the webpack.config.js file in the section where ts-loader is configured as a loader:

`js
// 1. import getTransformer from the module
var getTransformer = require('ts-transform-graphql-tag').getTransformer

// 2. create a transformer and add getCustomTransformer method to the loader config
var config = {
// ...
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
options: {
// ... other loader's options
getCustomTransformers: () => ({ before: [getTransformer()] })
}
}
]
}
// ...
};
`

$3

FuseBox is a blazing fast (TypeScipt first) bundler/module loader.

In the fuse.ts file, you can configured like this:

`ts
// 1. import getTransformer from the module
import { getTransformer } from "ts-transform-graphql-tag"

// 2. create a transformer and add it to the transformers.before config
const fuse = FuseBox.init({
// ... other init options
transformers: {
before: [
getTransformer()
]
}
})
`

_More information about using TypeScript custom transformer in FuseBox._

Example

before

`ts
// with transformer
import gql from "graphql-tag"
export default gqlquery Hello {hello}
`

after

`js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = { "kind": "Document", "definitions": [{ "kind": "OperationDefinition", "operation": "query", "name": { "kind": "Name", "value": "Hello" }, "variableDefinitions": [], "directives": [], "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "alias": undefined, "name": { "kind": "Name", "value": "hello" }, "arguments": [], "directives": [], "selectionSet": undefined }] } }], "loc": { "start": 0, "end": 19, "source": { "body": "query Hello {hello}", "name": "GraphQL request", "locationOffset": { "line": 1, "column": 1 } } } };
`

Need more example? run npm test and checkout test/fixture/actual/*.js`.

Related

* graphql-tag

Thanks

* babel-plugin-graphql-tag
* ts-transform-img
* typescript-plugin-styled-components

---

MIT © Firede, built with :coffee: & :sparkling_heart: