Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vitorluizc/graphql-raw-loader
:meat_on_bone: With Webpack, loads GraphQL files as raw strings and handle it's import directive & comment statement.
https://github.com/vitorluizc/graphql-raw-loader
graphql webpack webpack-loader
Last synced: 8 days ago
JSON representation
:meat_on_bone: With Webpack, loads GraphQL files as raw strings and handle it's import directive & comment statement.
- Host: GitHub
- URL: https://github.com/vitorluizc/graphql-raw-loader
- Owner: VitorLuizC
- License: mit
- Created: 2018-02-28T14:40:26.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-03T03:34:24.000Z (almost 2 years ago)
- Last Synced: 2024-11-07T19:05:07.364Z (8 days ago)
- Topics: graphql, webpack, webpack-loader
- Language: JavaScript
- Homepage:
- Size: 1.17 MB
- Stars: 19
- Watchers: 3
- Forks: 2
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# GraphQL raw loader
[![Build Status][3]][4]
Load GraphQL files as raw strings and handle it's import directive & comment statement.
## Installation
Install it using NPM/Yarn.
```sh
# using NPM
npm i -D graphql-raw-loader
# using Yarn
yarn add graphql-raw-loader --dev
```
## Configuration
Add graphql-raw-loader to your webpack configuration:
```js
module.exports = {
// ...
module: {
rules: [
{
test: /\.(graphql|gql)$/,
loader: 'graphql-raw-loader'
}
]
}
}
```
## Usage example
```gql
fragment UserProfile on User {
# Some fields.
}
```
```gql
query Users {
users () {
...UserProfile @import(from: "./UserProfile.graphql")
}
}
```
```js
import query from './User.graphl'
export const getUsers = async () => {
const response = await fetch('/api/graphql', {
body: JSON.stringify({ query }),
headers: {
'Content-Type': 'application/json',
},
})
const users = await response.json()
return users
}
```
## Importing on GraphQL
Officially there's no way to import GraphQL files inside each other. Other loaders fixed [it by parsing import statement inside a comment][0].
Also, theres a [thread about implementing import statements][1] on GraphQL. One of the best suggestions is about [using a directive to import fragments][2].
This loader supports both ways. :sunglasses:
### Using comment import statement
```gql
# import "./UserDataFragment.graphql"
# The comment statement above is importing a file with UserDataFragment fragment
# inside it.
query Users {
users (is_active: True) {
data {
...UserDataFragment
}
}
}
```
### Using `@import` directive
```gql
query Users {
users (is_active: True) {
data {
...
}
...PaginationFragment @import(from: "./PaginationFragment.graphql")
# The directive above is importing a file with PaginationFragment fragment
# inside it.
}
}
```
[0]: https://github.com/samsarahq/graphql-loader#import-statements-in-graphql-files
[1]: https://github.com/facebook/graphql/issues/343
[2]: https://github.com/facebook/graphql/issues/343#issuecomment-322622003
[3]: https://travis-ci.org/VitorLuizC/graphql-raw-loader.svg?branch=master
[4]: https://travis-ci.org/VitorLuizC/graphql-raw-loader