https://github.com/marmelab/ra-data-server
Serverside Data Provider For React-Admin using remote procedure call (RPC)
https://github.com/marmelab/ra-data-server
Last synced: about 2 months ago
JSON representation
Serverside Data Provider For React-Admin using remote procedure call (RPC)
- Host: GitHub
- URL: https://github.com/marmelab/ra-data-server
- Owner: marmelab
- Created: 2021-04-28T16:26:45.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2021-05-12T15:42:39.000Z (about 4 years ago)
- Last Synced: 2025-04-21T06:08:52.913Z (about 2 months ago)
- Language: TypeScript
- Size: 319 KB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Serverside Data Provider For React-Admin using remote procedure call (RPC)
Serverside Data Provider for [react-admin](https://github.com/marmelab/react-admin), the frontend framework for building admin applications on top of REST/GraphQL services.
[](https://vimeo.com/268958716)
ra-data-provider is still under development
## Installation
```sh
npm install --save ra-data-server
```
## Usage
### On express server
```js
import express from "express";
import { expressDataProvider } from "ra-data-server";
const handlers = {
getList: ...,
...
};
const dataProviderMiddleware = expressDataProvider(handlers);
const app = express();
app.use(express.json());
app.use("/admin", dataProviderMiddleware);
app.listen("3000");
```
### On the front
```jsx
// in src/App.js
import * as React from "react";
import { Admin, Resource } from "react-admin";
import { serverSideDataProvider } from "ra-data-server";
import { PostList } from "./posts";
const App = () => (
);
export default App;
```
### implementing a serverside dataProvider handler
The handler to pass to expressDataProvider has mostly the same type signature as the client side dataProvider.
The only difference being the result that is of the form:
```js
{
body: // json containing the traditional result of a dataProvider if all is good, an error object otherwise
status: // the status code 200 if all is good
}
```
```js
const dataProvider = {
async getList(
resource,
{
pagination: { page, perPage },
sort: { field, order },
filter,
}
) {
// handle the logic to get the list for the resource using the params
return {
status: 200,
body: {
data: [/* The returned records */],
total: // the total number of record matching the given filter,
validUntil: // optional validity date
},
};
}
async getOne(
resource,
{ id }
) {
// handle the logic to get the record
return {
status: 200,
body: {
data: // the fetched record,
validUntil: // optional validity date
},
};
}
async getMany(
resource,
{ ids }
) {
// handle the logic to get the records
return {
status: 200,
body: {
data: [/* the fetched record */],
validUntil: // optional validity date
},
};
}
async getManyReference(
resource,
{
target,
id,
pagination: { page, perPage },
sort: { field, order },
filter
}
) {
// handle the logic to get the records
return {
status: 200,
body: {
data: [/* the returned records */],
total: // the total number of record matching the given filter,
validUntil: // optional validity date
},
};
}
async update(
resource,
{ id, data, previousData }
) {
// handle the update logic
return {
status: 200,
body: {
data: /* the updated record */,
validUntil: // optional validity date
},
};
}
async updateMany(
resource,
{ ids, data }
) {
// handle the updateMany logic
return {
status: 200,
body: {
data: [/* the updated records ids */],
validUntil: // optional validity date
},
};
}
async create(
resource,
{ data }
) {
// handle the create logic
return {
status: 200,
body: {
data: /* the created record */,
validUntil: // optional validity date
},
};
}
async delete(
resource,
{ id, previousData }
) {
// handle the delete logic
return {
status: 200,
body: {
data: /* the deleted record */,
},
};
}
async deleteMany(
resource,
{ ids }
) {
// handle the deleteMany logic
return {
status: 200,
body: {
ids: /* the ids of the deleted record */,
},
};
}
};
```
## License
This data provider is licensed under the MIT License, and sponsored by [marmelab](https://marmelab.com).