Relay

repo: expede/awesome-relay
category: Front-End Development related: Redux · React · Next Js

Awesome Relay

Awesome resources for Relay, based on the Awesome project

Table of Contents

• Learning Resources
  • Documentation
  • FAQs
  • Tutorials
  • Overviews
  • Example Implementations
  • Lists of Lists
• Ecosystem
  • Libraries & Packages
  • Tooling
  • Starter Kits
• Relay-Specific Server Support
  • Go
  • JavaScript
  • Python
  • Ruby
    • Rails
  • Scala
• Testing

Learning Resources

Documentation

• Official Docs - Official Relay documentation.

FAQs

• Unofficial Relay FAQ - Common questions answered! Relay resources are scarce at the moment, so this is very helpful if you get stuck.

Tutorials

• Getting Started with Relay - One of the few detailed walk throughs of hand-on Relay.
• Relay 101: Building A Hacker News Client - A complete workable example.
  • Relay 102: Mutations - A follow up to "Relay 101" concentrating on mutations.
• Facebook Relay talk - Lunch and Learn session - Walkthrough of building a simple app, and demonstration of GraphiQL.
• A Beginner's Guide to Relay Mutations - Mutations in depth.
• Learn Relay - Shows you how to make a Pokemon-themed CRUD app, providing a personal, cloud-based GraphQL backend so you can focus on the client-side code.

Overviews

