GitHub - firede/ts-transform-graphql-tag: Compiles GraphQL tagged template strings using graphql-tag in TypeScript files. (original) (raw)

ts-transform-graphql-tag

npm Travis FOSSA Status license

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.

Warning:

Because I moved to @babel/preset-typescript from typescript, this package is no longer maintained.
However, if you are still using it, PR is welcome.

Motivation

Compiling GraphQL queries at the build time:

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

Implementation

Installation

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

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):

usually, this is a production dependency

npm i graphql

add this as a development-time dependency

npm i --save-dev graphql-tag

Usage

Integration with Webpack

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

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:

// 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:

// 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()] }) } } ] } // ... };

Integration with FuseBox

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

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

// 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() ] } })

Example

before

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

after

"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.

Thanks

MIT © Firede, built with ☕ & 💖