React Transmit
Relay-inspired library based on Promises instead of GraphQL.
Inspired by: Building the Facebook Newsfeed with Relay (React blog)
Features
- API similar to the official Relay API, adapted for Promises.
- Higher-order Component (HoC) syntax is great for functional-style React.
- Composable Promise-based queries using fragments.
- Isomorphic architecture supports server-side rendering.
- Also works with React Native!
Installation
# For web or Node:
npm install react-transmit
# For React Native:
npm install react-transmit-native
Usage
Newsfeed.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());
}
}
});
Documentation
See DOCS.md
Community
Let's start one together! After you ★Star this project, follow me @Ryguon Twitter.
License
BSD 3-Clause license. Copyright © 2015, Rick Wong. All rights reserved.
-
react中的状态机 by Shawn McKay 肖恩·麦凯(Shawn McKay) 在基于状态图的状态机上使用React的模式 (Patterns for using React with Statechart-based state machines) Statecharts and state machines offer a promising path for designing a
-
前言 学习React不久，觉得实战才是检验自己学习程度的最好方法，也顺便加深一下自己对React的理解，于是做了这么一个小项目分享一下。 技术栈 react react-router react-redux less 预览图 基本项目搭建 node开发环境 安装依赖： yarn 项目启动： yarn start 涉及到第三方API接口，小伙伴们可以自己去接口地址申请一个appkey，毕竟请求次数也
-
React在前端领域开启了一个新的时代。随着Facebook发布并开源React，它迅速成为大量技术公司 运用在生产环境中的一款流行的库。在本文中，我们将会讨论的是一个全新的React附属框架——Relay。 React中数据获取存在的问题 由于React正在变得越发流行，使用React构建的项目的规模和复杂度也随之增加。 由于React只是一个视图层的库，这使得某些团队需要在不同的基础设施上构建
-
(1) Suspense的使用： import React,{ Suspense } from "react"; const LazyComponent = React.lazy(() => import('./LazyComponent')); function MyComponent() { return ( <div className='box'> <Suspen
-
react脚手架umi中跳转路由带值 //父页面传递值 transmit = (record) => { this.props.dispatch( routerRedux.push({ pathname: `/workOrderDetail/index`, state: { processid: this.state.pro
-
问题内容： 我注意到可以这样导入： …或像这样： 第一个导入模块中的所有内容（请参阅：导入整个模块的内容） 第二个仅导入模块导出（请参阅：导入默认值） 似乎这两种方法是不同的，并且根本上是不兼容的。 为什么它们都起作用？ 请参考源代码并解释该机制…我有兴趣了解其工作原理。 ES6常规模块信息回答了该问题。 我在问使模块像这样工作的机制。在这里，它似乎与源代码中的 “ hacky”导出机制有关，但尚
-
这篇快速上手指南会教你如何将TypeScript与React结合起来使用。 在最后，你将学到： 使用TypeScript和React创建工程 使用TSLint进行代码检查 使用Jest和Enzyme进行测试，以及 使用Redux管理状态 我们会使用create-react-app工具快速搭建工程环境。 这里假设你已经在使用Node.js和npm。 并且已经了解了React的基础知识。 我们之所以使
-
我已经改用react Native制作跨平台应用程序（虽然没有制作）。我只是想要一个答案，我的问题，反应和反应之间的区别。我在网上搜索了一下，但没有找到合适的答案。
-
问题内容： 与 哪个更好，为什么？ 还是除了以后编写更少的代码外没有其他区别？ 写作是否意味着只导入Component对象？ 问题答案： 让您代替。它减少了React名称空间的键入和重复，这通常是一种理想的现代编码约定。 此外，Webpack 2和Rollup之类的工具会“摇晃”，这意味着任何未使用的导出都不会捆绑到您的最终代码中。使用/，您可以保证所有React的源代码都将被捆绑。使用，某些工具
-
本文向大家介绍react-native 启动React Native Packager，包括了react-native 启动React Native Packager的使用技巧和注意事项，需要的朋友参考一下 示例 在最新版本的React Native上，无需运行打包程序。它将自动运行。 默认情况下，这将在端口8081上启动服务器。要指定服务器所在的端口
-
我正在使用“React admin”创建一个管理界面（前端）。我正在使用spring boot作为我的REST API。我的React应用程序的url是：“http://localhost:3000”。我的spring boot API的url是：“http://localhost:8080”。 下面是CORS配置的spring boot代码，它在一个单独的类中，称为CORSCONFIG： 下面是