点击按钮时如何让Apollo GraphQL全缓存失效而非单查询

如果要一键触发页面上所有查询重新拉取数据，Apollo提供了几种直接的方式，不用逐个处理单个查询：

方法1：重新获取所有活跃查询 #

用Apollo Client的refetchQueries方法，不传具体查询名称的话，会自动重新获取当前所有处于活跃状态的查询（也就是正在组件中渲染的查询）：

import { useApolloClient } from '@apollo/client';

function RefreshButton() {
  const client = useApolloClient();

  const handleRefresh = async () => {
    // 重新获取所有活跃查询，include: 'active'为默认值可省略
    await client.refetchQueries({ include: 'active' });
  };

  return <button onClick={handleRefresh}>刷新所有数据</button>;
}

方法2：重置缓存并重新获取所有查询 #

如果需要彻底清空缓存再重新拉取所有数据（比如全局数据更新导致缓存完全失效的场景），用resetStore()方法：

import { useApolloClient } from '@apollo/client';

function FullRefreshButton() {
  const client = useApolloClient();

  const handleFullRefresh = async () => {
    try {
      // 清空缓存后自动重新执行所有活跃查询
      await client.resetStore();
      console.log('所有数据已刷新');
    } catch (err) {
      console.error('刷新失败:', err);
    }
  };

  return <button onClick={handleFullRefresh}>彻底刷新所有数据</button>;
}

注意点 #

• refetchQueries只会处理当前活跃的查询，已卸载组件对应的查询不会被触发
• resetStore会清空整个缓存（包括Apollo存储的本地状态），如果有需要保留的本地数据，需提前处理或刷新后重新写入

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