在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):RickWong/react-transmit开源软件地址(OpenSource Url):https://github.com/RickWong/react-transmit开源编程语言(OpenSource Language):JavaScript 98.9%开源软件介绍(OpenSource Introduction):React TransmitRelay-inspired library based on Promises instead of GraphQL. Inspired by: Building the Facebook Newsfeed with Relay (React blog) Features
Installation # For web or Node:
npm install react-transmit
# For React Native:
npm install react-transmit-native UsageNewsfeed.js (read the comments) import React from "react";
import Transmit from "react-transmit"; // Import Transmit.
import Story from "./Story";
const Newsfeed = React.createClass({
render () {
const {stories} = this.props; // Fragments are guaranteed.
return <div>{stories.map(story => <Story story={story} />)}</div>;
}
});
// Higher-order component that will fetch data for the above React component.
export default Transmit.createContainer(Newsfeed, {
initialVariables: {
count: 10 // Default variable.
},
fragments: {
// Fragment names become the Transmit prop names.
stories ({count}) {
// This "stories" query returns a Promise composed of 3 other Promises.
return Promise.all([
Story.getFragment("story", {storyId: 1}),
Story.getFragment("story", {storyId: 2}),
Story.getFragment("story", {storyId: 3})
]);
},
somethingDeferred () {
// Return the promise wrapped in a function to mark this fragment as non-critical.
return () => Promise.resolve(true);
}
}
}); Story.js (read the comments) import React from "react";
import Transmit from "react-transmit"; // Import Transmit.
const Story = React.createClass({
render () {
const {story} = this.props; // Fragments are guaranteed.
return <p>{story.content}</p>;
}
});
export default Transmit.createContainer(Story, {
fragments: {
// This "story" fragment returns a Fetch API promise.
story ({storyId}) {
return fetch("https://some.api/stories/" + storyId).then(res => res.json());
}
}
}); DocumentationSee DOCS.md CommunityLet's start one together! After you ★Star this project, follow me @Rygu on Twitter. LicenseBSD 3-Clause license. Copyright © 2015, Rick Wong. All rights reserved. |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论