generic-relay 0

Experimental Relay version which doesn't depend on React


####Important: This is an experimental project which will be very likely deprecated when Relay has a clearly defined Relay-Core (See “Define a clear boundary between Relay Core & Relay/React”).


This is a modified version of Relay with the goal to be used without React.

Main changes: - The name is generic-relay and not react-relay. - It doesn’t depend on React anymore and all React related code is removed. - New modules are added to replace RelayContainer et al.

How to use it

Because it’s highly experimental there will be no releases. You have to clone the repo and install it into your project: npm install <path-to-cloned-repo>.

The main idea is, not to depend on any specific view technology, but keep everything else. That means RelayContainer is replaced with GenericRelayContainer and every Container should be paired with a UI-Component which renders the data provided by the Container.


const Container = Relay.createGenericContainer('ContainerName', {
  fragments: {
    someFragment: () => Relay.QL`
       fragment on Example {

The second argument (the Container Specification) is exactly the same as in the normal Relay.createContainer. (See the doc for details).

This container can then be instantiated with a listener function. This callback function is there to inform you about new or changed data.

const updateListener = (state) => {
  if(state.ready) {
    ... is available ... normally render it with the paired UI-Component
const container = new Container(updateListener);

Any container needs a Route and data for every fragment. The data for the fragment comes from the parent component/container. How the data is passed down depends on the view technology.

Initially and anytime the input for the component changes, you have to call update:

const dataFromParentComponent = ...
const route = ...
starWarsApp.update({route: route, fragmentInput: dataFromParentComponent);

And then when new data is available your listener function is called.

Initial variables for a specific instance can be supplied in the constructor as second argument. They will be merged with the initial variables of the container specifications.

To change variables after that use setVariables(partialVariables). This will trigger a refetch of data (and subsequently the listener is informed).

The root component creates an instance of GenericRelayRootContainer, again with an listener:

const updateListener = (state) => {
  if(state.ready) {
    ... is available ... pass it down in the Component/Container hierarchy

const rootContainer = new Relay.GenericRootContainer(listener);

To initiate data fetching call update with a GenericRelayContainer and Route:

import Container from ....
const route = ...
rootContainer.update(Container, route);

There is a full working example of Relay with Angular in the examples folder: star-wars-angular

Feedback appreciated

If you have any kind of Feedback or Question, please open an Issue or contact me at @andimarek

Original Relay License (by Facebook)

Relay is BSD licensed. Facebook also provide an additional patent grant.

Related Repositories



Experimental Relay version which doesn't depend on React ...



A simple and generic HTTP relay server designed to run inside yaws. ...

Top Contributors

yungsters josephsavona steveluscher kassens wincent yuzhi devknoll cpojer voideanvalue gabelevi zpao dschafer jeffmo taion michaelchum enaqx xuorig knowbody genbit fson andimarek charlieschwabacher plievone denvned bbirand cletusw KyleAMathews ning-github spicyj philcockfield