RickWong / React Transmit
Licence: other
Relay-inspired library based on Promises instead of GraphQL.
Stars: ✭ 1,335
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Transmit
Learnrelay
Learn Relay - A comprehensive introduction to Relay (created by Graphcool)
Stars: ✭ 887 (-33.56%)
Mutual labels: graphql, relay
Graphqlbundle
This bundle provides tools to build a complete GraphQL server in your Symfony App.
Stars: ✭ 628 (-52.96%)
Mutual labels: graphql, relay
Graphql Query Test Mock
Easily mock GraphQL queries in your Relay Modern / Apollo / any-other-GraphQL-client tests.
Stars: ✭ 49 (-96.33%)
Mutual labels: graphql, relay
Graphql Config
One configuration for all your GraphQL tools (supported by most tools, editors & IDEs)
Stars: ✭ 883 (-33.86%)
Mutual labels: graphql, relay
React Firebase Starter
Boilerplate (seed) project for creating web apps with React.js, GraphQL.js and Relay
Stars: ✭ 4,366 (+227.04%)
Mutual labels: graphql, relay
Magiql
🌐 💫 Simple and powerful GraphQL Client, love child of react-query ❤️ relay
Stars: ✭ 45 (-96.63%)
Mutual labels: graphql, relay
Relay Fullstack
☝️🏃 Modern Relay Starter Kit - Integrated with Relay, GraphQL, Express, ES6/ES7, JSX, Webpack, Babel, Material Design Lite, and PostCSS
Stars: ✭ 986 (-26.14%)
Mutual labels: graphql, relay
React App
Create React App with server-side code support
Stars: ✭ 614 (-54.01%)
Mutual labels: graphql, relay
Tkframework
react + relay + redux + saga + graphql + webpack
Stars: ✭ 83 (-93.78%)
Mutual labels: graphql, relay
Js Graphql Intellij Plugin
GraphQL language support for WebStorm, IntelliJ IDEA and other IDEs based on the IntelliJ Platform.
Stars: ✭ 686 (-48.61%)
Mutual labels: graphql, relay
Graphql Crunch
Reduces the size of GraphQL responses by consolidating duplicate values
Stars: ✭ 472 (-64.64%)
Mutual labels: graphql, relay
Lighthouse Utils
An add-on to Lighthouse to auto-generate CRUD actions from types https://github.com/nuwave/lighthouse
Stars: ✭ 26 (-98.05%)
Mutual labels: graphql, relay
Get Graphql Schema
Fetch and print the GraphQL schema from a GraphQL HTTP endpoint. (Can be used for Relay Modern.)
Stars: ✭ 443 (-66.82%)
Mutual labels: graphql, relay
React Starter Kit
React Starter Kit — front-end starter kit using React, Relay, GraphQL, and JAM stack architecture
Stars: ✭ 21,060 (+1477.53%)
Mutual labels: graphql, relay
Ecommerce
A powerful and lightweight eCommerce platform using ReactJs, Graphql, PHP, and Mysql.
Stars: ✭ 28 (-97.9%)
Mutual labels: graphql, promises
Rpg Boilerplate
Relay (React), Postgres, and Graphile (GraphQL): A Modern Frontend and API Boilerplate
Stars: ✭ 62 (-95.36%)
Mutual labels: graphql, relay
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 @Rygu on Twitter.
License
BSD 3-Clause license. Copyright © 2015, Rick Wong. All rights reserved.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].