babel-plugin-inline-import-graphql-ast

Babel Inline Import GraphQL AST

Babel plugin allowing you to import .graphql and .gql files. The code is pre-parsed by gql from graphql-tag and the GraphQL AST object is inserted into your code at transpile time.

Known 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

Examples

Before (without babel-plugin-inline-import-graphql-ast):

// ProductsPage.js

...
import { gql } from 'react-apollo'

class ProductsPage extends React.Component {
  ...
}

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

export default graphql(productsQuery)(ProductsPage)

Now (with babel-plugin-inline-import-graphql-ast):

// productFragment.graphql
fragment productFragment on Product {
  name
  description
  weight
}

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

// ProductsPage.js

...
import myImportedQuery from './productsQuery.graphql'

class ProductsPage extends React.Component {
  ...
}

export default graphql(myImportedQuery)(ProductsPage)

Note: both cases are equivalent and will result in similar code after Babel transpiles them. Check How it works section for details.

Install

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

Use

Add a .babelrc file and write:

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

or pass the plugin with the plugins-flag on CLI

babel-node myfile.js --plugins babel-plugin-inline-import-graphql-ast

Babel-Inline-Import supports the following file extensions:

• .graphql
• .gql

options

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

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. The import should be treated as a default import(name whatever you want; no braces necessary)

Caveats

Babel does not track dependency between imported and importing files after the transformation is made. Therefore, you need to change the importing file in order to see your changes in the imported file take effect. To overcome this, you can:

• Disable babel cache (BABEL_DISABLE_CACHE=1)

Also make sure that your task runner is watching for changes in the imported file as well. You can see it working here.

Note - If BABEL_DISABLE_CACHE doesn't work, you'll need to manually clear the node_modules/.cache folder to re-transpile your .gql/.graphql files. You can either prepend your normal start script command with rimraf ./node_modules/.cache && or create a separate script i.e. clean. Note you'd need the rimraf dependency installed in this example

Credits

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

Changelog

v2.1.0 (January 25, 2018)

Features

• Add nodePath option

Fixes

• Respect NODE_PATH environment variable

Maintenance

• Remove leftover files and dependencies from babel-plugin-inline-import