Security News
JSR Working Group Kicks Off with Ambitious Roadmap and Plans for Open Governance
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
babel-plugin-inline-import-graphql-ast
Advanced tools
Babel plugin to make .gql/.graphql files importable
Babel plugin allowing import
of .graphql
and .gql
files into .js
and .jsx
files.
$ yarn add -D babel-plugin-inline-import-graphql-ast
In .babelrc
file:
{
"plugins": ["inline-import-graphql-ast"]
}
...
import myQuery from './query.graphql'
...
export default graphql(myQuery)(myComponent)
Replaces graphql-tag/loader
in projects where Webpack is unavailable(i.e. NextJS)
Users of create-react-app that want to avoid ejecting their app can use this package indirectly by using react-app-rewire-inline-import-graphql-ast
.gql
/.graphql
filesThis 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.
.gql
/.graphql
files#import "./fragment.graphql"
.js
/.jsx
filesquery { test }
) and named (query named { test }
) operationsimport anyName from './file.graphql'
note: when multiple operation exist in one file, the first is used as the default export
import { first, second as secondQuery } from './file.graphql'
import * as ops from './file.graphql'
(example usage: graphql(ops.third)
)import firstQuery, * as ops from './file.graphql'
File for examples above:
query first {
test1
}
mutation second {
test2
}
subscription third {
test3
}
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)
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)
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.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.
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.
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.
This package started out as a modified version of babel-plugin-inline-import
v2.3.6 (March 30, 2018)
FAQs
Babel plugin to make .gql/.graphql files importable
The npm package babel-plugin-inline-import-graphql-ast receives a total of 349 weekly downloads. As such, babel-plugin-inline-import-graphql-ast popularity was classified as not popular.
We found that babel-plugin-inline-import-graphql-ast demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.