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.

Important note

Prior to v1.2.0, fragments (#import statements) are not supported

Known use cases

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

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 is compatible with the following file extensions:

• .graphql
• .gql

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 spread. 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 for NextJS users - instead of BABEL_DISABLE_CACHE, you'll need to manually clear the node_modules/.cache folder to re-transpile your .gql/.graphql files. The easiest way to do this is using node scripts. 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 is a modified version of babel-plugin-inline-import