• React Data Fetching with Relay - Clear conceptual overview of Relay's moving parts and magic.
• Joseph Savona - Relay: An Application Framework For React - Conceptual overview of Relay from the Facebook team.
• [F8 2015 - React Native & Relay: Bringing Modern Web Techniques to Mobile](https://www.youtube.com/watch?v=X6YbAKiLCLU) - Overview of Relay, some about the philosophy.
• [Relay - Daniel Dembach - Hamburg React.js Meetup](https://www.youtube.com/watch?v=dvWTxy1eY6s) - A good general overview of Relay, some discussion of alternatives. Common questions are covered in Q&A at the end.
• Facebook Relay talk - Lunch and Learn session - Walkthrough of building a simple app, and demonstration of GraphiQL.
• [React with Relay and GraphQL with Andrew Smith](https://www.youtube.com/watch?v=Cfna8gwt9h8) - High level overview of Relay and GraphQL, with some useful discussion from the audience. Some discussion of other front-end frameworks, as well.
• Relay for Visual Learners - Very clear set of diagrams laying out how the different parts of Relay relate to each other.
• Relay: Seamless Syncing For React - An overview of what Relay is, and some discussion of experience using it in production.
• Cartoon Intro to Facebook's Relay - An overview of how Relay works, complete with illustrations.
  • Part 1: Saying what data you need with GraphQL
  • Part 2: Fetching data from the server
  • Part 3: Syncing changes back up to the server
  • Part 4: How it all fits together

Example Implementations

• Relay TODO MVC - The classic TODO example app, written with Relay.
• relay-chat - Relay with routing and pagination.
• koa-[graphql](/@harrisonqian/awesome/wiki/miscellaneous/graphql)-relay-example - "TODO" app with koa-graphql and relay.
• todomvc-relay-go - Relay TodoMVC app, driven by a Golang GraphQL backend.

Lists of Lists

• [Relay and GraphQL Introduction Materials](https://quip.com/oLxzA1gTsJsE)

Ecosystem

Libraries & Packages

• [graphql](/@harrisonqian/awesome/wiki/miscellaneous/graphql)-relay-js - Simplifies creating a JS GraphQL server for [react](/@harrisonqian/awesome/wiki/front-end-development/react)-relay.
• Babel Relay Plugin - Use Relay the latest ES6+ syntax.
• [react](/@harrisonqian/awesome/wiki/front-end-development/react)-router-relay - [react](/@harrisonqian/awesome/wiki/front-end-development/react)-router bindings for Relay. Greatly simplifies many local state UI uses cases.
  • Relay and Routing - A well-articulated walk through of [react](/@harrisonqian/awesome/wiki/front-end-development/react)-router-relay, and the problems that it solves.
  • relay-nested-routes - Generate nested routes that reflect nested data. Helpful for managing deep data.
  • isomorphic-relay-router - Server side rendering support for [react](/@harrisonqian/awesome/wiki/front-end-development/react)-router-relay.
• relay-decorator - Simply syntax for Relay containers with ES7 decorators (@ syntax)
• recompose-relay - Ease composition of Relay containers by currying and providing the component after the container.
• relay-local-schema - Use a local schema; no need for a remote GraphQL server.
• [react](/@harrisonqian/awesome/wiki/front-end-development/react)-native-relay - Use Relay with React Native.
  • May be supported out of the box in the future.
• relay-sink - Use Relay to fetch and store data outside of a React component.
• babel-plugin-flow-relay-query - Convert Flow types into Relay fragments.
• sequelize-relay - Make Relay compatible with sequelize.
• relay-[mongodb](/@harrisonqian/awesome/wiki/databases/mongodb)-connection - Create Relay connections from MongoDB cursors.
• relay-composite-network-layer - Compose your Relay Network Layer of many different Network Layers each with their own schema.
• [react](/@harrisonqian/awesome/wiki/front-end-development/react)-relay-network-layer - A Network Layer that adds support for query-batching and middlewares. It additionally provides some useful middlewares such as for auth, for logging, etc.

Tooling

• GraphiQL - A library to introspect GraphQL, test queries and mutations.
  • GraphiQL App - A standalone app for viewing GraphQL, introspection docs, and testing queries/mutations. Invaluable for debugging your Relay app.
• relay-local-schema - Use a local schema; no need for a remote GraphQL server.
• Babel Relay Plugin - Use Relay the latest ES6+ syntax.

Starter Kits

• Relay Skeleton - Relay project skeleton.
• Relay Starter Kit - An app that it already set up with a basic setup. Just clone and tweak to suit your needs!
• Node.js API Starter Kit - Boilerplate and tooling for building data APIs with Node.js, GraphQL and Relay
• Simple Relay Starter - A Browserify version of the Relay Starter Kit.
• UniversalRelayBoilerplate Boilerplate + examples for React Native (iOS, Android), React (isomorphic, Material-UI), Relay, GraphQL, JWT, Node.js, Apache Cassandra.
• [Relay on Rails Starter Kit](https://github.com/nethsix/relay-on-rails) - A barebones starter kit for Relay application on Rails server. Just clone and tweak!
• Relay Fullstack - Relay Starter Kit integrated with Relay, Express, Webpack, Babel, Material Design Lite, and PostCSS.

Relay-Specific Server Support

Go

• Go Relay - A Go/Golang library to help construct a graphql-go server supporting react-relay.
• todomvc-relay-go - React/Relay TodoMVC app, driven by a Golang GraphQL backend.

JavaScript

• [graphql](/@harrisonqian/awesome/wiki/miscellaneous/graphql)-relay-js - Simplifies creating a JS GraphQL server for [react](/@harrisonqian/awesome/wiki/front-end-development/react)-relay.

Python

• [graphql](/@harrisonqian/awesome/wiki/miscellaneous/graphql)-relay-py - A library to help construct a graphql-py server supporting [react](/@harrisonqian/awesome/wiki/front-end-development/react)-relay.

Ruby

• [graphql](/@harrisonqian/awesome/wiki/miscellaneous/graphql)-relay-[ruby](/@harrisonqian/awesome/wiki/programming-languages/ruby) - Relay helpers for GraphQL & Ruby.

Rails

• [GraphQL and Relay on Rails — First relay powered react component](https://medium.com/@gauravtiwari/graphql-and-relay-on-rails-first-relay-powered-react-component-cb3f9ee95eca#.c88zcoftn) - Full walk through of a simple Relay setup, including clonable code.
• Relay/GraphQL On Rails - A brief example of Relay with Rails, complete with several diagrams to aid in comprehension.
• [Relay on Rails Starter Kit](https://github.com/nethsix/relay-on-rails) - A barebones starter kit for Relay application on Rails server. Just clone and tweak!

Scala

• sangria-relay - Relay support for Sangria.

Testing

• Writing Simple Unit Tests with Relay - An early first look at testing Relay.