{"id":13437914,"url":"https://github.com/RickWong/react-transmit","last_synced_at":"2025-03-19T18:31:07.415Z","repository":{"id":29170630,"uuid":"32701212","full_name":"RickWong/react-transmit","owner":"RickWong","description":"Relay-inspired library based on Promises instead of GraphQL.","archived":true,"fork":false,"pushed_at":"2017-07-28T22:04:37.000Z","size":158,"stargazers_count":1314,"open_issues_count":22,"forks_count":61,"subscribers_count":38,"default_branch":"master","last_synced_at":"2024-10-20T07:20:12.001Z","etag":null,"topics":["component-driven","graphql","javascript","promises","react","relay"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RickWong.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-03-22T23:31:41.000Z","updated_at":"2024-09-23T10:35:30.000Z","dependencies_parsed_at":"2022-08-17T18:35:07.319Z","dependency_job_id":null,"html_url":"https://github.com/RickWong/react-transmit","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RickWong%2Freact-transmit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RickWong%2Freact-transmit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RickWong%2Freact-transmit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RickWong%2Freact-transmit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RickWong","download_url":"https://codeload.github.com/RickWong/react-transmit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221592669,"owners_count":16849021,"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":["component-driven","graphql","javascript","promises","react","relay"],"created_at":"2024-07-31T03:01:01.176Z","updated_at":"2024-10-27T20:30:49.765Z","avatar_url":"https://github.com/RickWong.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized","JavaScript","Code Design"],"sub_categories":["Uncategorized","Communication with server"],"readme":"![](http://i.imgur.com/X3JE4Ev.png?1)\n\n[View live demo](https://edealer.nl/react-transmit/) \n\n# React Transmit\n\n[Relay](https://facebook.github.io/relay/)-inspired library based on Promises instead of GraphQL.\n\nInspired by: [Building the Facebook Newsfeed with Relay](http://facebook.github.io/react/blog/2015/03/19/building-the-facebook-news-feed-with-relay.html) (React blog)\n\n![version](https://img.shields.io/npm/v/react-transmit.svg) ![license](https://img.shields.io/npm/l/react-transmit.svg) [![Package Quality](http://npm.packagequality.com/shield/react-transmit.svg)](http://packagequality.com/#?package=react-transmit) ![npm installs](https://img.shields.io/npm/dt/react-transmit.svg) ![downloads](https://img.shields.io/github/downloads/RickWong/react-transmit/latest/total.svg)\n\n\n## Features\n\n- API similar to the official Relay API, adapted for Promises.\n- Higher-order Component (HoC) syntax is great for functional-style React.\n- Composable Promise-based queries using fragments.\n- Isomorphic architecture supports server-side rendering.\n- Also works with React Native!\n\n## Installation\n\n```bash\n\t# For web or Node:\n\tnpm install react-transmit\n\t\n\t# For React Native:\n\tnpm install react-transmit-native\n```\n\n## Usage\n\n**Newsfeed.js** (read the comments)\n\n````js\nimport React    from \"react\";\nimport Transmit from \"react-transmit\";  // Import Transmit.\nimport Story    from \"./Story\";\n\nconst Newsfeed = React.createClass({\n\trender () {\n\t\tconst {stories} = this.props;  // Fragments are guaranteed.\n\n\t\treturn \u003cdiv\u003e{stories.map(story =\u003e \u003cStory story={story} /\u003e)}\u003c/div\u003e;\n\t}\n});\n\n// Higher-order component that will fetch data for the above React component.\nexport default Transmit.createContainer(Newsfeed, {\n\tinitialVariables: {\n\t\tcount: 10  // Default variable.\n\t},\n\tfragments: {\n\t\t// Fragment names become the Transmit prop names.\n\t\tstories ({count}) {\n\t\t\t// This \"stories\" query returns a Promise composed of 3 other Promises.\n\t\t\treturn Promise.all([\n\t\t\t\tStory.getFragment(\"story\", {storyId: 1}),\n\t\t\t\tStory.getFragment(\"story\", {storyId: 2}),\n\t\t\t\tStory.getFragment(\"story\", {storyId: 3})\n\t\t\t]);\n\t\t},\n\t\tsomethingDeferred () {\n\t\t\t// Return the promise wrapped in a function to mark this fragment as non-critical.\n\t\t\treturn () =\u003e Promise.resolve(true);\n\t\t}\n\t}\n});\n````\n**Story.js** (read the comments)\n\n````js\nimport React    from \"react\";\nimport Transmit from \"react-transmit\";  // Import Transmit.\n\nconst Story = React.createClass({\n\trender () {\n\t\tconst {story} = this.props; // Fragments are guaranteed.\n\t\t\n\t\treturn \u003cp\u003e{story.content}\u003c/p\u003e;\n\t}\n});\n\nexport default Transmit.createContainer(Story, {\n\tfragments: {\n\t\t// This \"story\" fragment returns a Fetch API promise.\n\t\tstory ({storyId}) {\n\t\t\treturn fetch(\"https://some.api/stories/\" + storyId).then(res =\u003e res.json());\n\t\t}\n\t}\n});\n````\n\n## Documentation\n\nSee [DOCS.md](https://github.com/RickWong/react-transmit/blob/master/DOCS.md)\n\n## Community\n\nLet's start one together! After you ★Star this project, follow me [@Rygu](https://twitter.com/rygu)\non Twitter.\n\n## License\n\nBSD 3-Clause license. Copyright © 2015, Rick Wong. All rights reserved.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRickWong%2Freact-transmit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FRickWong%2Freact-transmit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRickWong%2Freact-transmit/lists"}