Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
webpack-graphql-loader
Advanced tools
A webpack loader for .graphql
query documents with first class support for schema validation and fragments definitions. graphql-loader
works great with thunder, apollo-client, and anywhere you might want to provide a GraphQL query document in the frontend.
yarn add --dev webpack-graphql-loader # or npm install --save-dev webpack-graphql-loader
You will also need to install a copy of graphql
, which is a peer dependency of this package.
yarn add --dev graphql # or npm install --save-dev graphql
Add webpack-graphql-loader
to your webpack configuration:
module.exports = {
// ...
module: {
rules: [ // or "loaders" for webpack 1.x
{ test: /\.graphql?$/, loader: 'webpack-graphql-loader' }
]
}
}
You can also pass options to the loader via webpack options:
module.exports = {
// ...
module: {
rules: [ // or "loaders" for webpack 1.x
{
test: /\.graphql?$/,
use: [
{
loader: 'webpack-graphql-loader',
options: {
// validate: true,
// schema: "./path/to/schema.json",
// removeUnusedFragments: true
// etc. See "Loader Options" below
}
}
]
}
]
}
}
The location of your graphql introspection query schema JSON file. If used with the validate
option, this will be used to validate imported queries and fragments.
If true
, the loader will validate the imported document against your specified schema
file.
Specifies whether or not the imported document should be a printed graphql string, or a graphql DocumentNode
AST. The latter is useful for interop with graphql-tag
.
If true
and the output
option is string
, the loader will strip comments and whitespace from the graphql document strings. This helps to reduce bundled code size.
If true
, the loader will remove unused fragments from the imported document. This may be useful if a query is importing fragments from a file, but does not use all fragments in that file. Also see this issue.
.graphql
filesThe loader supports importing .graphql
files from other .graphql
files using an #import
statement. For example:
query.graphql
:
#import "./fragments.graphql"
query {
...a
...b
}
fragments.graphql
:
fragment a on A {}
fragment b on A {
foo(bar: 1)
}
In the above example, fragments a
and b
will be made available within query.graphql
. Note that all fragments in the imported file should be used in the top-level query, or the removeUnusedFragments
should be specified.
FAQs
webpack graphql loader
The npm package webpack-graphql-loader receives a total of 101,007 weekly downloads. As such, webpack-graphql-loader popularity was classified as popular.
We found that webpack-graphql-loader 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
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.