嘿伙计们提前谢谢!我在
[email protected]
中使用 [email protected]
。我的src/app/admin/App.tsx
看起来像这样:
// src/app/admin/App.tsx
const dataProvider = simpleRestProvider("/api");
const App = () => {
return (
<Admin dataProvider={dataProvider}>
{/* ... */}
<Resource
name="units"
list={UnitList}
create={UnitCreate}
edit={UnitEdit}
recordRepresentation={(record) => `${record.section.name} - ${record.name}`}
/>
{/* ... */}
</Admin>
);
};
它将前往
src/app/api/(admin)/units/route.ts
// src/app/api/(admin)/units/route.ts
import { auth } from "@/auth";
import { db } from "@/db";
import { units } from "@/db/schema";
import { asc } from "drizzle-orm";
import { NextResponse } from "next/server";
export const GET = async () => {
const session = await auth();
if (!session) {
return new NextResponse("Unauthorized", { status: 401 }); // User not signed in
}
if (!session.user || session.user.role !== "admin") {
return new NextResponse("Forbidden", { status: 403 }); // User signed in but not admin
}
const data = await db.query.units.findMany({
orderBy: [asc(units.order)],
with: { section: true },
});
const totalCount = data.length;
const headers = new Headers();
headers.set("Access-Control-Allow-Origin", "*");
headers.set(
"Access-Control-Allow-Methods",
"GET, POST, PUT, DELETE, OPTIONS",
);
headers.set("Access-Control-Allow-Headers", "Content-Type, Authorization");
headers.set("Access-Control-Expose-Headers", "Content-Range");
headers.set("Content-Range", `units 0-${totalCount}/${totalCount}`);
return NextResponse.json(data, { headers });
};
export const POST = async (req: Request) => {
const session = await auth();
if (!session) {
return new NextResponse("Unauthorized", { status: 401 }); // User not signed in
}
if (!session.user || session.user.role !== "admin") {
return new NextResponse("Forbidden", { status: 403 }); // User signed in but not admin
}
const body = await req.json();
console.log(body);
const data = await db
.insert(units)
.values({
...body,
})
.returning();
return NextResponse.json(data[0]);
};
这是从此路由返回的对象的类型:
const data: {
name: string;
order: number;
id: number;
description: string;
sectionId: number;
section: {
name: string;
id: number;
description: string;
courseId: number;
};
}[]
当我使用react-admin创建功能创建记录时收到错误,如果刷新页面,错误就会消失。奇怪的是,如果我将记录表示设置为
recordRepresentation="name"
,则不会出现错误。这可能意味着仅当我将 recordrepresentation 设置为嵌套对象时才会出现错误。
我做错了什么吗?
我尝试阅读react-admin文档,但什么也没找到。
我还尝试为
section.name
添加隐藏字段 UnitList.tsx
我以为它会引用它,但它没有做任何事情:
import {
Datagrid,
List,
NumberField,
ReferenceField,
TextField,
} from "react-admin";
export const UnitList = () => (
<List filter={{ order: true }}>
<Datagrid>
<TextField source="id" />
<TextField source="name" />
<TextField source="description" />
<NumberField source="order" />
<ReferenceField source="sectionId" reference="sections" />
<TextField source="section.name" label={false} hidden /> // <- this line
</Datagrid>
</List>
);
我想通了。问题是,当react-admin创建资源时,它会向我的情况下的
POST
发送一个api/<resource>
请求api/(admin)/units
,并且它会期望您返回刚刚创建的对象,这是我在API路线中所做的:
// ...
export const POST = async (req: Request) => {
// ...
const body = await req.json();
console.log(body);
const data = await db
.insert(units)
.values({
...body,
})
.returning();
return NextResponse.json(data[0]);
};
问题是
data[0]
没有 sections
属性,我的 App.tsx
用作我的单位资源的 recordRepresentation
// src/app/admin/App.tsx
const dataProvider = simpleRestProvider("/api");
const App = () => {
return (
<Admin dataProvider={dataProvider}>
{/* ... */}
<Resource
name="units"
list={UnitList}
create={UnitCreate}
edit={UnitEdit}
recordRepresentation={(record) => `${record.section.name} - ${record.name}`}
/>
{/* ... */}
</Admin>
);
};
为了解决这个问题,我使用从
id
对象返回的 data[0]
查询数据。
// ...
export const POST = async (req: Request) => {
// ...
const body = await req.json();
console.log(body);
const data = await db
.insert(units)
.values({
...body,
})
.returning();
const dataWithSection = await db.query.units.findFirst({
where: eq(units.id, data[0].id),
with: { section: true },
});
return NextResponse.json(dataWithSection);
};
请注意,我正在执行另一个数据库调用,因此效率低下,但它有效。也许有人知道如何用 drizzle 或 postgres 来优化这个,请教我,谢谢。