When using Toolpad Core's Crud, the required DataSource must be defined as a client component. However, with tRPC, the client can only be used inside a component. Does this mean that tRPC cannot be used as a DataSource for Toolpad Core's Crud, since DataSource must be defined at the top level (not inside a component)?

[kryushiki]

When using Toolpad Core's Crud, the required DataSource must be defined as a client component. However, with tRPC, the client can only be used inside a component. Does this mean that tRPC cannot be used as a DataSource for Toolpad Core's Crud, since DataSource must be defined at the top level (not inside a component)?

page.tsx

import * as React from "react";

import { Crud } from "@toolpad/core/Crud";
import { categoriesDataSource, CategoryModel } from "./data";

export default async function CategoriesCrudPage() {
  return (
    <Crud<CategoryModel>
      dataSource={categoriesDataSource}
      rootPath="/categoris"
      initialPageSize={25}
      defaultValues={{ itemCount: 1 }}
    />
  );
}

https://mui.com/toolpad/core/react-crud/#data-sources

The following tRPC code only works on the server, so it will cause an error if used on the client.

data.ts

'use client';
import { DataModel, DataSource, DataSourceCache } from "@toolpad/core/Crud";
import { api } from "@/trpc/server";
import type { Category } from "@repo/database";
import { categoryCreateOneSchema } from "@/schema/category";

export interface CategoryModel extends Omit<Category, "id">, DataModel {}

export const categoriesDataSource: DataSource<CategoryModel> = {
  fields: [
    { field: "id", headerName: "ID" },
    { field: "name", headerName: "name", width: 200 },
    { field: "parentId", headerName: "parent id", width: 140 },
  ],
  getMany: async ({ paginationModel, filterModel, sortModel }) => {
    const page = paginationModel.page ?? 0;
    const pageSize = paginationModel.pageSize ?? 20;
    const sort =
      sortModel
        ?.filter((s) => s.sort === "asc" || s.sort === "desc")
        .map((s) => ({ field: s.field, sort: s.sort as "asc" | "desc" })) ?? [];
    const filterItems = filterModel?.items ?? [];
    const res = await api.category.getMany({
      page,
      pageSize,
      sortModel: sort,
      filterItems,
    });
    return {
      items: res.categories,
      itemCount: res.categoryCount,
    };
  },
  getOne: async (id) => {
    const result = await api.category.getOne({ id: String(id) });
    if (!result) throw new Error("Category not found");
    return result;
  },
  createOne: async (data) => {
    if (!data.name) throw new Error("name is required");
    return await api.category.createOne({
      name: data.name,
      parentId: data.parentId ?? null,
    });
  },
  updateOne: async (id, data) => {
    if (!data.name) throw new Error("name is required");
    return await api.category.updateOne({
      id: String(id),
      name: data.name,
      parentId: data.parentId ?? null,
    });
  },
  deleteOne: async (id) => {
    await api.category.deleteOne({ id: String(id) });
  },
  validate: categoryCreateOneSchema["~standard"].validate,
};

export const categoriesCache = new DataSourceCache();

thank you