https://github.com/finnfiddle/react-ping
Relay without GraphQL - Declarative REST data fetching for React
https://github.com/finnfiddle/react-ping
Last synced: over 1 year ago
JSON representation
Relay without GraphQL - Declarative REST data fetching for React
- Host: GitHub
- URL: https://github.com/finnfiddle/react-ping
- Owner: finnfiddle
- License: mit
- Created: 2016-11-28T19:47:22.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-10-06T11:36:11.000Z (over 8 years ago)
- Last Synced: 2024-10-11T11:17:34.767Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 47.9 KB
- Stars: 3
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
- [Guides and API docs](https://github.com/finnfiddle/react-ping/blob/master/docs/README.md)
- [Reporting Issues](https://github.com/finnfiddle/react-ping/issues)
## Example
An example To Do app that lists and creates To Dos.
```javascript
import React, { Component } from 'react';
import { createContainer } from 'react-ping';
class ToDoList extends Component {
render() {
return (
);
}
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](/docs/Resource.md). 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.
```javascript
import React, { Component } from 'react';
import { createContainer, createResource } from 'react-ping';
class ToDoList extends Component {
render() {
return (
);
}
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 }
```