Refine.dev Fetching multiple records from different tables

Question

How do you deal with fetching multiple records from two or more tables from the API using the useTable hook instead of useMany? Under the hood, useTable uses useList. Let's say I have customers and order tables from the providers. Is there a way to tell the useTable to get records from that two tables?

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,
    },
  });

Here's the provider:

<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>

Answer 1

useTable makes a request to single endpoint, building filter, pagination, sorter parameters for you. Logically, a table should include records from a single endpoint.

Although it's not clear from the question, you may want to show customer information (name, email) under a table column of orders. Handling that depends on your API.

For example, if you are using GraphQL, you can do something like this:

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

Or if your REST API supports something like "include":

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

If your API doesn't support any of these, you will need to extract customerIds from the useTable response and fetch customers with useMany hook.

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