It took me a while to understand the naming conventions for react-admin with this integration. The example doesn't provide a lot of clarification because it only uses one model that isn't multi-word. Also, it doesn't follow the typical naming convention of the schema which would be MyUser. Why is the name pluralized too?
In order to discover what was going on with how this integration interacts with tables, I wrote a getReference function to which I passed Prisma.ModelName.* and used it in the <Resource> name field and the resource props of the UI components. I think the example should use Prisma.ModelName.* for clarity since you don't list the schema and we don't know how the tables are named.
I wanted the resource names to be kebab-cased in the urls for readability so I did that transform in the getResource function. I also kebabed my admin api route file names. I noticed that my custom admin api routes were attempting to look up the kebab-cased names as tables. Only multi-word-named models that broke because urls aren't case-sensitive.
I expected since I gave both the prisma instantiation of the table and the type of the query args, that this library could determine the table name. However, the getListHandler call throws a 500 error complaining that the table calendar-group does not exist.
app/routes/admin-api.calendar-group.ts
import { Prisma } from "@prisma/client";
import { LoaderFunction } from "@remix-run/node";
import { json } from "@remix-run/server-runtime";
import {
defaultHandler,
getListHandler,
type RaPayload,
} from "ra-data-simple-prisma";
import { redirectIfAdminUnauth } from "~/lib/auth.server";
import { groupWithDetailsIncludes } from "~/lib/prisma-api";
import { prisma } from "~/lib/prisma.server";
export const loader: LoaderFunction = async ({ request }) => {
const adminRedir = await redirectIfAdminUnauth(request);
if (adminRedir) {
return adminRedir;
}
const body = (await request.json()) as RaPayload;
if (body.method === "getList") {
const groups = await getListHandler<Prisma.CalendarGroupFindManyArgs>(
body,
prisma.calendarGroup,
{
include: { regions: true, ...groupWithDetailsIncludes },
},
);
return json(groups);
}
const result = await defaultHandler(body, prisma);
return json(result);
};
export const action = loader;
Is there any way I can explicitly tell getListHandler the proper table name or is there any other way to achieve kebab-cased admin ui/api routes?
P.S. for those of you who are curious about using remix-auth instead of the authProvider, you can see my approach above. Please comment if there's a more elegant way to do this.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent