Babel 6 plugin which converts Flow types into Relay fragments.
npm install --save-dev babel-plugin-flow-relay-query
Instead of importing babel-relay-plugin
, import babel-plugin-flow-relay-query
Replace
var getBabelRelayPlugin = require("babel-relay-plugin");
with
var getBabelRelayPlugin = require("babel-plugin-flow-relay-query");
Create a marker function called generateFragmentFromProps
function generateFragmentFromProps(fragmentName?: string): Function {}
If fragmentName
is not provided then it will default to the key in the fragments object, capitalized.
import generateFragmentFromProps from "./generateFragmentFromProps";
type ArticleProps = {
article: {
title: string,
posted: string,
content: string,
author: {
name: string,
email: string
}
}
};
class Article extends React.Component<void, ArticleProps, void> {
render() {
const { article } = this.props;
return (
<div>
<ArticleTitle article={article} />
<div>{article.author.name} [{article.author.email}]</div>
<div>{article.content})</div>
</div>
);
}
}
export default Relay.createContainer(Article, {
fragments: {
article: generateFragmentFromProps(),
},
});
The article fragment will be transformed into:
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:
class Article extends React.Component {
props: ArticleProps;
...
}
const Article = ({ article }: ArticleProps) => (
<div>
<div>{article.title} ({article.posted})</div>
<div>{article.author.name} [{article.author.email}]</div>
<div>{article.content})</div>
</div>
);