Compiles GraphQL tagged template strings using graphql-tag in TypeScript files.
npm install 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.
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.
* Searches for imports of graphql-tag and removes them.
* Searches for tagged template literals with gql identifier and compiles them using graphql-tag.
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):
`shusually, this is a production dependency
npm i graphql
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-loaderIn 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-loaderIn 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`.* babel-plugin-graphql-tag
* ts-transform-img
* typescript-plugin-styled-components
---
MIT © Firede, built with :coffee: & :sparkling_heart: