Make cache work with aggregation

mui · Dec 23, 2024 · 23f366a · 23f366a
1 parent 7610ea6
commit 23f366a
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 8 deletions.
diff --git a/packages/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregation.ts b/packages/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregation.ts
@@ -137,7 +137,6 @@ export const useGridAggregation = (
     // Re-apply the row hydration to add / remove the aggregation footers
     if (!areAggregationRulesEqual(rulesOnLastRowHydration, aggregationRules)) {
       if (props.unstable_dataSource) {
-        apiRef.current.unstable_dataSource.cache.clear();
         apiRef.current.unstable_dataSource.fetchRows();
       } else {
         apiRef.current.requestPipeProcessorsApplication('hydrateRows');

diff --git a/packages/x-data-grid-premium/src/hooks/features/dataSource/cache.ts b/packages/x-data-grid-premium/src/hooks/features/dataSource/cache.ts
@@ -0,0 +1,13 @@
+import { GridGetRowsParamsPremium } from './models';
+
+export function getKeyPremium(params: GridGetRowsParamsPremium) {
+  return JSON.stringify([
+    params.filterModel,
+    params.sortModel,
+    params.groupKeys,
+    params.groupFields,
+    params.start,
+    params.end,
+    params.aggregationModel,
+  ]);
+}
diff --git a/packages/x-data-grid-premium/src/hooks/features/dataSource/useGridDataSourcePremium.tsx b/packages/x-data-grid-premium/src/hooks/features/dataSource/useGridDataSourcePremium.tsx
@@ -17,6 +17,13 @@ import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
 import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
 import { GridDataSourcePremiumPrivateApi, GridGetRowsResponsePremium } from './models';
 import { gridAggregationModelSelector } from '../aggregation/gridAggregationSelectors';
+import { getKeyPremium } from './cache';
+
+const options = {
+  cacheOptions: {
+    getKey: getKeyPremium,
+  },
+};
 
 export const useGridDataSourcePremium = (
   apiRef: React.MutableRefObject<GridPrivateApiPremium>,
@@ -25,6 +32,7 @@ export const useGridDataSourcePremium = (
   const { api, strategyProcessor, events } = useGridDataSourceBase<GridPrivateApiPremium>(
     apiRef,
     props,
+    options,
   );
   const aggregationModel = useGridSelector(apiRef, gridAggregationModelSelector);
   const aggregateRowRef = React.useRef<GridValidRowModel>({});

diff --git a/packages/x-data-grid-pro/src/hooks/features/dataSource/cache.ts b/packages/x-data-grid-pro/src/hooks/features/dataSource/cache.ts
@@ -7,9 +7,16 @@ export type GridDataSourceCacheDefaultConfig = {
    * @default 300000 (5 minutes)
    */
   ttl?: number;
+  /**
+   * Function to generate a cache key from the params.
+   * @param {GridGetRowsParams} params The params to generate the cache key from.
+   * @returns {string} The cache key.
+   * @default `getKeyDefault()`
+   */
+  getKey?: (params: GridGetRowsParams) => string;
 };
 
-function getKey(params: GridGetRowsParams) {
+function getKeyDefault(params: GridGetRowsParams) {
   return JSON.stringify([
     params.filterModel,
     params.sortModel,
@@ -25,19 +32,22 @@ export class GridDataSourceCacheDefault {
 
   private ttl: number;
 
-  constructor({ ttl = 300000 }: GridDataSourceCacheDefaultConfig) {
+  private getKey: (params: GridGetRowsParams) => string;
+
+  constructor({ ttl = 300000, getKey = getKeyDefault }: GridDataSourceCacheDefaultConfig) {
     this.cache = {};
     this.ttl = ttl;
+    this.getKey = getKey;
   }
 
   set(key: GridGetRowsParams, value: GridGetRowsResponse) {
-    const keyString = getKey(key);
+    const keyString = this.getKey(key);
     const expiry = Date.now() + this.ttl;
     this.cache[keyString] = { value, expiry };
   }
 
   get(key: GridGetRowsParams): GridGetRowsResponse | undefined {
-    const keyString = getKey(key);
+    const keyString = this.getKey(key);
     const entry = this.cache[keyString];
     if (!entry) {
       return undefined;

diff --git a/packages/x-data-grid-pro/src/hooks/features/dataSource/useGridDataSourceBase.ts b/packages/x-data-grid-pro/src/hooks/features/dataSource/useGridDataSourceBase.ts
@@ -70,6 +70,9 @@ export const useGridDataSourceBase = <Api extends GridPrivateApiPro>(
     | 'treeData'
     | 'unstable_lazyLoading'
   >,
+  options: {
+    cacheOptions?: GridDataSourceCacheDefaultConfig;
+  } = {},
 ) => {
   const setStrategyAvailability = React.useCallback(() => {
     apiRef.current.setStrategyAvailability(
@@ -100,7 +103,7 @@ export const useGridDataSourceBase = <Api extends GridPrivateApiPro>(
     return new CacheChunkManager(cacheChunkSize);
   }).current;
   const [cache, setCache] = React.useState<GridDataSourceCache>(() =>
-    getCache(props.unstable_dataSourceCache),
+    getCache(props.unstable_dataSourceCache, options.cacheOptions),
   );
 
   const fetchRows = React.useCallback<GridDataSourceApiBase['fetchRows']>(
@@ -374,9 +377,12 @@ export const useGridDataSourceBase = <Api extends GridPrivateApiPro>(
       isFirstRender.current = false;
       return;
     }
-    const newCache = getCache(props.unstable_dataSourceCache);
+    if (props.unstable_dataSourceCache === undefined) {
+      return;
+    }
+    const newCache = getCache(props.unstable_dataSourceCache, options.cacheOptions);
     setCache((prevCache) => (prevCache !== newCache ? newCache : prevCache));
-  }, [props.unstable_dataSourceCache]);
+  }, [props.unstable_dataSourceCache, options.cacheOptions]);
 
   React.useEffect(() => {
     setStrategyAvailability();