Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/guymers/babel-plugin-flow-relay-query
Babel plugin which converts Flow types into Relay fragments
https://github.com/guymers/babel-plugin-flow-relay-query
apollo-client babel-plugin flowtype relay
Last synced: 3 months ago
JSON representation
Babel plugin which converts Flow types into Relay fragments
- Host: GitHub
- URL: https://github.com/guymers/babel-plugin-flow-relay-query
- Owner: guymers
- License: mit
- Created: 2015-08-27T10:01:54.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-12-15T11:11:36.000Z (about 7 years ago)
- Last Synced: 2024-10-02T09:22:29.728Z (5 months ago)
- Topics: apollo-client, babel-plugin, flowtype, relay
- Language: JavaScript
- Homepage:
- Size: 151 KB
- Stars: 38
- Watchers: 4
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-relay - `babel-plugin-flow-relay-query` - Convert [Flow](http://flowtype.org) types into Relay fragments. (Libraries & Packages)
README
# babel-plugin-flow-relay-query
Babel plugin which converts Flow types into GraphQL fragments.
## Installation
```sh
npm install --save-dev babel-plugin-flow-relay-query
```
## Usage
Instead of importing ```babel-relay-plugin```, import ```babel-plugin-flow-relay-query```
Replace
```javascript
var getBabelRelayPlugin = require("babel-relay-plugin");
```
with
```javascript
var getBabelRelayPlugin = require("babel-plugin-flow-relay-query");
```
## Example
Create a marker function called ```generateFragmentFromProps``` or ```generateFragmentFromPropsFor```:
```javascript
type FragmentOptions = {
name?: string;
type?: string;
templateTag?: string;
directives?: {
[name: string]: { [arg: string]: boolean|number|string };
};
}
function generateFragmentFromProps(options?: FragmentOptions): Function {}
function generateFragmentFromPropsFor(component: ReactClass<*>, options?: FragmentOptions): Function {}
```
Or just import one of the ones that are shipped with the plugin:
```javscript
import { generateFragmentFromProps } from "babel-plugin-flow-relay-query/lib/markers";
import { generateFragmentFromPropsFor } from "babel-plugin-flow-relay-query/lib/markers";
```
If a fragment type is not provided in the options then it will default to the key in the fragments object, capitalized.
```javascript
import React from "react";
import Relay from "react-relay";
import { generateFragmentFromProps } from "babel-plugin-flow-relay-query/lib/markers";
type ArticleProps = {
article: {
title: string;
posted: string;
content: string;
author: {
name: string;
email: string;
}
}
};
class Article extends React.Component {
render() {
const { article } = this.props;
return (
{article.author.name} [{article.author.email}]
{article.content})
);
}
}
export default Relay.createContainer(Article, {
fragments: {
article: generateFragmentFromProps(),
},
});
```
The article fragment will be transformed into:
```javascript
export default Relay.createContainer(Article, {
fragments: {
article: () => Relay.QL`
fragment on Article {
title,
posted,
content,
author {
name,
email
},
${ArticleTitle.getFragment("article")}
}
`
}
});
```
Also supports class properties and functional components:
```javascript
class Article extends React.Component {
props: ArticleProps;
...
}
```
```javascript
const Article = ({ article }: ArticleProps) => (
{article.title} ({article.posted})
{article.author.name} [{article.author.email}]
{article.content})
);
```
This plugin can also create GraphQL strings for Apollo:
First set apollo generation options globally:
```javascript
var ChildFragmentTransformations = require("babel-plugin-flow-relay-query/lib/ChildFragmentTransformations");
var babelRelayPlugin = require("babel-plugin-flow-relay-query");
const schema = require("??/schema.json");
module.exports = babelRelayPlugin(schema.data, {}, {
defaultTemplateTag: "gql",
defaultFragmentName: ChildFragmentTransformations.apolloFragmentName,
childFragmentTransformations: ChildFragmentTransformations.apollo
});
```
```javascript
import React from "react";
import gql from "graphql-tag";
import { generateFragmentFromPropsFor } from "babel-plugin-flow-relay-query/lib/markers";
type ArticleProps = {
article: {
title: string;
content: string;
}
};
class Article extends React.Component {
props: ArticleProps;
render() {
const { article } = this.props;
return (
{article.author.name} [{article.author.email}]
);
}
}
Article.fragments = {
article: generateFragmentFromPropsFor(Article)
};
export default Article;
```