Nauseating Packaged Meat

    @quramy/ts-transform-graphql-tag
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.2 • Public • Published

    ts-transform-graphql-tag

    license

    This repo is forked to attach sha256 hash of the transforming GraphQL Query to the output AST.


    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:

    npm i --save-dev @quramy/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('@quramy/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('@quramy/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 "@quramy/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 gql`query Hello {hello}`

    after

    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.default = { "__signature__": "04559d249676e347b115eda728635d5856f6560300659ae81adbcd2242b41d09", "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

    Thanks

    Install

    npm i @quramy/ts-transform-graphql-tag

    DownloadsWeekly Downloads

    2

    Version

    0.3.2

    License

    MIT

    Unpacked Size

    162 kB

    Total Files

    13

    Last publish

    Collaborators

    • quramy