React中Ag-Grid服务端行模式初始过滤器引发重复API调用问题

问题根源在于：设置服务端数据源时，Ag-Grid会自动发起一次不带过滤器的初始请求；随后调用setFilterModel又会触发一次带自定义过滤器的请求，从而产生两次调用。以下是几种可行的解决方案：

方案一：通过initialFilterModel提前配置过滤器 #

直接在网格配置中预设初始过滤器模型，让Ag-Grid在初始化阶段就使用该模型，设置数据源后只会发起一次带过滤器的请求。

import { AgGridReact } from 'ag-grid-react';
import { useMemo } from 'react';

const YourComponent = () => {
  const gridOptions = useMemo(() => ({
    // 其他网格配置（列定义、分页等）
    serverSideRowModel: true,
    initialFilterModel: getFilterModel(), // 提前注入初始过滤器
  }), [getFilterModel]);

  const createServerSideDatasource = () => ({
    getRows: async (params) => {
      const response = await getTableRows(params.request);
      response.success 
        ? params.success({ rowData: response.rows, rowCount: response.lastRow })
        : params.fail();
    },
  });

  return (
    <AgGridReact
      gridOptions={gridOptions}
      serverSideDatasource={createServerSideDatasource()}
      // 其他props
    />
  );
};

方案二：在gridReady中取消空请求并手动触发带过滤器的请求 #

先设置过滤器模型，再配置数据源，随后取消Ag-Grid自动发起的空请求，手动触发一次带过滤器的请求：

const onGridReady = useCallback((params: GridReadyEvent) => {
  const filterModel = getFilterModel();
  params.api.setFilterModel(filterModel);

  const datasource = createServerSideDatasource();
  params.api.setServerSideDatasource(datasource);

  // 取消自动发起的空请求，手动触发带过滤器的请求
  params.api.cancelServerSideRequest();
  params.api.refreshServerSideStore({ purge: true });

  setGridApi(params.api);
  setColumnApi(params.columnApi);
}, []);

方案三：在数据源中拦截第一次请求并替换过滤器 #

如果无法提前配置网格选项，可以在数据源的getRows方法中，对第一次空过滤器请求进行拦截，替换为预设的过滤器模型：

const createServerSideDatasource: () => IServerSideDatasource = () => {
  let isFirstRequest = true;
  return {
    getRows: async (params) => {
      let request = params.request;
      // 第一次请求且过滤器为空时，替换为自定义过滤器
      if (isFirstRequest && !request.filterModel) {
        request = { ...request, filterModel: getFilterModel() };
        isFirstRequest = false;
      }

      const response = await getTableRows(request);
      if (response.success) {
        params.success({ rowData: response.rows, rowCount: response.lastRow });
      } else {
        params.fail();
      }
    },
  };
};

以上三种方案都能实现仅发起一次带自定义过滤器的API请求，推荐优先使用方案一，因为它更符合Ag-Grid的设计规范，代码也更简洁。

内容的提问来源于stack exchange，提问作者Patryk Kubacki