Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ooflorent/babel-plugin-graphql
Babel plugin that compile GraphQL tagged template strings
https://github.com/ooflorent/babel-plugin-graphql
Last synced: about 1 month ago
JSON representation
Babel plugin that compile GraphQL tagged template strings
- Host: GitHub
- URL: https://github.com/ooflorent/babel-plugin-graphql
- Owner: ooflorent
- License: mit
- Archived: true
- Created: 2015-04-23T12:33:04.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2015-11-04T03:17:57.000Z (about 9 years ago)
- Last Synced: 2024-10-16T02:02:53.600Z (about 2 months ago)
- Language: JavaScript
- Homepage:
- Size: 210 KB
- Stars: 64
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-graphql - babel-plugin-graphql - Babel plugin that compile GraphQL tagged template strings. (Libraries / JavaScript Libraries)
- awesome-graphql - babel-plugin-graphql - Babel plugin that compile GraphQL tagged template strings. (Implementations / JavaScript/TypeScript)
- awesome-graphql - babel-plugin-graphql - Babel plugin that compile GraphQL tagged template strings. (Libraries / JavaScript Libraries)
README
# babel-plugin-graphql
> Babel plugin that compile GraphQL tagged template strings.
_Issues related to GraphQL parsing should be reporter on `graphql-parser` [issue-tracker][graphql-parser-gh]._
## Install
```sh
npm install --save-dev babel-plugin-graphql
```
## Usage
Run:
```sh
babel --plugins graphql script.js
```
Or add the plugin to your `.babelrc` configuration:
```json
{
"plugins": [ "graphql" ]
}
```
__Note:__ Due to current API limitations you need to enable `es7.objectRestSpread` transformer or _stage 1_ transformers.
## Example
The plugin will compile the following code:
```js
const IMAGE_WIDTH = 80
const IMAGE_HEIGHT = 80
const PostFragment = graphql`
{
post {
title,
published_at
}
}
`
const UserQuery = graphql`
{
user(id: ) {
nickname,
avatar(width: ${IMAGE_WIDTH}, height: ${IMAGE_HEIGHT}) {
url
},
posts(first: ) {
count,
edges {
node {
${ PostFragment() }
}
}
}
}
}
`
```
into:
```js
var IMAGE_WIDTH = 80;
var IMAGE_HEIGHT = 80;
var PostFragment = function PostFragment(params) {
return {
fields: {
post: {
fields: {
title: {},
published_at: {}
}
}
}
};
};
var UserQuery = function UserQuery(params) {
return {
fields: {
user: {
params: {
id: params.id
},
fields: {
nickname: {},
avatar: {
params: {
width: IMAGE_WIDTH,
height: IMAGE_HEIGHT
},
fields: {
url: {}
}
},
posts: {
params: {
first: params.count
},
fields: {
count: {},
edges: {
fields: {
node: {
fields: _extends({}, PostFragment().fields)
}
}
}
}
}
}
}
}
};
};
```
[graphql-parser-gh]: https://github.com/ooflorent/graphql-parser/issues