{"id":13630094,"url":"https://github.com/detrohutt/babel-plugin-import-graphql","last_synced_at":"2025-10-04T18:59:54.613Z","repository":{"id":32537106,"uuid":"90192988","full_name":"detrohutt/babel-plugin-import-graphql","owner":"detrohutt","description":"Enables import syntax for .graphql and .gql files","archived":false,"fork":false,"pushed_at":"2025-09-01T13:40:02.000Z","size":802,"stargazers_count":315,"open_issues_count":19,"forks_count":22,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-09-29T08:32:12.958Z","etag":null,"topics":["apollo","babel-plugin","fragment-imports","graphql","graphql-ast","graphql-files","nextjs","parse","react-native","schema"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/babel-plugin-import-graphql","language":"JavaScript","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/detrohutt.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-03T21:00:01.000Z","updated_at":"2025-08-27T12:12:37.000Z","dependencies_parsed_at":"2024-11-28T16:02:51.934Z","dependency_job_id":null,"html_url":"https://github.com/detrohutt/babel-plugin-import-graphql","commit_stats":{"total_commits":304,"total_committers":22,"mean_commits":"13.818181818181818","dds":0.569078947368421,"last_synced_commit":"25e621b6c19ce49acd50247a31b03cd636a0c181"},"previous_names":["detrohutt/babel-plugin-inline-import-graphql-ast"],"tags_count":24,"template":false,"template_full_name":null,"purl":"pkg:github/detrohutt/babel-plugin-import-graphql","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/detrohutt%2Fbabel-plugin-import-graphql","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/detrohutt%2Fbabel-plugin-import-graphql/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/detrohutt%2Fbabel-plugin-import-graphql/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/detrohutt%2Fbabel-plugin-import-graphql/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/detrohutt","download_url":"https://codeload.github.com/detrohutt/babel-plugin-import-graphql/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/detrohutt%2Fbabel-plugin-import-graphql/sbom","scorecard":{"id":336430,"data":{"date":"2025-08-11","repo":{"name":"github.com/detrohutt/babel-plugin-import-graphql","commit":"25e621b6c19ce49acd50247a31b03cd636a0c181"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":4.9,"checks":[{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Code-Review","score":2,"reason":"Found 1/5 approved changesets -- score normalized to 2","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Token-Permissions","score":9,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Info: jobLevel 'actions' permission set to 'read': .github/workflows/eslint.yml:28","Info: jobLevel 'contents' permission set to 'read': .github/workflows/eslint.yml:26","Info: jobLevel 'contents' permission set to 'read': .github/workflows/snyk-security.yml:33","Info: jobLevel 'actions' permission set to 'read': .github/workflows/snyk-security.yml:35","Info: topLevel 'contents' permission set to 'read': .github/workflows/dependency-review.yml:22","Warn: no topLevel permission defined: .github/workflows/eslint.yml:1","Info: topLevel 'contents' permission set to 'read': .github/workflows/snyk-security.yml:28","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Pinned-Dependencies","score":1,"reason":"dependency not pinned by hash detected -- score normalized to 1","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/dependency-review.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/detrohutt/babel-plugin-import-graphql/dependency-review.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/dependency-review.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/detrohutt/babel-plugin-import-graphql/dependency-review.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/eslint.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/detrohutt/babel-plugin-import-graphql/eslint.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/eslint.yml:47: update your workflow using https://app.stepsecurity.io/secureworkflow/detrohutt/babel-plugin-import-graphql/eslint.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/snyk-security.yml:38: update your workflow using https://app.stepsecurity.io/secureworkflow/detrohutt/babel-plugin-import-graphql/snyk-security.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/snyk-security.yml:77: update your workflow using https://app.stepsecurity.io/secureworkflow/detrohutt/babel-plugin-import-graphql/snyk-security.yml/master?enable=pin","Warn: npmCommand not pinned by hash: update-lock-files:6","Warn: npmCommand not pinned by hash: .github/workflows/eslint.yml:35","Warn: npmCommand not pinned by hash: .github/workflows/eslint.yml:36","Info:   0 out of   6 GitHub-owned GitHubAction dependencies pinned","Info:   1 out of   1 third-party GitHubAction dependencies pinned","Info:   0 out of   3 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'","Warn: branch protection not enabled for branch 'beta'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":10,"reason":"SAST tool detected","details":["Info: SAST configuration detected: Snyk","Warn: 0 commits out of 26 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":7,"reason":"3 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-18T04:50:47.129Z","repository_id":32537106,"created_at":"2025-08-18T04:50:47.129Z","updated_at":"2025-08-18T04:50:47.129Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":277782799,"owners_count":25876209,"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","status":"online","status_checked_at":"2025-10-01T02:00:09.286Z","response_time":88,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["apollo","babel-plugin","fragment-imports","graphql","graphql-ast","graphql-files","nextjs","parse","react-native","schema"],"created_at":"2024-08-01T22:01:30.039Z","updated_at":"2025-10-04T18:59:54.560Z","avatar_url":"https://github.com/detrohutt.png","language":"JavaScript","funding_links":["https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=3AYURHRU7PMCL"],"categories":["JavaScript"],"sub_categories":[],"readme":"[![npm Version](https://img.shields.io/npm/v/babel-plugin-import-graphql.svg)](https://www.npmjs.com/package/babel-plugin-import-graphql)\n[![npm Downloads](https://img.shields.io/npm/dm/babel-plugin-import-graphql.svg)](https://www.npmjs.com/package/babel-plugin-import-graphql)\n[![npm License](https://img.shields.io/npm/l/babel-plugin-import-graphql.svg)](https://www.npmjs.com/package/babel-plugin-import-graphql)\n[![donate](https://img.shields.io/badge/donate-PayPal-green.svg)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=3AYURHRU7PMCL)\n\n# babel-plugin-import-graphql\n\nBabel plugin enabling `import` syntax for `.graphql` and `.gql` files.\n\n##### For users of the old package name (babel-plugin-inline-import-graphql-ast)\n\n\u003cdetails\u003e\n\n\u003csummary\u003eDeprecation/Migration notes\u003c/summary\u003e\n\nAs of May 27, 2018, the `babel-plugin-inline-import-graphql-ast` package name is deprecated. Please use [`babel-plugin-import-graphql` (NPM)](https://www.npmjs.com/package/babel-plugin-import-graphql) instead.\n\n### Migrating to babel-plugin-import-graphql\n\n#### Update your babel configuration\n\n###### Update `plugins` array:\n\n`babel-plugin-inline-import-graphql-ast` (or `inline-import-graphql-ast`) -\u003e `import-graphql`.\n\n#### Update your `package.json` file\n\n###### Update the package name in `devDependencies`:\n\n`babel-plugin-inline-import-graphql-ast` -\u003e `babel-plugin-import-graphql`.\n\n###### Make sure your version string is compatible:\n\nThe first correct version of `babel-plugin-import-graphql` is `2.4.4` so please make sure your version string matches that. For instance, `\"babel-plugin-import-graphql\": \"^2.0.0\"` is fine because of the caret.\n\nIf you've pinned to a specific version, you'll need to upgrade and pin to at least `2.4.4` or widen your version range to include it.\n\nCongratulations, you're all set!\n\n\u003c/details\u003e\n\n---\n\n\u003e If you enjoy my package please [star the GitHub repo](https://github.com/detrohutt/babel-plugin-import-graphql) or share on Twitter (and [follow me](https://twitter.com/detrohutt) for updates)!\n\n## Prerequisites\n\n* `babel-core@^7.20.7` or `@babel/core@^7.0.0-beta.49` (Lower betas may work but weren't tested)\n\n* `graphql-tag@^2.9.2` (only if using the `runtime` option described below)\n\n## Install\n\n```bash\nyarn add -D babel-plugin-import-graphql\n```\nor\n```bash\nnpm i -D babel-plugin-import-graphql\n```\n\nIn `.babelrc` file:\n\n```json\n{\n  \"plugins\": [\"import-graphql\"]\n}\n```\n\nEach time you modify a GraphQL file, the cache must be cleared for the changes to take effect.\n\nIf using node then the `node_modules/.cache/babel-loader` folder must be cleared. I recommend prepending the relevant script in your `package.json` and rerunning the script when you change a GraphQL file:\n\n```json\n{\n  \"scripts\": {\n    \"start\": \"rm -rf ./node_modules/.cache/babel-loader \u0026\u0026 node index.js\"\n  }\n}\n```\n\nIf using React Native then the metro cache must be reset every time you change a GraphQL file:\n\n```\nreact-native start --reset-cache\n```\n\n\u003e Note: Windows users would need to use `rimraf` or another solution in place of `rm -rf`.\n\n## Basic Usage\n\n```js\n...\nimport myQuery from './query.graphql'\n...\nexport default graphql(myQuery)(myComponent)\n```\n\n## Supported features\n\n### Schema files\n\nFeature | Description\n-|-\nDefault import | The entire source code for the file will act as the default export.\n\\#import syntax | Types, etc. in one GraphQL file can be imported into another GraphQL file using this syntax: `#import \"./types.graphql\"`. These imports will be resolved recursively to any reasonable depth of files. Currently, all content in the named file will be imported and there is no way to import specific types. If you want that behavior, you can store a single type in each file.\n\n### Operation/fragment files\n\nAll variants of the [import syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) are supported for non-schema files, except `import './filename'`.\n\nFeature | Description\n-|-\nMultiple operations/fragments per file | Multiple operations (queries/mutations/subscriptions) and/or fragments can be placed in a single file. However, in this case you cannot use unnamed operations/fragments. For example, `query { test }` would need to be `query someName { test }`.\nDefault import | The first or only operation/fragment in a file will act as the default export. However, for backwards compatibility reasons, if there are both operations and fragments in a file, the first operation will act as the default export.\nNamed imports | All operations/fragments, **including the default**, act as named exports.\n\\#import syntax | Fragments in one GraphQL file can be imported into another GraphQL file using this syntax: `#import \"./fragment.graphql\"`. These imports will be resolved recursively to any reasonable depth of files. Currently, all fragments in the named file will be imported and there is no way to import specific fragments. If you want that behavior, you can store a single fragment in each file.\n\n## Full example\n\n#### Before (without this plugin):\n\nProductsPage.js\n\n```jsx\nimport React, { Component } from 'react'\nimport gql from 'graphql-tag'\nimport { graphql } from 'react-apollo'\n\nclass ProductsPage extends Component {\n  render() {\n    if (this.props.data.loading) return \u003ch3\u003eLoading...\u003c/h3\u003e\n    return \u003cdiv\u003e{`This is my data: ${this.props.data.queryName}`}\u003c/div\u003e\n  }\n}\n\nconst productsQuery = gql`\n  query products {\n    products {\n      productId\n      name\n      description\n      weight\n    }\n  }\n`\n\nexport default graphql(productsQuery)(ProductsPage)\n```\n\n#### After (with this plugin):\n\nproductFragment.graphql\n\n```gql\nfragment productFragment on Product {\n  name\n  description\n  weight\n}\n```\n\nproductsQuery.graphql\n\n```gql\n#import \"./productFragment.graphql\"\nquery products {\n  products {\n    productId\n    ...productFragment\n  }\n}\n```\n\nProductsPage.js\n\n```jsx\nimport React, { Component } from 'react'\nimport { graphql } from 'react-apollo'\nimport myImportedQuery from './productsQuery.graphql'\n\nclass ProductsPage extends Component {\n  render() {\n    if (this.props.data.loading) return \u003ch3\u003eLoading...\u003c/h3\u003e\n    return \u003cdiv\u003e{`This is my data: ${this.props.data.queryName}`}\u003c/div\u003e\n  }\n}\n\nexport default graphql(myImportedQuery)(ProductsPage)\n```\n\n## Options\n\nOption | Type | Default | Description\n-|-|-|-\n`nodePath` | String | value of NODE_PATH environment variable | **Intended for use with [react-app-rewire-inline-import-graphql-ast](https://github.com/detrohutt/react-app-rewire-inline-import-graphql-ast)** -- Used to allow resolution of absolute paths to your `.gql`/`.graphql` files. If you already have your `NODE_PATH` variable set in your environment, you don't need to set this option. **Not** currently respected by `#import` syntax.\n`runtime` | Boolean | false | **Enabling this option requires `graphql-tag` to be installed as a peerDependency.** -- Instead of inlining the parsed AST object, which is very large, this option inlines your GraphQL source code along with an import of the `gql` function from `graphql-tag` and parses your GraphQL source code with `gql` at runtime.\n`extensions` | Array | [] | Enables loading GraphQL SDL files that have a custom extension, e.g. '.prisma' \n`emitDeclarations` | Boolean | false | Enables emmitting `.d.ts` files next to GraphQL query/fragment source file.\n\n\n## For users of create-react-app\n\n[create-react-app](https://github.com/facebook/create-react-app/) users can use this package without ejecting via [react-app-rewire-inline-import-graphql-ast](https://github.com/detrohutt/react-app-rewire-inline-import-graphql-ast)\n\n## Credits\n\nThe behavior of this plugin is inspired by and mostly mirrors the [graphql-tag Webpack loader](https://github.com/apollographql/graphql-tag#webpack-preprocessing-with-graphql-tagloader)\n\nThis package started out as a modified version of [babel-plugin-inline-import](https://www.npmjs.com/package/babel-plugin-inline-import)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdetrohutt%2Fbabel-plugin-import-graphql","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdetrohutt%2Fbabel-plugin-import-graphql","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdetrohutt%2Fbabel-plugin-import-graphql/lists"}