{"id":13834673,"url":"https://github.com/firede/ts-transform-graphql-tag","last_synced_at":"2025-04-06T01:06:57.750Z","repository":{"id":29237256,"uuid":"116643001","full_name":"firede/ts-transform-graphql-tag","owner":"firede","description":"Compiles GraphQL tagged template strings using graphql-tag in TypeScript files.","archived":false,"fork":false,"pushed_at":"2023-01-03T21:01:19.000Z","size":987,"stargazers_count":155,"open_issues_count":17,"forks_count":8,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-30T00:06:23.078Z","etag":null,"topics":["gql","graphql","graphql-tag","typescript","typescript-transformer"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/firede.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-08T07:16:12.000Z","updated_at":"2024-11-07T14:59:09.000Z","dependencies_parsed_at":"2023-01-14T14:26:37.827Z","dependency_job_id":null,"html_url":"https://github.com/firede/ts-transform-graphql-tag","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firede%2Fts-transform-graphql-tag","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firede%2Fts-transform-graphql-tag/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firede%2Fts-transform-graphql-tag/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firede%2Fts-transform-graphql-tag/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/firede","download_url":"https://codeload.github.com/firede/ts-transform-graphql-tag/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247419860,"owners_count":20936012,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gql","graphql","graphql-tag","typescript","typescript-transformer"],"created_at":"2024-08-04T14:00:50.776Z","updated_at":"2025-04-06T01:06:57.730Z","avatar_url":"https://github.com/firede.png","language":"TypeScript","readme":"# ts-transform-graphql-tag\n\n[![npm](https://img.shields.io/npm/v/ts-transform-graphql-tag.svg)](https://www.npmjs.com/package/ts-transform-graphql-tag)\n[![Travis](https://img.shields.io/travis/firede/ts-transform-graphql-tag.svg)](https://travis-ci.org/firede/ts-transform-graphql-tag)\n[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Ffirede%2Fts-transform-graphql-tag.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Ffirede%2Fts-transform-graphql-tag?ref=badge_shield)\n[![license](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE)\n\nCompiles GraphQL tagged template strings using [graphql-tag](https://github.com/apollographql/graphql-tag) in TypeScript files.\n\nThe plugin was mostly inspired by great Babel's plugin [babel-plugin-graphql-tag](https://github.com/gajus/babel-plugin-graphql-tag).\n\n**Warning:**\n\n\u003e Because I moved to `@babel/preset-typescript` from `typescript`, this package is no longer maintained.  \n\u003e However, if you are still using it, PR is welcome.\n\n## Motivation\n\nCompiling GraphQL queries at the build time:\n\n* reduces the script initialization time; and\n* removes the `graphql-tag` dependency\n\nRemoving the `graphql-tag` dependecy from the bundle saves approx. 50 KB.\n\n## Implementation\n\n* Searches for imports of `graphql-tag` and removes them.\n* Searches for [tagged template literals](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals) with `gql` identifier and compiles them using `graphql-tag`.\n\n## Installation\n\nThe following command adds the packages to the project as a development-time dependency:\n\n```sh\nnpm i --save-dev ts-transform-graphql-tag\n```\n\nThis also depends on `graphql` and `graphql-tag` so you'll need those in your project as well (if you don't already have them):\n\n```sh\n# usually, this is a production dependency\nnpm i graphql\n\n# add this as a development-time dependency\nnpm i --save-dev graphql-tag\n```\n\n## Usage\n\n### Integration with `Webpack`\n\nIf you using [Webpack](https://webpack.js.org/), there are two popular TypeScript loaders that support specifying custom transformers:\n\n* [**awesome-typescript-loader**](https://github.com/s-panferov/awesome-typescript-loader), supports custom transformers since v3.1.3\n* [**ts-loader**](https://github.com/TypeStrong/ts-loader), supports custom transformers since v2.2.0\n\nBoth loaders use the same setting `getCustomTransformers` which is an optional function that returns `{ before?: Transformer[], after?: Transformer[] }`.\nIn order to inject the transformer into compilation, add it to `before` transformers array, like: `{ before: [getTransformer()] }`.\n\n#### `awesome-typescript-loader`\n\nIn the `webpack.config.js` file in the section where **awesome-typescript-loader** is configured as a loader:\n\n```js\n// 1. import `getTransformer` from the module\nvar getTransformer = require('ts-transform-graphql-tag').getTransformer\n\n// 2. create a transformer and add getCustomTransformer method to the loader config\nvar config = {\n  /// ...\n  module: {\n    rules: [\n      {\n        test: /\\.tsx?$/,\n        loader: 'awesome-typescript-loader',\n        options: {\n          // ... other loader's options\n          getCustomTransformers: () =\u003e ({ before: [getTransformer()] })\n        }\n      }\n    ]\n  }\n  /// ...\n}\n```\n\n#### `ts-loader`\n\nIn the `webpack.config.js` file in the section where **ts-loader** is configured as a loader:\n\n```js\n// 1. import `getTransformer` from the module\nvar getTransformer = require('ts-transform-graphql-tag').getTransformer\n\n// 2. create a transformer and add getCustomTransformer method to the loader config\nvar config = {\n  // ...\n  module: {\n    rules: [\n      {\n        test: /\\.tsx?$/,\n        loader: 'ts-loader',\n        options: {\n          // ... other loader's options\n          getCustomTransformers: () =\u003e ({ before: [getTransformer()] })\n        }\n      }\n    ]\n  }\n  // ...\n};\n```\n\n### Integration with `FuseBox`\n\n[FuseBox](https://fuse-box.org) is a blazing fast (TypeScipt first) bundler/module loader.\n\nIn the `fuse.ts` file, you can configured like this:\n\n```ts\n// 1. import `getTransformer` from the module\nimport { getTransformer } from \"ts-transform-graphql-tag\"\n\n// 2. create a transformer and add it to the `transformers.before` config\nconst fuse = FuseBox.init({\n  // ... other init options\n  transformers: {\n    before: [\n      getTransformer()\n    ]\n  }\n})\n```\n\n## Example\n\n**before**\n\n```ts\n// with transformer\nimport gql from \"graphql-tag\"\nexport default gql`query Hello {hello}`\n```\n\n**after**\n\n```js\n\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.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 } } } };\n```\n\nNeed more example? run `npm test` and checkout `test/fixture/actual/*.js`.\n\n## Related\n\n* [graphql-tag](https://github.com/apollographql/graphql-tag)\n\n## Thanks\n\n* [babel-plugin-graphql-tag](https://github.com/gajus/babel-plugin-graphql-tag)\n* [ts-transform-img](https://github.com/longlho/ts-transform-img/)\n* [typescript-plugin-styled-components](https://github.com/Igorbek/typescript-plugin-styled-components)\n\n---\n\n\u003cp align=\"center\"\u003eMIT \u0026copy; \u003ca href=\"https://github.com/firede\"\u003eFirede\u003c/a\u003e, built with :coffee: \u0026amp; :sparkling_heart:\u003cp\u003e\n","funding_links":[],"categories":["Transformers"],"sub_categories":["General transformers"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffirede%2Fts-transform-graphql-tag","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffirede%2Fts-transform-graphql-tag","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffirede%2Fts-transform-graphql-tag/lists"}