Git Product home page Git Product logo

ra-data-server's Introduction

Serverside Data Provider For React-Admin using remote procedure call (RPC)

Serverside Data Provider for react-admin, the frontend framework for building admin applications on top of REST/GraphQL services.

react-admin-demo

ra-data-provider is still under development

Installation

npm install --save ra-data-server

Usage

On express server

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

// 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 = () => (
    <Admin dataProvider={serverSideDataProvider("http://localhost:3000/admin")}>
        <Resource name="posts" list={PostList} />
    </Admin>
);

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:

{
    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
}
 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.

ra-data-server's People

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Forkers

pyfundation

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.