• Stars
    star
    125
  • Rank 286,335 (Top 6 %)
  • Language
    JavaScript
  • Created about 9 years ago
  • Updated over 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

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
  });
}}/>

More Repositories

1

recompose

A React utility belt for function components and higher-order components.
JavaScript
14,760
star
2

react-fiber-architecture

A description of React's new core algorithm, React Fiber
11,620
star
3

redux-router

Redux bindings for React Router – keep your router state inside your Redux store
JavaScript
2,303
star
4

flummox

Minimal, isomorphic Flux.
JavaScript
1,689
star
5

redux-rx

RxJS utilities for Redux.
JavaScript
1,007
star
6

react-remarkable

A React component for rendering Markdown with remarkable
JavaScript
450
star
7

redux-batched-updates

Batch React updates that occur as a result of Redux dispatches, to prevent cascading renders. See https://github.com/gaearon/redux/issues/125 for more details.
JavaScript
222
star
8

realm

JavaScript
170
star
9

redux-transducers

Transducer utilities for Redux.
JavaScript
130
star
10

json-sass

Transforms a JSON stream into scss syntax Sass.
JavaScript
94
star
11

suspense-ssr-demo

JavaScript
93
star
12

flummox-isomorphic-demo

Demo of how to create isomorphic apps using Flummox and react-router
JavaScript
89
star
13

react-rx-component

Yet another RxJS library for React :) Create container components (also known as smart components) by transforming a sequence of props
JavaScript
82
star
14

jquery.sidenotes

Transform Markdown footnotes into superpowered sidenotes
CoffeeScript
73
star
15

realm-redux

JavaScript
58
star
16

change-emitter

Listen for changes. Like an event emitter that only emits a single event type. Really tiny.
JavaScript
57
star
17

the-react-way

An isomorphic React slide deck, about React.
JavaScript
47
star
18

flpunx

Better than all the other Flux libraries combined!
JavaScript
35
star
19

router

An experiment in functional routing for JavaScript applications.
JavaScript
27
star
20

react-suitcss

Build React components that conform to SUIT CSS naming conventions.
JavaScript
24
star
21

flummox-immutable-store

Flummox store with Immutable.js support for serialization and undo/redo
JavaScript
17
star
22

react-object-fit-cover

A React component that mimics object-fit: cover
JavaScript
12
star
23

sassy-namespaces

Namespaces in Sass, minus the headaches.
CSS
10
star
24

redux-basic-blog-example

JavaScript
6
star
25

react-media-mixin

A React mixin to update state in response to media query events.
JavaScript
6
star
26

andrewphilipclark.com

My personal website/blog
CSS
4
star
27

babel-plugin-react-pure-component

JavaScript
3
star
28

react-focuspoint

A React component for 'responsive cropping' with jQuery FocusPoint.
JavaScript
2
star
29

anthem

Minimal REST framework
JavaScript
2
star
30

todos

JavaScript
1
star