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)

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

Prerequisites

• [email protected]^6.26.3 or @babel/[email protected]^7.0.0-beta.40 (Lower betas may work but weren't tested)

• [email protected]^2.1.0 (only if using the runtime option described below)

Install

$ yarn add -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