{"id":13772269,"url":"https://github.com/guymers/babel-plugin-flow-relay-query","last_synced_at":"2026-01-12T05:24:37.365Z","repository":{"id":143845725,"uuid":"41479412","full_name":"guymers/babel-plugin-flow-relay-query","owner":"guymers","description":"Babel plugin which converts Flow types into Relay fragments","archived":false,"fork":false,"pushed_at":"2017-12-15T11:11:36.000Z","size":155,"stargazers_count":37,"open_issues_count":2,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-07T13:51:35.544Z","etag":null,"topics":["apollo-client","babel-plugin","flowtype","relay"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/guymers.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2015-08-27T10:01:54.000Z","updated_at":"2025-04-27T20:31:50.000Z","dependencies_parsed_at":null,"dependency_job_id":"cbec8939-108d-4073-8964-3f476c1d4bcc","html_url":"https://github.com/guymers/babel-plugin-flow-relay-query","commit_stats":null,"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guymers%2Fbabel-plugin-flow-relay-query","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guymers%2Fbabel-plugin-flow-relay-query/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guymers%2Fbabel-plugin-flow-relay-query/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guymers%2Fbabel-plugin-flow-relay-query/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/guymers","download_url":"https://codeload.github.com/guymers/babel-plugin-flow-relay-query/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253518941,"owners_count":21921074,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apollo-client","babel-plugin","flowtype","relay"],"created_at":"2024-08-03T17:01:02.046Z","updated_at":"2026-01-12T05:24:32.327Z","avatar_url":"https://github.com/guymers.png","language":"JavaScript","readme":"# babel-plugin-flow-relay-query\n\nBabel plugin which converts Flow types into GraphQL fragments.\n\n## Installation\n\n```sh\nnpm install --save-dev babel-plugin-flow-relay-query\n```\n\n## Usage\n\nInstead of importing ```babel-relay-plugin```, import ```babel-plugin-flow-relay-query```\n\nReplace\n\n```javascript\nvar getBabelRelayPlugin = require(\"babel-relay-plugin\");\n```\nwith\n\n```javascript\nvar getBabelRelayPlugin = require(\"babel-plugin-flow-relay-query\");\n```\n\n## Example\n\nCreate a marker function called ```generateFragmentFromProps``` or ```generateFragmentFromPropsFor```:\n\n```javascript\ntype FragmentOptions = {\n  name?: string;\n  type?: string;\n  templateTag?: string;\n  directives?: {\n    [name: string]: { [arg: string]: boolean|number|string };\n  };\n}\n\nfunction generateFragmentFromProps(options?: FragmentOptions): Function {}\nfunction generateFragmentFromPropsFor(component: ReactClass\u003c*\u003e, options?: FragmentOptions): Function {}\n```\n\nOr just import one of the ones that are shipped with the plugin:\n\n```javscript\nimport { generateFragmentFromProps } from \"babel-plugin-flow-relay-query/lib/markers\";\nimport { generateFragmentFromPropsFor } from \"babel-plugin-flow-relay-query/lib/markers\";\n```\n\nIf a fragment type is not provided in the options then it will default to the key in the fragments object, capitalized.\n\n```javascript\nimport React from \"react\";\nimport Relay from \"react-relay\";\nimport { generateFragmentFromProps } from \"babel-plugin-flow-relay-query/lib/markers\";\n\ntype ArticleProps = {\n  article: {\n    title: string;\n    posted: string;\n    content: string;\n\n    author: {\n      name: string;\n      email: string;\n    }\n  }\n};\n\nclass Article extends React.Component\u003cvoid, ArticleProps, void\u003e {\n  render() {\n    const { article } = this.props;\n    return (\n      \u003cdiv\u003e\n        \u003cArticleTitle article={article} /\u003e\n        \u003cdiv\u003e{article.author.name} [{article.author.email}]\u003c/div\u003e\n        \u003cdiv\u003e{article.content})\u003c/div\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nexport default Relay.createContainer(Article, {\n  fragments: {\n    article: generateFragmentFromProps(),\n  },\n});\n```\n\nThe article fragment will be transformed into:\n\n```javascript\nexport default Relay.createContainer(Article, {\n  fragments: {\n    article: () =\u003e Relay.QL`\n      fragment on Article {\n        title,\n        posted,\n        content,\n        author {\n          name,\n          email\n        },\n        ${ArticleTitle.getFragment(\"article\")}\n      }\n    `\n  }\n});\n```\n\nAlso supports class properties and functional components:\n\n```javascript\nclass Article extends React.Component {\n  props: ArticleProps;\n  ...\n}\n```\n\n```javascript\nconst Article = ({ article }: ArticleProps) =\u003e (\n  \u003cdiv\u003e\n    \u003cdiv\u003e{article.title} ({article.posted})\u003c/div\u003e\n    \u003cdiv\u003e{article.author.name} [{article.author.email}]\u003c/div\u003e\n    \u003cdiv\u003e{article.content})\u003c/div\u003e\n  \u003c/div\u003e\n);\n```\n\nThis plugin can also create GraphQL strings for Apollo:\n\nFirst set apollo generation options globally:\n\n```javascript\nvar ChildFragmentTransformations = require(\"babel-plugin-flow-relay-query/lib/ChildFragmentTransformations\");\nvar babelRelayPlugin = require(\"babel-plugin-flow-relay-query\");\nconst schema = require(\"??/schema.json\");\nmodule.exports = babelRelayPlugin(schema.data, {}, {\n  defaultTemplateTag: \"gql\",\n  defaultFragmentName: ChildFragmentTransformations.apolloFragmentName,\n  childFragmentTransformations: ChildFragmentTransformations.apollo\n});\n```\n\n```javascript\nimport React from \"react\";\nimport gql from \"graphql-tag\";\nimport { generateFragmentFromPropsFor } from \"babel-plugin-flow-relay-query/lib/markers\";\n\ntype ArticleProps = {\n  article: {\n    title: string;\n    content: string;\n  }\n};\n\nclass Article extends React.Component {\n  props: ArticleProps;\n\n  render() {\n    const { article } = this.props;\n    return (\n      \u003cdiv\u003e\n        \u003cArticleTitle article={article} /\u003e\n        \u003cdiv\u003e{article.author.name} [{article.author.email}]\u003c/div\u003e\n        \u003cArticleBody article={article} /\u003e\n        \u003cFooter /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nArticle.fragments = {\n  article: generateFragmentFromPropsFor(Article)\n};\n\nexport default Article;\n```\n","funding_links":[],"categories":["Libraries \u0026 Packages"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguymers%2Fbabel-plugin-flow-relay-query","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fguymers%2Fbabel-plugin-flow-relay-query","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguymers%2Fbabel-plugin-flow-relay-query/lists"}