跳到主要內容
+

資料網格 - 伺服器端資料 🧪

資料網格伺服器端資料。

簡介

在 React 中進行伺服器端資料管理，隨著資料集增長可能會變得複雜。挑戰包括手動資料擷取、分頁、排序、篩選和效能優化。專用模組可以幫助抽象化這些複雜性，從而改善使用者體驗。

考慮一個資料網格顯示使用者列表。它支援分頁、依欄標題排序和篩選。當使用者變更頁面或更新篩選或排序時，資料網格會從伺服器擷取資料。

const [rows, setRows] = React.useState([]);
const [paginationModel, setPaginationModel] = React.useState({
  page: 0,
  pageSize: 10,
});
const [filterModel, setFilterModel] = React.useState({ items: [] });
const [sortModel, setSortModel] = React.useState([]);

React.useEffect(() => {
  const fetcher = async () => {
    // fetch data from server
    const data = await fetch('https://my-api.com/data', {
      method: 'GET',
      body: JSON.stringify({
        page: paginationModel.page,
        pageSize: paginationModel.pageSize,
        sortModel,
        filterModel,
      }),
    });
    setRows(data.rows);
  };
  fetcher();
}, [paginationModel, sortModel, filterModel]);

<DataGridPro
  columns={columns}
  pagination
  sortingMode="server"
  filterMode="server"
  paginationMode="server"
  onPaginationModelChange={setPaginationModel}
  onSortModelChange={setSortModel}
  onFilterModelChange={setFilterModel}
/>;

此範例僅觸及表面，仍有許多問題尚未解決，例如：

  • 效能優化
  • 快取資料/重複請求消除
  • 伺服器上更複雜的用例，例如分組、樹狀資料等。
  • 伺服器端列編輯
  • 資料延遲載入
  • 處理資料更新，例如列編輯、列刪除等。
  • 根據需求重新擷取資料

嘗試一個接一個地解決這些問題可能會使程式碼變得複雜且難以維護。

資料來源

集中式資料來源的想法是簡化伺服器端資料擷取。它是資料網格和伺服器之間的抽象層，提供了一個簡單的介面用於與伺服器互動。可以將其視為處理資料網格（客戶端）和實際資料來源（伺服器）之間通訊的中介。

它有一組您需要實作的初始必要方法。資料網格將在內部使用這些方法，以便在需要時擷取資料子集。

讓我們看一下最簡化的 GridDataSource 介面配置。

interface GridDataSource {
  /**
   * This method will be called when the grid needs to fetch some rows.
   * @param {GridGetRowsParams} params The parameters required to fetch the rows.
   * @returns {Promise<GridGetRowsResponse>} A promise that resolves to the data of
   * type [GridGetRowsResponse].
   */
  getRows(params: GridGetRowsParams): Promise<GridGetRowsResponse>;
}

以下是使用資料來源實作時，上述範例的外觀

const customDataSource: GridDataSource = {
  getRows: async (params: GridGetRowsParams): GetRowsResponse => {
    const response = await fetch('https://my-api.com/data', {
      method: 'GET',
      body: JSON.stringify(params),
    });
    const data = await response.json();

    return {
      rows: data.rows,
      rowCount: data.totalCount,
    };
  },
}

<DataGridPro
  columns={columns}
  unstable_dataSource={customDataSource}
  pagination
/>

程式碼已大幅減少，無需管理受控狀態，且資料擷取邏輯已集中化。

伺服器端篩選、排序和分頁

資料來源變更了現有伺服器端功能（如 filtering、sorting 和 pagination）的運作方式。

沒有資料來源

當沒有資料來源時，篩選、排序、分頁等功能預設在用戶端運作。為了讓它們與伺服器端資料一起運作，您需要將它們明確設定為伺服器，並提供 onFilterModelChange、onSortModelChange、onPaginationModelChange 事件處理器，以根據更新的變數從伺服器擷取資料。

<DataGrid
  columns={columns}
  rows={rows}
  pagination
  sortingMode="server"
  filterMode="server"
  paginationMode="server"
  onPaginationModelChange={(newPaginationModel) => {
    // fetch data from server
  }}
  onSortModelChange={(newSortModel) => {
    // fetch data from server
  }}
  onFilterModelChange={(newFilterModel) => {
    // fetch data from server
  }}
/>

使用資料來源

使用資料來源時，篩選、排序、分頁等功能會自動設定為伺服器端。

當相應的模型更新時，資料網格會使用類型為 GridGetRowsParams 的更新值呼叫 getRows 方法，以取得更新的資料。

<DataGridPro
  columns={columns}
  // automatically sets `sortingMode="server"`, `filterMode="server"`, `paginationMode="server"`
  unstable_dataSource={customDataSource}
/>

以下示範展示了此行為。

按下 Enter 鍵開始編輯

資料快取

資料來源預設會快取擷取的資料。這表示如果使用者導航到已擷取的頁面或展開已擷取的節點，網格將不會再次呼叫 getRows 函數，以避免不必要的伺服器呼叫。

預設使用 GridDataSourceCacheDefault，這是一個簡單的記憶體內快取，將資料儲存在純物件中。您可以在上面的示範中看到它的運作方式。

自訂快取存活時間

GridDataSourceCacheDefault 的預設存活時間 (ttl) 為 5 分鐘。若要自訂，請將 ttl 選項以毫秒為單位傳遞給 GridDataSourceCacheDefault 建構函式，然後將其作為 unstable_dataSourceCache 屬性傳遞。

import { GridDataSourceCacheDefault } from '@mui/x-data-grid-pro';

const lowTTLCache = new GridDataSourceCacheDefault({ ttl: 1000 * 10 }); // 10 seconds

<DataGridPro
  columns={columns}
  unstable_dataSource={customDataSource}
  unstable_dataSourceCache={lowTTLCache}
/>;
按下 Enter 鍵開始編輯

自訂快取

若要提供自訂快取，請使用 unstable_dataSourceCache 屬性，它可以從頭開始編寫，也可以基於另一個快取函式庫。此屬性接受 GridDataSourceCache 類型的通用介面。

export interface GridDataSourceCache {
  set: (key: GridGetRowsParams, value: GridGetRowsResponse) => void;
  get: (key: GridGetRowsParams) => GridGetRowsResponse | undefined;
  clear: () => void;
}

停用快取

若要停用資料來源快取，請將 null 傳遞給 unstable_dataSourceCache 屬性。

<DataGridPro
  columns={columns}
  unstable_dataSource={customDataSource}
  unstable_dataSourceCache={null}
/>
按下 Enter 鍵開始編輯

錯誤處理

您可以使用 unstable_onDataSourceError 提供錯誤處理函數，以處理資料來源的錯誤。每當擷取資料時發生錯誤時，將會呼叫它。

此函數的第一個參數是錯誤物件，第二個參數是類型為 GridGetRowsParams 的擷取參數。

<DataGridPro
  columns={columns}
  unstable_dataSource={customDataSource}
  unstable_onDataSourceError={(error, params) => {
    console.error(error);
  }}
/>

更新資料 🚧

此功能尚未實作，完成後，每當使用者編輯列時，都會使用 GridRowModel 呼叫 unstable_dataSource.updateRow 方法。它的運作方式與 processRowUpdate 屬性類似。

歡迎投票支持相關的 GitHub issue，以加快此功能的推出速度。

API