Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/samsarahq/graphql-loader
:cherries: A webpack loader for .graphql documents
https://github.com/samsarahq/graphql-loader
graphql webpack webpack-loader
Last synced: about 2 months ago
JSON representation
:cherries: A webpack loader for .graphql documents
- Host: GitHub
- URL: https://github.com/samsarahq/graphql-loader
- Owner: samsarahq
- Created: 2017-07-21T17:09:55.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-06T19:59:15.000Z (almost 2 years ago)
- Last Synced: 2024-04-15T08:09:11.678Z (5 months ago)
- Topics: graphql, webpack, webpack-loader
- Language: TypeScript
- Homepage:
- Size: 287 KB
- Stars: 62
- Watchers: 47
- Forks: 15
- Open Issues: 35
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome - graphql-loader - :cherries: A webpack loader for .graphql documents (TypeScript)
README
# GraphQL Loader for Webpack
[](https://www.npmjs.com/package/webpack-graphql-loader)
[](https://travis-ci.org/samsarahq/graphql-loader)
A webpack loader for `.graphql` query documents with first class support for **schema validation** and **fragments definitions**. `graphql-loader` works great with [thunder](https://github.com/samsarahq/thunder), [apollo-client](#output-string--document-defaultstring), and anywhere you might want to provide a GraphQL query document in the frontend.
## Installation
```bash
yarn add --dev webpack-graphql-loader # or npm install --save-dev webpack-graphql-loader
```
You will also need to install a copy of [`graphql`](https://www.npmjs.com/package/graphql), which is a peer dependency of this package.
```bash
yarn add --dev graphql # or npm install --save-dev graphql
```
## Configuration
Add `webpack-graphql-loader` to your webpack configuration:
```javascript
module.exports = {
// ...
module: {
rules: [ // or "loaders" for webpack 1.x
{ test: /\.graphql?$/, loader: 'webpack-graphql-loader' }
]
}
}
```
### Specifying options
You can also pass options to the loader via webpack options:
```javascript
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
}
}
]
}
]
}
}
```
### Loader Options
#### schema _(string) (default="")_
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.
#### validate _(boolean) (default=false)_
If `true`, the loader will validate the imported document against your specified `schema` file.
#### output _("string" | "document") (default="string")_
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`](https://github.com/apollographql/graphql-tag#webpack-preprocessing).
#### minify _(boolean) (default=false)_
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.
#### removeUnusedFragments _(boolean) (default=false)_
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](https://github.com/apollographql/graphql-tag/issues/102).
## Import statements in `.graphql` files
The loader supports importing `.graphql` files from other `.graphql` files using an `#import` statement. For example:
`query.graphql`:
```graphql
#import "./fragments.graphql"
query {
...a
...b
}
```
`fragments.graphql`:
```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.