{"id":15390290,"url":"https://github.com/gajus/babel-plugin-graphql-tag","last_synced_at":"2025-04-04T12:06:37.996Z","repository":{"id":21460477,"uuid":"92807750","full_name":"gajus/babel-plugin-graphql-tag","owner":"gajus","description":"Compiles GraphQL tagged template strings using graphql-tag.","archived":false,"fork":false,"pushed_at":"2022-03-04T10:17:43.000Z","size":312,"stargazers_count":172,"open_issues_count":10,"forks_count":28,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-30T05:54:13.163Z","etag":null,"topics":["babel-plugin","graphql","graphql-tag"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gajus.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"gajus","patreon":"gajus"}},"created_at":"2017-05-30T07:21:08.000Z","updated_at":"2024-03-13T05:27:56.000Z","dependencies_parsed_at":"2022-07-15T02:16:55.924Z","dependency_job_id":null,"html_url":"https://github.com/gajus/babel-plugin-graphql-tag","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gajus%2Fbabel-plugin-graphql-tag","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gajus%2Fbabel-plugin-graphql-tag/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gajus%2Fbabel-plugin-graphql-tag/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gajus%2Fbabel-plugin-graphql-tag/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gajus","download_url":"https://codeload.github.com/gajus/babel-plugin-graphql-tag/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247174407,"owners_count":20896076,"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":["babel-plugin","graphql","graphql-tag"],"created_at":"2024-10-01T15:05:15.261Z","updated_at":"2025-04-04T12:06:37.977Z","avatar_url":"https://github.com/gajus.png","language":"JavaScript","funding_links":["https://github.com/sponsors/gajus","https://patreon.com/gajus"],"categories":[],"sub_categories":[],"readme":"# babel-plugin-graphql-tag\n\n[![GitSpo Mentions](https://gitspo.com/badges/mentions/gajus/babel-plugin-graphql-tag?style=flat-square)](https://gitspo.com/mentions/gajus/babel-plugin-graphql-tag)\n[![Travis build status](http://img.shields.io/travis/gajus/babel-plugin-graphql-tag/master.svg?style=flat-square)](https://travis-ci.org/gajus/babel-plugin-graphql-tag)\n[![NPM version](http://img.shields.io/npm/v/babel-plugin-graphql-tag.svg?style=flat-square)](https://www.npmjs.org/package/babel-plugin-graphql-tag)\n[![Canonical Code Style](https://img.shields.io/badge/code%20style-canonical-blue.svg?style=flat-square)](https://github.com/gajus/canonical)\n[![Twitter Follow](https://img.shields.io/twitter/follow/kuizinas.svg?style=social\u0026label=Follow)](https://twitter.com/kuizinas)\n\nCompiles GraphQL tagged template strings using [graphql-tag](https://github.com/apollographql/graphql-tag).\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` dependency 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## Example compilation\n\nInput:\n\n```js\nimport gql from 'graphql-tag';\n// if using apollo v3\nimport { gql } from '@apollo/client';\n\nconst foo = gql`query {bar}`;\n\n```\n\nOutput:\n\n```js\nconst foo = {\n  \"definitions\": [\n    {\n      \"directives\": [\n      ],\n      \"kind\": \"OperationDefinition\",\n      \"operation\": \"query\",\n      \"selectionSet\": {\n        \"kind\": \"SelectionSet\",\n        \"selections\": [\n          {\n            \"alias\": null,\n            \"arguments\": [\n            ],\n            \"directives\": [\n            ],\n            \"kind\": \"Field\",\n            \"name\": {\n              \"kind\": \"Name\",\n              \"value\": \"bar\"\n            },\n            \"selectionSet\": null\n          }\n        ]\n      },\n      \"variableDefinitions\": [\n      ]\n    }\n  ],\n  \"kind\": \"Document\",\n  \"loc\": {\n    \"end\": 11,\n    \"start\": 0\n  }\n};\n\n```\n\n**NOTE: require() is also supported.**\n\n### Using fragments\n\nUsing GraphQL [fragments](http://graphql.org/learn/queries/#fragments) requires to:\n\n1. Define a fragment using `graphql-tag`.\n2. Append the referenced fragment as a variable to the end of the GraphQL query.\n\nExample:\n\n```js\nimport gql from 'graphql-tag';\n\nconst bar = gql`\n  fragment barFragment on Foo {\n    field1\n    field2\n  }\n`;\n\nconst foo = gql`\n  query foo {\n    foo {\n      ...barFragment\n    }\n  }\n\n  ${bar}\n`;\n\n```\n\n### Options\n\n- `importSources` - An array of names for modules to import (default = `[\"graphql-tag\", \"@apollo/client\"]`)\n- `onlyMatchImportSuffix` - Matches the end of the import instead of the entire name. Useful for relative imports, e.g. `./utils/graphql` (default = false)\n- `strip` - Strips insignificant characters such as whitespace from the original GraphQL string literal to reduce the size of compiled AST (default = false)\n- `transform` - By default, graphql query strings will be replaced with their AST representations, but you can override that behavior and do whatever you like. One possible use case would be to implement persisted queries:\n- `gqlTagIdentifiers` - An array of names for gql tag identifiers (default = `[\"gql\"]`)\n\n```js\n// babel.config.js\nplugins: [\n    [\n        \"babel-plugin-graphql-tag\",\n        {\n            strip: true,\n            transform: (source, ast) =\u003e {\n                const h = hash(source); // use your favorite hashing method\n                graphqlAstHashes[h] = ast; // write this to a file when compilation is complete\n                return {\n                    queryId: h\n                };\n            }\n        }\n    ]\n]\n```\n\n### Known Issues\n\nSome cases are really hard to track down:\n\n```\nconst apolloClient = require('@apollo/client');\n// or\nimport apolloClient from '@apollo/client';\n\nconst { gql } = apolloClient;\n\nconst foo = gql`...`;\n```\n\nIf you have this kind of syntax, this plugin won't work for you.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgajus%2Fbabel-plugin-graphql-tag","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgajus%2Fbabel-plugin-graphql-tag","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgajus%2Fbabel-plugin-graphql-tag/lists"}