React Relay Rebind
React relay rebind is a component-scope state management for Relay modern & React.
React-Relay-Rebind is a local state managment for React components which use Relay. Focus of React Relay Rebind is to handle data resolved with Relay mutations and provide it to a component. Component will recieve a state prop for each rebinded mutation. The API declaratively passes down state to components thus simplifying the data flow. The common usecase is non-persistent/local data (e.g UI state) which does not belong and does not deserve to be mixed with persistent data.
⚠️ Warning: Do not use in production! RRR is highly experimental, please stand by until 1.0.0 is released.
Roadmap to production
- Automagically provide dispatch to commitMutation
- Simplify state configuration
- Subscribe to specific piece of state
- Optional state alias
Installation
Yarn
$ yarn add react-relay-rebind
NPM
$ npm install --save react-relay-rebind
or build from source
$ git clone react-relay-rebind$ cd react-relay-rebind && yarn install$ yarn run build
Usage
Provide dispatch to the commitMutation
; const mutation = graphql` mutation LoginMutation($input: LoginInput!) { login(credentials: $input) { errors { username password } } }`; const loginMutation = { // dispatch is passed as the last argument ;} ;
Rebind mutations with the component
import { rebind } from 'react-relay-rebind';import { loginMutation } from './loginMutation'; class MyComponent extends React.component { handleSubmit(){ this.props.mutations.login(this.props.relay, this.state); } render(){ const { errors } = this.props.login; const usernameClassname = errors.username ? 'has-error' : ''; const passwordClassname = errors.password ? 'has-error' : ''; return ( <div> <input className={usernameClassname} name="username" type="text" onChange={ e => this.setState({ username: e.target.value() }) } value={username} /> <br/> <input className={passwordClassname} name="password" type="password" onChange={ e => this.setState({ password: e.target.value() }) } value={password} /> <br/> <input type="submit" onClick={this.handleSubmit} value="Login"/> </div> }} const states = { login: { mutation: LoginMutation, initialState: { errors: { username: null, password: null, }, }, },};export default rebind(states)(MyComponent);
API Documentation
rebind(states)(component): Component
When rebinding a component you must provide states
that are to be binded with the component
.
states: Object
Must contain a configuration object { mutation: <mutation function>, initialState: <any> }
for each mutation.
commitMutation(environment, config, dispatch)
Commits a mutation and dispatches resolved data as props to a component to whom mutation is rebinded to.
More detailed documentation forthcoming
Contributing
Contributions are welcomed! It's suggested to create an issue beforehand to shed some light to others on what kind of change you are working on. Fork, improve & create a pull request.
Development
Use yarn run lint
to run a lint
Use yarn run test:cover
to run tests
Please build locally before submitting a PR.