RTK技术问题：如何在Mutation成功后执行refetch？

问题描述 #

我希望在Mutation成功后调用refetch函数，现有代码如下：

const [joinTeam ] = useJoinTeamMutation();
const { refetch } = useGetTeam(slugName);

我尝试了以下实现方式：

joinTeam().then((res: any) => {
     if (!res.error) {
          refetch();
     }
});

但运行后出现错误：无法重新获取尚未启动的查询

问题原因 #

报错的核心是useGetTeam对应的查询还没被触发执行过，导致refetch方法处于不可用状态。

解决方法 #

方法1：确保查询默认执行

检查useGetTeam的配置，确认是否设置了enabled: false这类阻止查询自动启动的参数。如果有，要么移除该配置，要么确保在调用refetch前已经触发过查询：

// 假设useGetTeam是React Query自定义hook，确保默认启用查询
const { refetch } = useGetTeam(slugName, { enabled: true });

方法2：调用前检查refetch可用性

在调用refetch前先判断它是否存在且可调用，避免报错：

joinTeam().then((res: any) => {
     if (!res.error && refetch) {
          refetch();
     }
});

方法3：用queryClient直接触发查询（更可靠）

如果使用React Query，直接通过queryClient的fetchQuery或invalidateQueries更新数据，无需依赖refetch：

import { useQueryClient } from '@tanstack/react-query';

const queryClient = useQueryClient();
const [joinTeam ] = useJoinTeamMutation({
  onSuccess: () => {
    // 直接重新获取团队数据，不受之前查询状态影响
    queryClient.fetchQuery({ 
      queryKey: ['team', slugName], 
      queryFn: () => fetchTeamData(slugName) 
    });
    // 也可以用invalidateQueries让查询自动重新获取
    // queryClient.invalidateQueries({ queryKey: ['team', slugName] });
  }
});

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