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 .gql/.graphql files importable

  • 2.3.6
  • Source
  • npm
  • Socket score

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

npm Version npm Downloads npm License donate

Babel Inline Import GraphQL AST

Babel plugin allowing import of .graphql and .gql files into .js and .jsx files.

Install

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

In .babelrc file:

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

Usage

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

Potential use cases

Supported features

Schema-like .gql/.graphql files

This package was originally intended only for frontend graphql files containing operations, which are to be parsed into GraphQL AST syntax before being inlined into the code. There is now limited support for files containing types and schema definitions. Specifically, only default import syntax is supported, and the entire file will be inlined as raw text. If there are specific features you'd like to see for use with schema-like files, let me know.

In .gql/.graphql files
  • Multiple operations (queries/mutations/subscriptions) per file
  • Fragment imports
    • #import "./fragment.graphql"
In .js/.jsx files
For both unnamed (query { test }) and named (query named { test }) operations
  • Default import - import anyName from './file.graphql'

note: when multiple operation exist in one file, the first is used as the default export

For named operations only
  • Named imports import { first, second as secondQuery } from './file.graphql'
  • Namespace imports import * as ops from './file.graphql' (example usage: graphql(ops.third))
  • Any combination of the above import firstQuery, * as ops from './file.graphql'

File for examples above:

query first {
  test1
}

mutation second {
  test2
}

subscription third {
  test3
}

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

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

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.

Caveats

Applying changes to GraphQL files

It is necessary to clear the node_modules/.cache/babel-loader folder to re-transpile your .gql/.graphql files each time one is changed. The recommended method is prepending the relevant script in your package.json and rerunning the script when you change a GraphQL file:

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

Note you'd need the rimraf dependency installed in this example.

Note for users of Babel 6

This plugin has problems with babel-generator before version 6.26.1, which is included in babel-core and babel-cli. Unfortunately, the 6.26.1 update only applied to babel-generator itself, without bumping the version of the other packages. This means you need a copy of babel-core@6.26.0 or babel-cli@6.26.0 added to your project after February 3rd, 2018. If one of these was added prior to that date, you'll need to remove your node_modules folder, along with your package-lock.json or yarn.lock file, and reinstall your dependencies.

Credits

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

Keywords

FAQs

Package last updated on 31 Mar 2018

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