babel-plugin-inline-import-graphql-ast

Babel Inline Import GraphQL AST

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

Install

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

In .babelrc file:

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

Usage

...
import myQuery from './query.graphql'
...
export 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:

query first {
  test1
}

mutation second {
  test2
}

subscription third {
  test3
}

Full example

Before (without this plugin):

ProductsPage.js

import React, { Component } from 'react'
import gql from 'graphql-tag'
import { graphql } from 'react-apollo'

class ProductsPage extends Component {
  render() {
    if (this.props.data.loading) return <h3>Loading...</h3>
    return <div>{`This is my data: ${this.props.data.queryName}`}</div>
  }
}

const productsQuery = gql`
  query products {
    products {
      productId
      name
      description
      weight
    }
  }
`

export default graphql(productsQuery)(ProductsPage)

After (with this plugin):

productFragment.graphql

fragment productFragment on Product {
  name
  description
  weight
}

productsQuery.graphql

#import "./productFragment.graphql"
query products {
  products {
    productId
    ...productFragment
  }
}

ProductsPage.js

import React, { Component } from 'react'
import { graphql } from 'react-apollo'
import myImportedQuery from './productsQuery.graphql'

class ProductsPage extends Component {
  render() {
    if (this.props.data.loading) return <h3>Loading...</h3>
    return <div>{`This is my data: ${this.props.data.queryName}`}</div>
  }
}

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

{
  "scripts": {
    "start": "rimraf ./node_modules/.cache/babel-loader && node index.js"
  }
}

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

Changelog

v2.3.4 (March 14, 2018)

Fixes

• Pin versions of babel packages which were causing issue #24

Maintenance

• Begin including package-lock.json file for users of NPM