Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

babel-plugin-inline-import-graphql-ast

Package Overview
Dependencies
Maintainers
1
Versions
46
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

babel-plugin-inline-import-graphql-ast

Babel plugin to make raw files importable

  • 1.3.2
  • winfix
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
398
increased by70.82%
Maintainers
1
Weekly downloads
 
Created
Source

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

Keywords

FAQs

Package last updated on 13 Jul 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc