Awesome

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)

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@^7.20.7 or @babel/core@^7.0.0-beta.49 (Lower betas may work but weren't tested)

• graphql-tag@^2.9.2 (only if using the runtime option described below)

Install

yarn add -D babel-plugin-import-graphql

or

npm i -D babel-plugin-import-graphql

In .babelrc file:

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

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:

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

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

...
import myQuery from './query.graphql'
...
export default graphql(myQuery)(myComponent)

Supported features

Schema files

Operation/fragment files

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

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

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