{"id":49553,"library":"ts-transform-graphql-tag","title":"ts-transform-graphql-tag","description":"A TypeScript custom transformer that compiles GraphQL tagged template strings (gql) at build time using graphql-tag. Version 0.2.1 is the latest stable release; no frequent updates. Key differentiators: reduces bundle size by removing graphql-tag dependency (~50 KB), speeds up runtime initialization, and works with Webpack (awesome-typescript-loader, ts-loader) and FuseBox. It removes imports of graphql-tag and replaces gql`...` with compiled AST objects. Only supports TypeScript; alternatives include babel-plugin-graphql-tag for Babel users.","status":"active","version":"0.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/firede/ts-transform-graphql-tag","tags":["javascript","typescript","transform","graphql-tag","graphql"],"install":[{"cmd":"npm install ts-transform-graphql-tag","lang":"bash","label":"npm"},{"cmd":"yarn add ts-transform-graphql-tag","lang":"bash","label":"yarn"},{"cmd":"pnpm add ts-transform-graphql-tag","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency; provides GraphQL types and runtime for compiled queries","package":"graphql","optional":false},{"reason":"peer dependency (dev); used to parse GraphQL ASTs at build time","package":"graphql-tag","optional":true}],"imports":[{"note":"CommonJS require works as well, but prefer ESM for consistency with TypeScript codebases.","wrong":"const getTransformer = require('ts-transform-graphql-tag')","symbol":"getTransformer","correct":"import { getTransformer } from 'ts-transform-graphql-tag'"}],"quickstart":{"code":"// webpack.config.js (with ts-loader)\nconst getTransformer = require('ts-transform-graphql-tag').getTransformer;\n\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      {\n        test: /\\.tsx?$/,\n        loader: 'ts-loader',\n        options: {\n          getCustomTransformers: () => ({ before: [getTransformer()] })\n        }\n      }\n    ]\n  }\n};","lang":"javascript","description":"Shows how to integrate the transformer with ts-loader in a Webpack config."},"warnings":[{"fix":"Use a bundler (Webpack/FuseBox) or a custom build step with ts-patch.","message":"Transformer does not work with TypeScript's tsc CLI directly; only via loaders that support custom transformers.","severity":"breaking","affected_versions":">=0.0.0"},{"fix":"Only import graphql-tag for gql template literals; do not rely on it for other runtime imports.","message":"The transformer removes graphql-tag imports, so ensure graphql-tag is not used elsewhere in code after build.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Keep graphql as a production dependency.","message":"Compiled output requires the graphql package at runtime; it is not removed from bundle.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"search_vec":"'0.2.1':25 '50':45 'altern':81 'ast':76 'awesom':56 'awesome-typescript-load':55 'babel':84,89 'babel-plugin-graphql-tag':83 'build':18 'bundl':37 'compil':11,75 'custom':8 'depend':44 'differenti':35 'frequent':32 'fusebox':63 'gql':16,73 'graphql':4,12,22,42,69,86,95,97 'graphql-tag':21,41,68,94 'import':66 'includ':82 'initi':50 'javascript':91 'kb':46 'key':34 'latest':28 'loader':58,61 'object':77 'plugin':85 'reduc':36 'releas':30 'remov':40,65 'replac':72 'runtim':49 'size':38 'speed':47 'stabl':29 'string':15 'support':79 'tag':5,13,23,43,70,87,96 'templat':14 'time':19 'transform':3,9,93 'ts':2,60 'ts-loader':59 'ts-transform-graphql-tag':1 'typescript':7,57,80,92 'updat':33 'use':20 'user':90 'version':24 'webpack':54 'work':52","created_at":"2026-06-07T17:02:22.039104+00:00","updated_at":"2026-06-07T17:02:22.039104+00:00","problems":[{"fix":"Use `getCustomTransformers: () => ({ before: [getTransformer()] })` instead of a plain object.","cause":"Incorrect configuration in Webpack loader options; getCustomTransformers must be a function returning an object.","error":"getCustomTransformers is not a function"},{"fix":"Install graphql-tag as a dev dependency: `npm install --save-dev graphql-tag`.","cause":"Missing dev dependency graphql-tag; it is required for the transformer at build time.","error":"Cannot find module 'graphql-tag'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/firede/ts-transform-graphql-tag#readme","github":"https://github.com/firede/ts-transform-graphql-tag","docs":null,"changelog":null,"pypi":null,"npm":"ts-transform-graphql-tag","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-07","next_check":"2026-09-05","install_tag":null}}