如何在无Mutation的情况下重新获取Apollo特定查询？

嘿，刚好我之前也碰到过一模一样的需求，给你分享几个实用的方案，不用依赖Mutation也能轻松刷新指定的查询：

方法1：直接用useQuery返回的refetch函数 #

这是最直接的操作方式，useQuery钩子本身就自带了refetch方法，专门用来重新执行当前绑定的查询。你只需要在服务器调用完成的回调里调用它就行，甚至还能按需传递新的查询变量。

举个代码示例：

import { useQuery } from '@apollo/client';
import GET_TARGET_DATA from './queries/GetTargetData';

function TargetComponent() {
  const { loading, error, data, refetch } = useQuery(GET_TARGET_DATA);

  // 模拟服务器调用完成后的处理函数
  const afterServerCall = async () => {
    // 调用refetch重新拉取数据
    await refetch();
    console.log('目标查询已重新获取');
  };

  if (loading) return <p>加载中...</p>;
  if (error) return <p>出错啦：{error.message}</p>;

  return (
    <div>
      <button onClick={afterServerCall}>刷新数据</button>
      {/* 这里渲染你的数据内容 */}
    </div>
  );
}

这个方案简单直接，完全和当前组件的查询绑定，不需要额外的全局配置。

方法2：通过Apollo Client实例调用refetchQueries #

如果需要在组件外部（比如全局工具函数、状态回调里）刷新查询，可以直接获取Apollo Client实例，调用它的refetchQueries方法，精准指定要刷新的目标查询。

示例代码：

import { useApolloClient } from '@apollo/client';
import GET_TARGET_DATA from './queries/GetTargetData';

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

  const afterServerCall = async () => {
    await client.refetchQueries({
      include: [GET_TARGET_DATA] // 可以传入查询文档或者查询名称字符串
    });
  };

  // 组件渲染逻辑...
}

这种方式适合批量刷新多个查询，或者在非组件环境下操作的场景，灵活性很强。

方法3：清除缓存后重新查询 #

如果你的需求是强制绕过缓存，从服务器拉取最新数据，可以先清除对应查询的缓存条目，再重新执行查询。

示例代码：

import { useQuery, useApolloClient } from '@apollo/client';
import GET_TARGET_DATA from './queries/GetTargetData';

function TargetComponent() {
  const { data } = useQuery(GET_TARGET_DATA);
  const client = useApolloClient();

  const afterServerCall = async () => {
    // 先清除该查询的缓存
    await client.cache.evict({ query: GET_TARGET_DATA });
    // 重新执行查询
    await client.query({ query: GET_TARGET_DATA });
  };

  // 组件渲染逻辑...
}

注意：如果你的查询带有变量，记得在evict和query的时候都传入对应的变量参数，否则可能无法精准匹配缓存条目。

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