Babel Inline Import GraphQL AST

Babel plugin allowing import of .graphql and .gql files into .js and .jsx files.

---

***Deprecated***

• As of May 27, 2018, the babel-plugin-inline-import-graphql-ast package name and the corresponding GitHub repo are deprecated. Please use babel-plugin-import-graphql (NPM) and the new GitHub repo instead.

• babel-plugin-import-graphql@2.x will remain backwards compatible with the previous package so switching over is safe and easy.

• babel-plugin-import-graphql@2.4.2 is identical to 2.4.0 and 2.4.1 of babel-plugin-inline-import-graphql-ast, with the exception of the package name and README.md file.

Migrating to babel-plugin-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 published version of babel-plugin-import-graphql is 2.4.2 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.2 or widen your version range to include it.

Update your babel configuration

Update plugins array:

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

Congratulations, you're all set!

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

---

Install

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

In .babelrc file:

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

Usage

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

Potential use cases

• Replaces graphql-tag/loader in projects where Webpack is unavailable(i.e. NextJS)

• Users of create-react-app that want to avoid ejecting their app can use this package indirectly by using react-app-rewire-inline-import-graphql-ast

Supported features

Schema-like .gql/.graphql files

This package was originally intended only for frontend graphql files containing operations, which are to be parsed into GraphQL AST syntax before being inlined into the code. There is now limited support for files containing types and schema definitions. Specifically, only default import syntax is supported, and the entire file will be inlined as raw text. If there are specific features you'd like to see for use with schema-like files, let me know.

In .gql/.graphql files

• Multiple operations (queries/mutations/subscriptions) per file
• Fragment imports
  • #import "./fragment.graphql"

In .js/.jsx files

For both unnamed (query { test }) and named (query named { test }) operations

• Default import - import anyName from './file.graphql'

note: when multiple operation exist in one file, the first is used as the default export

For named operations only

• Named imports import { first, second as secondQuery } from './file.graphql'
• Namespace imports import * as ops from './file.graphql' (example usage: graphql(ops.third))
• Any combination of the above import firstQuery, * as ops from './file.graphql'

File for examples above:

1query first {
2  test1
3}
4
5mutation second {
6  test2
7}
8
9subscription third {
10  test3
11}

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

• nodePath -- Intended primarily for use with react-app-rewire-inline-import-graphql-ast Takes a string like the NODE_PATH environment variable and is used to allow resolution of absolute paths to your .gql/.graphql files. Note this currently is NOT respected for fragment imports. If you already have your NODE_PATH variable set in your environment, you don't need to set this option.

How it works

When you import a .graphql or .gql file, it is parsed into a GraphQL AST object by the gql function from graphql-tag. This AST object is inserted directly into the importing file, in a variable with the name defined in the import statement.

Caveats

Applying changes to GraphQL files

It is necessary to clear the node_modules/.cache/babel-loader folder to re-transpile your .gql/.graphql files each time one is changed. The recommended method is prepending the relevant script in your package.json and rerunning the script when you change a GraphQL file:

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

Note you'd need the rimraf dependency installed in this example.

Note for users of Babel 6

This plugin has problems with babel-generator before version 6.26.1, which is included in babel-core and babel-cli. Unfortunately, the 6.26.1 update only applied to babel-generator itself, without bumping the version of the other packages. This means you need a copy of babel-core@6.26.0 or babel-cli@6.26.0 added to your project after February 3rd, 2018. If one of these was added prior to that date, you'll need to remove your node_modules folder, along with your package-lock.json or yarn.lock file, and reinstall your dependencies.

Credits

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