Skip to content

Use Relay to fetch and store data outside of a React component

Notifications You must be signed in to change notification settings

acdlite/relay-sink

Repository files navigation

relay-sink

build status npm version

Usage

import { createSink } from 'relay-sink';

const TyrionSink = createSink({
  // Normal Relay Container configuration
  fragments: {
    tyrion: () => Relay.QL`
      fragment on Character {
        name,
        house
      }
    `
  }
});

// A sink is a Relay Container. Compose with parent Relay containers like
// normal. Note that `this.props.tyrion` and `fragments.tyrion` below are not
// the same value — the former points to a value inside Relay's global store,
// while the latter is the actual unwrapped data.
<TyrionSink tyrion={this.props.tyrion} onFragmentUpdate={fragments => {
  expect(fragments.tyrion.name).to.equal('Tyrion');
  expect(fragments.tyrion.house).to.equal('Lannister');

  // Do whatever you want with the data — e.g. dispatch it to a Flux store
  store.dispatch({
    type: UPDATE_TYRION,
    payload: fragments.tyrion
  });
}}/>

About

Use Relay to fetch and store data outside of a React component

Resources

Stars

Watchers

Forks

Packages

No packages published