Relay Subscriptions
Subscription support for Relay Classic.
Documentation
Guide
Installation
$ npm i -S react react-relay babel-relay-plugin$ npm i -S relay-subscriptions
API)
Network layer (To use Relay Subscriptions, you need to provide a network layer with subscription support. This network layer needs to implement a sendSubscription
method that takes a subscription request, calls the observer methods on the request when the subscription updates, and returns a disposable for tearing down the subscription.
A simple network layer that uses Socket.IO as the underlying transport looks like:
;; DefaultNetworkLayer { super...args; thissocket = ; thisrequests = Object; thissocket; } { const id = request; thisrequestsid = request; thissocket; return { thissocket; } ; }
For a full example, see the network layer in the TodoMVC example.
If your server uses GraphQL.js, graphql-relay-subscription provides helpers for implementing subscriptions. For a basic example, see the server and the schema in the TodoMVC example.
API)
Environment (Instead of using a standard Relay.Environment
, use a RelaySubscriptions.Environment
. This environment class adds subscription support to the standard Relay environment.
; ; const environment = ;environment;
API)
Subscriptions (Subclass the Subscription
class to define subscriptions. This base class is similar to Relay.Mutation
. A basic subscription looks like:
;; ; static fragments = Relay.QL` fragment on Widget { id } ` ; { return Relay.QL` subscription { updateWidget(input: $input) { widget { } } } `; } { return type: 'FIELDS_CHANGE' fieldIDs: widget: thispropswidgetid ; } { return id: thispropswidgetid ; }
Due to an open issue (#12), for a RANGE_ADD
subscription, you must manually request the __typename
field on the edge in the payload.
For full examples, see the subscriptions in the TodoMVC example.
API)
Containers (For components with subscriptions, use RelaySubscriptions.createContainer
instead of Relay.createContainer
. Define your Relay fragments normally, including the fragments for any subscriptions you need, then define a subscriptions
array of functions that create the desired subscriptions from the component's props.
;;; ; Component /* ... */
If you want to manually manage your subscription, the container also adds a subscribe
method on props.relay
, which takes a Subscription
and an optional observer, and returns a disposable for tearing down the subscription.
TODO
Credits
Big thanks to @taion for cleaning up my mess, creating a really nice API and these amazing docs 🎉