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 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.
Prior to v1.2.0, fragments (#import statements) are not supported
Replaces graphql-tag/loader
in projects where Webpack is unavailable(i.e. NextJS)
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.
yarn add -D babel-plugin-inline-import-graphql-ast
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:
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)
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:
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
This package is a modified version of babel-plugin-inline-import
v1.3.1
Test version(debugging Windows problems), published as @winfix tag
First working version on Windows, non-functional on Mac/Linux
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.