如何处理使用useTable钩子而不是useMany从API的两个或多个表中获取多条记录?在幕后,useTable使用useList.假设我有来自供应商的客户和订单表.有没有办法告诉useTable从这两个表中获取记录?

type Customers = {
  id: number;
  customer_name: string;
  customer_contact: string;
};

type ServiceType = "Wash" | "Dry" | "Fold" | "Full";
type ServiceStatus = "Undone" | "Washing" | "Drying" | "Folding" | "Done";

type Orders = {
  id: number;
  customerId: number;
  orderDate: Date;
  orderLoad: number;
  orderWeight: number;
  serviceType: ServiceType;
  orderSoap: number;
  orderFabcon: number;
  orderBleach: number;
  orderNote: string;
  orderStatus: ServiceStatus;
  orderIsClaimed: boolean;
  inventoryId: number | null;
  payableId: number | null;
};


const {
    refineCore: {
      tableQueryResult: { data: orders },
    },
    previousPage,
    nextPage,
    getCanPreviousPage,
    getCanNextPage,
    getHeaderGroups,
    getRowModel,
    getColumn,
    getAllColumns,
  } = useTable({
    columns,
    onSortingChange: setSorting,
    onColumnFiltersChange: setColumnFilters,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    onColumnVisibilityChange: setColumnVisibility,
    onRowSelectionChange: setRowSelection,
    state: {
      sorting,
      columnFilters,
      columnVisibility,
      rowSelection,
    },
  });

以下是供应商:

<Refine
    dataProvider={dataProvider(supabaseClient)}
    liveProvider={liveProvider(supabaseClient)}
    authProvider={authProvider}
    routerProvider={routerBindings}
    resources={[
      {
        name: "orders",
        list: "/orders",
        create: "/orders/create",
        edit: "/orders/edit/:id",
        show: "/orders/show/:id",
        meta: {
          canDelete: true,
        },
      },
      {
        name: "customers",
        list: "/customers",
        create: "/customers/create",
        edit: "/customers/edit/:id",
        show: "/customers/show/:id",
        meta: {
          canDelete: true,
        },
      },
      {
        name: "inventory",
        list: "/inventory",
        show: "/inventory/show/:id",
        meta: {
          canDelete: true,
        },
      },
    ]}
    options={{
      syncWithLocation: true,
      warnWhenUnsavedChanges: true,
      useNewQueryKeys: true,
      projectId: "GmM62Q-BMA8wv-2ddnfk",
    }}
  >
</Refine>

推荐答案

useTable向单端点发出请求,为您构建过滤器、分页、排序器参数.从逻辑上讲,表应该包括来自单个端点的记录.

虽然问题不清楚,但您可能希望在订单表列下显示客户信息(姓名、邮箱).这取决于您的API.

例如,如果您使用的是GraphQL,则可以执行以下操作:

query OrdersTable($params: OrderQueryParams) {
  orders(params: $params) {
    id
    orderDate
    customer { id email name }
  }
}

或者,如果您的REST API支持类似于"Include"的内容:

https://api.example.com/orders&include=customer

如果你的API不支持这些,你需要从useTable响应中提取customerIds,并使用useMany钩子获取客户.

https://refine.dev/docs/data/hooks/use-many/#ids-

Javascript相关问答推荐

为什么我达到了时间限制!?LeetCode链接列表循环(已解决,但需要解释!)

如何获取转换字节的所有8位?

如何解决CORS政策的问题

如何从JSON数组添加Google Maps标记—或者如何为数组添加参数到标记构造器

如何在 cypress 中使用静态嵌套循环

在react JS中映射数组对象的嵌套数据

使用原型判断对象是否为类的实例

这个值总是返回未定义的-Reaction

JS:XML insertBefore插入元素

映射类型定义,其中值对应于键

Angular 形式,从DOM中删除不会删除指定索引处的内容,但会删除最后一项

变量在导入到Vite中的另一个js文件时成为常量.

将异步回调转换为异步生成器模式

如果没有页面重新加载Angular ,innerHTML属性绑定不会更新

删除元素属性或样式属性的首选方法

如何根据输入数量正确显示alert ?

是否设置以JavaScript为背景的画布元素?

在没有任何悬停或其他触发的情况下连续交换图像

React数组查找不读取变量

将匿名函数附加到链接的onClick属性