JSPM

ra-data-simple-prisma-headers

2.0.2
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 7
  • Score
    100M100P100Q28220F
  • License MIT

The best package to connect react-admin with prisma, and now supporting an audit log.

Package Exports

  • ra-data-simple-prisma-headers
  • ra-data-simple-prisma-headers/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ra-data-simple-prisma-headers) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Admin + Prisma 🤝

Create a fullstack react-admin app adding just one file on the server!

Most of the examples will use Next.js but you can use any node-based server-side framework.

Installation

yarn add ra-data-simple-prisma

or

npm i ra-data-simple-prisma

or

pnpm i ra-data-simple-prisma

Frontend: import the DataProvider

import { Admin, Resource } from "react-admin";
import { dataProvider } from "ra-data-simple-prisma";

const ReactAdmin = () => {
  return (
    <Admin dataProvider={dataProvider("/api")}>
      <Resource name="users" />
    </Admin>
  );
};

export default ReactAdmin;

Backend: import the request handlers

Simplest implementation ever:

// /api/[resource].ts <= catch all resource requests

import { defaultHandler } from "ra-data-simple-prisma";
import { prismaClient } from "../prisma/client"; // <= Your prisma client instance

export default function handler(req, res) {
  defaultHandler(req, res, prismaClient);
}

With an audit log (ex. uses next-auth):

// /api/[resource].ts <= catch all resource requests

import { defaultHandler } from "ra-data-simple-prisma";
import { prismaClient } from "../prisma/client";
import { authProvider } from "../providers/authProvider";
import { getSession } from "next-auth/react";


export default function handler(req, res) {
  const session = await getSession({ req });
  defaultHandler(req, res, prismaClient, {
    audit: {
      model: prismaClient.audit_log,
      authProvider: authProvider(session)
    },
  });
}

audit:

  • model: Insert your audit_log table ex. prisma.auditLog
  • authProvider: Insert your AuthProvider from React-Admin
  • columns?: Link your database tables {id: "id", date: "created_at"}
  • enabledForAction?: Enabled for which action ex. {create: true, update: true, delete: false} enabledResources?: List of resources which are to be audited. Default all.

Overrides

All dataProvider methods can be overridden for a given resource, or all.

// /api/post.ts <= override default handler for specific resource

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  switch (req.body.method) {
    case "create":
      return createHandler(req, res, prismaClient.post, {
        connect: {
          tags: "id",
        },
      });
    case "delete":
      return deleteHandler(req, res, prismaClient.post, {
        softDeleteField: "deletedAt",
      });
    case "deleteMany":
      return deleteManyHandler(req, res, prismaClient.post, {
        softDeleteField: "deletedAt",
      });
    case "getList":
      return getListHandler(
        req,
        res,
        prismaClient.post,
        {
          select: ...
          include: { tags: true },
          transform: (posts: any[]) => {
            posts.forEach((post: any) => {
              post.tags = post.tags.map((tag: any) => tag.id);
            });
          },
        }
      );
    case "getMany":
      return getManyHandler(
        req,
        res,
        prismaClient.post,
      );
    case "getManyReference":
      return getManyReferenceHandler(
        req,
        res,
        prismaClient.post,
      );
    case "getOne":
      return getOneHandler(
        req,
        res,
        prismaClient.post,
        {
          select: ...
          include: ...
          transform: (post: any) => {
            post._computedProp = ...
          },
        }
      )
    case "update":
      return updateHandler(
        req,
        res,
        prismaClient.post,
        {
          skipFields: {
            computedField: true
          },
          set: {
            tags: "id",
          },
        }
      );
    case "updateMany":
      return updateHandler(
        req,
        res,
        prismaClient.post,
        {
          skipFields: {
            computedField: true
          },
          set: {
            tags: "id",
          },
        }
      );
    default: // <= fall back on default handler
      return defaultHandler(req, res, prismaClient);
  }
}

Publish

Use the example app to test the changes.

In root folder run

pnpm publish

License

MIT