Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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 }

About

Relay without GraphQL - Declarative REST data fetching for React

Resources

License

Packages

No packages published