npmpackage.info

Gathering detailed insights and metrics for babel-plugin-import-graphql

Other packages similar to babel-plugin-import-graphql

babel-plugin-inline-import

3.0.0

Babel plugin to make raw files importable

babel-plugin-import-graphql-files

1.0.1

Babel plugin to import .gql,.graphql files

babel-plugin-graphql-import

2.0.0

Babel plugin to make graphql files importable

babel-plugin-inline-import-graphql-ast

2.4.1

Babel plugin to make .gql/.graphql files importable

Gathering detailed insights and metrics for babel-plugin-import-graphql

babel-plugin-import-graphql - 2.8.1 | npmpackage.info

babel-plugin-import-graphql

Enables import syntax for .graphql and .gql files

2.8.1

314

MIT

JavaScript

4.9

Installations

npm install babel-plugin-import-graphql

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Min. Node Version

>= 4.x

Node Version

14.15.3

NPM Version

6.14.9 Pull Requests

Open

1

Total

58

Closed

13

Merged

44

Issues

Open

17

Total

58

Closed

41

Releases

v2.8.1

Updated on Jan 02, 2021

v2.8.0

Updated on Jan 02, 2021

v2.8.0-beta.0

Updated on Dec 18, 2019

v2.7.0

Updated on Mar 03, 2019

v2.6.2

Updated on Jun 29, 2018

v2.6.1

Updated on Jun 29, 2018

View All 15 releases

Languages

JavaScript

Shell

TypeScript

JavaScript (98.75%)

Shell (0.78%)

TypeScript (0.47%)

Developer

detrohutt

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

314 Stars

360 Commits

22 Forks

5 Watchers

4 Branches

18 Contributors

Updated on Nov 21, 2024

Maintainers

View All 18 Contributors

Package Meta Information

Latest Version

2.8.1

Package Id

babel-plugin-import-graphql@2.8.1

Size

11.75 kB

NPM Version

6.14.9

Node Version

14.15.3

Published on

Jan 02, 2021

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

babel-plugin-import-graphql

Babel plugin enabling import syntax for .graphql and .gql files.

For users of the old package name (babel-plugin-inline-import-graphql-ast)

Deprecation/Migration notes

As of May 27, 2018, the babel-plugin-inline-import-graphql-ast package name is deprecated. Please use babel-plugin-import-graphql (NPM) instead.

Migrating to babel-plugin-import-graphql

Update your babel configuration

Update `plugins` array:

babel-plugin-inline-import-graphql-ast (or inline-import-graphql-ast) -> import-graphql.

Update your `package.json` file

Update the package name in `devDependencies`:

babel-plugin-inline-import-graphql-ast -> babel-plugin-import-graphql.

Make sure your version string is compatible:

The 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.

If 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.

Congratulations, you're all set!

If you enjoy my package please star the GitHub repo or share on Twitter (and follow me for updates)!

Prerequisites

babel-core@^6.26.3 or @babel/core@^7.0.0-beta.40 (Lower betas may work but weren't tested)
graphql-tag@^2.1.0 (only if using the runtime option described below)

Install

1$ yarn add -D babel-plugin-import-graphql

In .babelrc file:

1{
2  "plugins": ["import-graphql"]
3}

Each time you modify a GraphQL file, the cache must be cleared for the changes to take effect.

If 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:

1{
2  "scripts": {
3    "start": "rm -rf ./node_modules/.cache/babel-loader && node index.js"
4  }
5}

If using React Native then the metro cache must be reset every time you change a GraphQL file:

react-native start --reset-cache

Note: Windows users would need to use rimraf or another solution in place of rm -rf.

Basic Usage

1...
2import myQuery from './query.graphql'
3...
4export default graphql(myQuery)(myComponent)

Supported features

Schema files

Feature	Description
Default import	The entire source code for the file will act as the default export.
#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.

Operation/fragment files

All variants of the import syntax are supported for non-schema files, except import './filename'.

Feature	Description
Multiple 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 }`.
Default 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.
Named imports	All operations/fragments, including the default, act as named exports.
#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.

Full example

Before (without this plugin):

ProductsPage.js

1import React, { Component } from 'react'
2import gql from 'graphql-tag'
3import { graphql } from 'react-apollo'
4
5class ProductsPage extends Component {
6  render() {
7    if (this.props.data.loading) return <h3>Loading...</h3>
8    return <div>{`This is my data: ${this.props.data.queryName}`}</div>
9  }
10}
11
12const productsQuery = gql`
13  query products {
14    products {
15      productId
16      name
17      description
18      weight
19    }
20  }
21`
22
23export default graphql(productsQuery)(ProductsPage)

After (with this plugin):

productFragment.graphql

1fragment productFragment on Product {
2  name
3  description
4  weight
5}

productsQuery.graphql

1#import "./productFragment.graphql"
2query products {
3  products {
4    productId
5    ...productFragment
6  }
7}

ProductsPage.js

1import React, { Component } from 'react'
2import { graphql } from 'react-apollo'
3import myImportedQuery from './productsQuery.graphql'
4
5class ProductsPage extends Component {
6  render() {
7    if (this.props.data.loading) return <h3>Loading...</h3>
8    return <div>{`This is my data: ${this.props.data.queryName}`}</div>
9  }
10}
11
12export default graphql(myImportedQuery)(ProductsPage)

Options

Option	Type	Default	Description
`nodePath`	String	value of NODE_PATH environment variable	Intended for use with 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.
`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.
`extensions`	Array	[]	Enables loading GraphQL SDL files that have a custom extension, e.g. '.prisma'
`emitDeclarations`	Boolean	false	Enables emmitting `.d.ts` files next to GraphQL query/fragment source file.

For users of create-react-app

create-react-app users can use this package without ejecting via react-app-rewire-inline-import-graphql-ast

Credits

The behavior of this plugin is inspired by and mostly mirrors the graphql-tag Webpack loader

This package started out as a modified version of babel-plugin-inline-import

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

10

SAST

Determines if the project uses static code analysis.

9

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

7

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

2

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

1

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

Score

4.9

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to babel-plugin-import-graphql

Other packages similar to babel-plugin-import-graphql

babel-plugin-import-graphql

Installations

Developer Guide

No

CommonJS

>= 4.x

14.15.3

6.14.9

Pull Requests

1

58

13

44

Issues

17

58

41

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

babel-plugin-import-graphql

For users of the old package name (babel-plugin-inline-import-graphql-ast)

Migrating to babel-plugin-import-graphql

Update your babel configuration

Update plugins array:

Update your package.json file

Update the package name in devDependencies:

Make sure your version string is compatible:

Prerequisites

Install

Basic Usage

Supported features

Schema files

Operation/fragment files

Full example

Before (without this plugin):

After (with this plugin):

Options

For users of create-react-app

Credits

10

10

10

10

9

7

2

1

0

0

0

0

0

4.9

/10

Update `plugins` array:

Update your `package.json` file

Update the package name in `devDependencies`: