AGGrid集成react-query useQuery问题：表格失效与刷新失败

一、用react-query自动更新驱动AG Grid刷新（推荐） #

别在onGridReady里手动fetch数据，直接把react-query返回的data作为AG Grid的rowData。react-query缓存失效后会自动更新数据，AG Grid检测到rowData变化会自动刷新表格，完全不用手动调用刷新方法：

import { useQuery } from '@tanstack/react-query';
import { AgGridReact } from 'ag-grid-react';

const MyGrid = () => {
  // 组件顶层正常使用useQuery获取数据
  const { data: rowData, invalidateQueries } = useQuery({
    queryKey: ['gridData'],
    queryFn: () => fetch('/api/data').then(res => res.json()),
  });

  // 触发失效时，直接调用react-query的方法
  const handleInvalidate = () => {
    invalidateQueries({ queryKey: ['gridData'] });
  };

  return (
    <>
      <button onClick={handleInvalidate}>刷新表格</button>
      <div className="ag-theme-alpine">
        <AgGridReact
          rowData={rowData}
          columnDefs={[/* 你的列定义 */]}
          // onGridReady里只做Api存储这类初始化操作
          onGridReady={(params) => {
            useGridStore.setState({ gridApi: params.api });
          }}
        />
      </div>
    </>
  );
};

这种方式完全贴合React和AG Grid的设计逻辑，既能用到react-query的缓存、失效特性，又不用处理复杂的手动刷新逻辑。

二、修复手动调用refreshCells的问题 #

如果一定要手动控制刷新，检查以下几个关键点：

1. 确认GridApi正确存入zustand
   避免在onGridReady时存进去的是undefined，用zustand的方法明确存储：

// zustand store定义
import { create } from 'zustand';

const useGridStore = create((set) => ({
  gridApi: null,
  setGridApi: (api) => set({ gridApi: api }),
}));

// 组件内的onGridReady回调
onGridReady={(params) => {
  useGridStore.getState().setGridApi(params.api);
}}

2. 调用refreshCells时传对参数
   要强制刷新所有单元格，需要带上force: true参数，不然可能会走缓存不生效：

const handleInvalidate = async () => {
  // 先让react-query失效并拉取新数据
  await invalidateQueries({ queryKey: ['gridData'] });
  // 获取存储的GridApi
  const gridApi = useGridStore.getState().gridApi;
  if (gridApi) {
    gridApi.refreshCells({
      force: true,
      // 要是只需要刷新特定列，加columns: ['columnName1', 'columnName2']
    });
  }
};

3. 确认数据真的更新了
   调用invalidateQueries后，要检查react-query是否已经拿到新数据、rowData是否更新。如果数据没变化，refreshCells自然不会有效果。

三、避开onGridReady里用Hooks的误区 #

onGridReady是AG Grid的DOM回调，不能在里面用React Hooks（比如useQuery），这违反了Hooks的调用规则。数据请求应该放在组件顶层或者合法的Hooks调用位置，把结果传给AG Grid的rowData即可。

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