{"id":15761599,"url":"https://github.com/finnfiddle/react-ping","last_synced_at":"2025-03-31T09:24:23.322Z","repository":{"id":57342504,"uuid":"75008448","full_name":"finnfiddle/react-ping","owner":"finnfiddle","description":"Relay without GraphQL - Declarative REST data fetching for React","archived":false,"fork":false,"pushed_at":"2017-10-06T11:36:11.000Z","size":49,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-11T11:17:34.767Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/finnfiddle.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-11-28T19:47:22.000Z","updated_at":"2017-05-12T20:03:06.000Z","dependencies_parsed_at":"2022-09-16T03:01:59.508Z","dependency_job_id":null,"html_url":"https://github.com/finnfiddle/react-ping","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/finnfiddle%2Freact-ping","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/finnfiddle%2Freact-ping/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/finnfiddle%2Freact-ping/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/finnfiddle%2Freact-ping/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/finnfiddle","download_url":"https://codeload.github.com/finnfiddle/react-ping/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246444514,"owners_count":20778447,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-04T11:03:08.853Z","updated_at":"2025-03-31T09:24:23.300Z","avatar_url":"https://github.com/finnfiddle.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Ping\n\n**Relay without GraphQL** - Declarative HTTP/REST data fetching for React.\n\n## Motivation\n\nGraphQL 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.\n\nRelay 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...\n\nSo 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.\n\n## Installation\n\n```\nnpm install react-ping\n```\n\n## Docs \u0026 Help\n\n- [Guides and API docs](https://github.com/finnfiddle/react-ping/blob/master/docs/README.md)\n- [Reporting Issues](https://github.com/finnfiddle/react-ping/issues)\n\n## Example\n\nAn example To Do app that lists and creates To Dos.\n\n```javascript\nimport React, { Component } from 'react';\nimport { createContainer } from 'react-ping';\n\nclass ToDoList extends Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003ca onClick={this.handleCreateTodo.bind(this)}\u003eCreate To Do\u003c/a\u003e\n        \u003cul\u003e\n          {this.props.todos.map(todo =\u003e (\n            \u003cli key={todo.id}\u003e{todo.title}\u003c/li\u003e\n          ))}\n        \u003c/ul\u003e\n      \u003c/div\u003e\n    );\n  }\n\n  handleCreateTodo() {\n    this.props.createTodo({ title: this.props.todos.length });\n  }\n}\n\nexport default createContainer({\n  todos: {\n    url: ({ props, state }) =\u003e '/api/todos',\n  },\n  createTodo: {\n    url: ({ props, state }) =\u003e '/api/todos',\n    method: ({ props, state }) =\u003e 'POST',\n    body: ({ props, state, title }) =\u003e ({ title }),\n  },\n}, ToDoList);\n\n// ==\u003e GET - /api/todos\n// ==\u003e POST - /api/todos - body: { title: 0 }\n```\n\n## Resource Example\n\nOr 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.\n\n```javascript\nimport React, { Component } from 'react';\nimport { createContainer, createResource } from 'react-ping';\n\nclass ToDoList extends Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003ca onClick={this.handleCreateTodo.bind(this)}\u003eCreate To Do\u003c/a\u003e\n        \u003cul\u003e\n          {this.props.todos.map(todo =\u003e (\n            \u003cli key={todo.id}\u003e{todo.title}\u003c/li\u003e\n          ))}\n        \u003c/ul\u003e\n      \u003c/div\u003e\n    );\n  }\n\n  handleCreateTodo() {\n    this.props.ping.todos.create({ title: this.props.todos.length });\n  }\n}\n\nexport default createContainer({\n  todos: createResource({\n    baseUrl: ({ props, state }) =\u003e '/api/todos',\n    create: {\n      body: ({ props, state, title }) =\u003e ({ title }),\n    },\n  }),\n}, ToDoList);\n\n// ==\u003e GET - /api/todos\n// ==\u003e POST - /api/todos - body: { title: 0 }\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffinnfiddle%2Freact-ping","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffinnfiddle%2Freact-ping","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffinnfiddle%2Freact-ping/lists"}