Relay without GraphQL - Declarative REST data fetching for React
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
docs
scripts
src
.babelrc
.eslintrc
.gitignore
.npmignore
LICENSE
README.md
index.js
package.json

README.md

React Ping

Relay without GraphQL - Declarative HTTP/REST data fetching for React.

Motivation

GraphQL is pretty great and saves us sending more data along the wire than we need to. However, it isn't everybody's cup of tea and REST is likely going to be around for a long time.

Relay is also really nice because we can declaratively wire up React apps with GraphQL APIs. No more imperative calls to functions to send network requests etc...

So React Ping attempts to be Relay for REST and fill the gap for all those that like what Relay (and GraphQL) are trying to achieve but don't necessarily want to use GraphQL.

Installation

npm install react-ping

Docs & Help

Example

An example To Do app that lists and creates To Dos.

import React, { Component } from 'react';
import { createContainer } from 'react-ping';

class ToDoList extends Component {
  render() {
    return (
      <div>
        <a onClick={this.handleCreateTodo.bind(this)}>Create To Do</a>
        <ul>
          {this.props.todos.map(todo => (
            <li key={todo.id}>{todo.title}</li>
          ))}
        </ul>
      </div>
    );
  }

  handleCreateTodo() {
    this.props.createTodo({ title: this.props.todos.length });
  }
}

export default createContainer({
  todos: {
    url: ({ props, state }) => '/api/todos',
  },
  createTodo: {
    url: ({ props, state }) => '/api/todos',
    method: ({ props, state }) => 'POST',
    body: ({ props, state, title }) => ({ title }),
  },
}, ToDoList);

// ==> GET - /api/todos
// ==> POST - /api/todos - body: { title: 0 }

Resource Example

Or the same as above but using a Resource. A Resource passes a collection of data to the wrapped component and provides CRUD methods for sending network requests that when resolved either add, update or remove items from the collection.

import React, { Component } from 'react';
import { createContainer, createResource } from 'react-ping';

class ToDoList extends Component {
  render() {
    return (
      <div>
        <a onClick={this.handleCreateTodo.bind(this)}>Create To Do</a>
        <ul>
          {this.props.todos.map(todo => (
            <li key={todo.id}>{todo.title}</li>
          ))}
        </ul>
      </div>
    );
  }

  handleCreateTodo() {
    this.props.ping.todos.create({ title: this.props.todos.length });
  }
}

export default createContainer({
  todos: createResource({
    baseUrl: ({ props, state }) => '/api/todos',
    create: {
      body: ({ props, state, title }) => ({ title }),
    },
  }),
}, ToDoList);

// ==> GET - /api/todos
// ==> POST - /api/todos - body: { title: 0 }