---
visibility: public
---

# Relay

**repo:** [expede/awesome-relay](https://github.com/expede/awesome-relay)  
**category:** [[front-end-development|Front-End Development]]
**related:** [[redux|Redux]] · [[react|React]] · [[next-js|Next Js]]

---

# Awesome Relay [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)
Awesome resources for [Relay](https://github.com/facebook/relay), based on the [Awesome](https://github.com/sindresorhus/awesome/) project

# Table of Contents
- [Learning Resources](#[learning](/@harrisonqian/awesome/wiki/programming-languages/learning)-resources)
  - [Documentation](#documentation)
  - [FAQs](#faqs)
  - [Tutorials](#tutorials)
  - [Overviews](#overviews)
  - [Example Implementations](#example-implementations)
  - [Lists of Lists](#lists-of-lists)
- [Ecosystem](#ecosystem)
  - [Libraries & Packages](#libraries--packages)
  - [Tooling](#tooling)
  - [Starter Kits](#starter-kits)
- [Relay-Specific Server Support](#relay-specific-server-support)
  - [Go](#go)
  - [JavaScript](#javascript)
  - [Python](#python)
  - [Ruby](#ruby)
    - [Rails](#rails)
  - [Scala](#scala)
- [Testing](#testing)

# Learning Resources
## Documentation
- [Official Docs](https://facebook.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/relay/docs/getting-started.html#content) - Official Relay documentation.

## FAQs
- [Unofficial Relay FAQ](https://gist.[github](/@harrisonqian/awesome/wiki/development-environment/github).com/wincent/598fa75e22bdfa44cf47) - Common questions answered! Relay resources are scarce at the moment, so this is very helpful if you get stuck.

## Tutorials
- [Getting Started with Relay](https://auth0.com/blog/2015/10/06/getting-started-with-relay/) - One of the few detailed walk throughs of hand-on Relay.
- [Relay 101: Building A Hacker News Client](https://medium.com/@clayallsopp/relay-101-building-a-hacker-news-client-bb8b2bdc76e6#.1i64q1pf9) - A complete workable example.
  - [Relay 102: Mutations](https://medium.com/@clayallsopp/relay-102-mutations-d8b471a4730e#.i9vuv3vxl) - A follow up to "Relay 101" concentrating on mutations.
- [Facebook Relay talk - Lunch and Learn session](https://www.youtube.com/watch?v=sP3n-nht0Xo) - Walkthrough of building a simple app, and demonstration of [GraphiQL](https://github.com/graphql/graphiql).
- [A Beginner's Guide to Relay Mutations](http://blog.pathgather.com/blog/a-beginners-guide-to-relay-mutations) - Mutations in depth.
- [Learn Relay](https://learnrelay.org/) - Shows you how to make a Pokemon-themed CRUD app, providing a personal, cloud-based [GraphQL](/@harrisonqian/awesome/wiki/miscellaneous/graphql) backend so you can focus on the client-side code. 

## Overviews
- [React Data Fetching with Relay](http://www.sitepoint.com/react-data-fetching-with-relay/) - Clear conceptual overview of Relay's moving parts and magic.
- [Joseph Savona - Relay: An Application Framework For React](https://www.youtube.com/watch?v=IrgHurBjQbg) - Conceptual overview of Relay from the Facebook team.
- [F8 2015 - [React](/@harrisonqian/awesome/wiki/front-end-development/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](/@harrisonqian/awesome/wiki/front-end-development/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](https://www.youtube.com/watch?v=sP3n-nht0Xo) - Walkthrough of building a simple app, and demonstration of [GraphiQL](https://github.com/graphql/graphiql).
- [React with Relay and [GraphQL](/@harrisonqian/awesome/wiki/miscellaneous/graphql) with Andrew Smith](https://www.youtube.com/watch?v=Cfna8gwt9h8) - High level overview of Relay and [GraphQL](/@harrisonqian/awesome/wiki/miscellaneous/graphql), with some useful discussion from the audience. Some discussion of other front-end [frameworks](/@harrisonqian/awesome/wiki/front-end-development/frameworks), as well.
- [Relay for Visual Learners](http://sgwilym.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/relay-visual-learners/) - Very clear set of diagrams laying out how the different parts of Relay relate to each other.
- [Relay: Seamless Syncing For React](http://www.slideshare.net/BrooklynZelenka/relay-seamless-syncing-for-[react](/@harrisonqian/awesome/wiki/front-end-development/react)-vanjs) - 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](https://code-cartoons.com/a-cartoon-intro-to-facebook-s-relay-part-1-3ec1a127bca5)
  - [Part 2: Fetching data from the server](https://code-cartoons.com/a-cartoon-intro-to-facebook-s-relay-part-2-d4a2435aee59)
  - [Part 3: Syncing changes back up to the server](https://code-cartoons.com/a-cartoon-intro-to-facebook-s-relay-part-3-9d8fcf8db670)
  - [Part 4: How it all fits together](https://code-cartoons.com/a-cartoon-intro-to-facebook-s-relay-part-4-aef7d819a8ed)
 
## Example Implementations
- [Relay TODO MVC](https://github.com/taion/relay-todomvc) - The classic TODO example app, written with Relay.
- [`relay-chat`](https://github.com/transedward/relay-chat) - Relay with routing and pagination.
- [`koa-[graphql](/@harrisonqian/awesome/wiki/miscellaneous/graphql)-relay-example`](https://github.com/chentsulin/koa-graphql-relay-example) - "TODO" app with [`koa-graphql`](https://github.com/chentsulin/koa-graphql) and `relay`.
- [`todomvc-relay-go`](https://github.com/sogko/todomvc-relay-go) - Relay TodoMVC app, driven by a Golang [GraphQL](/@harrisonqian/awesome/wiki/miscellaneous/graphql) backend.

## Lists of Lists
- [Relay and [GraphQL](/@harrisonqian/awesome/wiki/miscellaneous/graphql) Introduction Materials](https://quip.com/oLxzA1gTsJsE)

# Ecosystem
## Libraries & Packages
- [`[graphql](/@harrisonqian/awesome/wiki/miscellaneous/graphql)-relay-js`](https://github.com/graphql/graphql-relay-js) - Simplifies creating a JS GraphQL server for `[react](/@harrisonqian/awesome/wiki/front-end-development/react)-relay`.
- [Babel Relay Plugin](https://www.npmjs.com/package/babel-relay-plugin) - Use Relay the latest ES6+ syntax.
- [`[react](/@harrisonqian/awesome/wiki/front-end-development/react)-router-relay`](https://github.com/relay-tools/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](https://medium.com/@cpojer/relay-and-routing-36b5439bad9#.h91614i65) - 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`](https://www.npmjs.com/package/relay-nested-routes) - Generate nested routes that reflect nested data. Helpful for managing deep data.
  - [`isomorphic-relay-router`](https://github.com/denvned/isomorphic-relay-router) - Server side rendering support for `[react](/@harrisonqian/awesome/wiki/front-end-development/react)-router-relay`.
- [`relay-decorator`](https://github.com/4Catalyzer/relay-decorators) - Simply syntax for Relay [containers](/@harrisonqian/awesome/wiki/platforms/containers) with ES7 decorators (`@` syntax)
- [`recompose-relay`](https://www.npmjs.com/package/recompose-relay) - Ease composition of Relay [containers](/@harrisonqian/awesome/wiki/platforms/containers) by currying and providing the component after the container.
- [`relay-local-schema`](https://github.com/relay-tools/relay-local-schema) - Use a local schema; no need for a remote [GraphQL](/@harrisonqian/awesome/wiki/miscellaneous/graphql) server.
- [`[react](/@harrisonqian/awesome/wiki/front-end-development/react)-native-relay`](https://github.com/lenaten/react-native-relay) - Use Relay with [React Native](/@harrisonqian/awesome/wiki/platforms/react-native).
  - May be supported [out of the box](https://github.com/facebook/relay/issues/26) in the future.
- [`relay-sink`](https://github.com/acdlite/relay-sink) - Use Relay to fetch and store data outside of a [React](/@harrisonqian/awesome/wiki/front-end-development/react) component.
- [`babel-plugin-flow-relay-query`](https://github.com/guymers/babel-plugin-flow-relay-query) - Convert [Flow](http://flowtype.org) types into Relay fragments.
- [`sequelize-relay`](https://github.com/MattMcFarland/sequelize-relay) - Make Relay compatible with [`sequelize`](https://github.com/sequelize/sequelize).
- [`relay-[mongodb](/@harrisonqian/awesome/wiki/databases/mongodb)-connection`](https://github.com/mikberg/relay-mongodb-connection) - Create Relay connections from [MongoDB](/@harrisonqian/awesome/wiki/databases/mongodb) cursors.
- [`relay-composite-network-layer`](https://github.com/eyston/relay-composite-network-layer) - Compose your Relay [Network Layer](/@harrisonqian/awesome/wiki/programming-languages/network-layer) of many different Network Layers each with their own schema.
- [`[react](/@harrisonqian/awesome/wiki/front-end-development/react)-relay-network-layer`](https://github.com/nodkz/react-relay-network-layer) - A [Network Layer](/@harrisonqian/awesome/wiki/programming-languages/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](https://github.com/graphql/graphiql) - A library to introspect [GraphQL](/@harrisonqian/awesome/wiki/miscellaneous/graphql), test queries and mutations.
  - [GraphiQL App](https://github.com/skevy/graphiql-app) - A standalone app for viewing [GraphQL](/@harrisonqian/awesome/wiki/miscellaneous/graphql), introspection docs, and [testing](/@harrisonqian/awesome/wiki/testing/testing) queries/mutations. Invaluable for debugging your Relay app.
- [`relay-local-schema`](https://github.com/relay-tools/relay-local-schema) - Use a local schema; no need for a remote [GraphQL](/@harrisonqian/awesome/wiki/miscellaneous/graphql) server.
- [Babel Relay Plugin](https://www.npmjs.com/package/babel-relay-plugin) - Use Relay the latest ES6+ syntax.

## Starter Kits
- [Relay Skeleton](https://github.com/fortruce/relay-skeleton) - Relay project skeleton.
- [Relay Starter Kit](https://github.com/relayjs/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](https://github.com/kriasoft/nodejs-api-starter) - Boilerplate and tooling for building data APIs with [Node.js](/@harrisonqian/awesome/wiki/platforms/node-js), [GraphQL](/@harrisonqian/awesome/wiki/miscellaneous/graphql) and Relay
- [Simple Relay Starter](https://github.com/mhart/simple-relay-starter) - A [Browserify](/@harrisonqian/awesome/wiki/front-end-development/browserify) version of the [Relay Starter Kit](https://github.com/relayjs/relay-starter-kit).
- [UniversalRelayBoilerplate](https://github.com/codefoundries/UniversalRelayBoilerplate)
Boilerplate + examples for React Native (iOS, Android), React (isomorphic, Material-UI), Relay, GraphQL, JWT, Node.js, Apache Cassandra.
- [Relay on [Rails](/@harrisonqian/awesome/wiki/back-end-development/rails) Starter Kit](https://github.com/nethsix/relay-on-rails) - A barebones starter kit for Relay application on [Rails](/@harrisonqian/awesome/wiki/back-end-development/rails) server. Just clone and tweak!
- [Relay Fullstack](https://github.com/lvarayut/relay-fullstack) - Relay Starter Kit integrated with Relay, Express, Webpack, Babel, [Material Design](/@harrisonqian/awesome/wiki/front-end-development/material-design) Lite, and [PostCSS](/@harrisonqian/awesome/wiki/front-end-development/postcss).

# Relay-Specific Server Support
## Go
- [Go Relay](https://github.com/graphql-go/relay) - A Go/Golang library to help construct a [graphql](/@harrisonqian/awesome/wiki/miscellaneous/graphql)-go server supporting [react](/@harrisonqian/awesome/wiki/front-end-development/react)-relay.
- [`todomvc-relay-go`](https://github.com/sogko/todomvc-relay-go) - React/Relay TodoMVC app, driven by a Golang [GraphQL](/@harrisonqian/awesome/wiki/miscellaneous/graphql) backend.

## JavaScript
- [`[graphql](/@harrisonqian/awesome/wiki/miscellaneous/graphql)-relay-js`](https://github.com/graphql/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`](https://github.com/graphql-python/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)`](https://github.com/rmosolgo/graphql-relay-ruby) - Relay helpers for GraphQL & Ruby.

### Rails
- [GraphQL and Relay on [Rails](/@harrisonqian/awesome/wiki/back-end-development/rails) — First relay powered [react](/@harrisonqian/awesome/wiki/front-end-development/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](https://medium.com/@khor/relay-facebook-on-[rails](/@harrisonqian/awesome/wiki/back-end-development/rails)-8b4af2057152#.5hjih9wms) - A brief example of Relay with Rails, complete with several diagrams to aid in comprehension.
- [Relay on [Rails](/@harrisonqian/awesome/wiki/back-end-development/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`](https://github.com/sangria-graphql/sangria-relay) - Relay support for [Sangria](http://sangria-[graphql](/@harrisonqian/awesome/wiki/miscellaneous/graphql).org).

# Testing
- [Writing Simple Unit Tests with Relay](https://medium.com/@mikaelberg/writing-simple-unit-tests-with-relay-707f19e90129) - An early first look at [testing](/@harrisonqian/awesome/wiki/testing/testing) Relay.
