@tanstack/react-query中执行mutation后数据刷新失效的问题

看起来你遇到的问题是点击收藏按钮后，调用invalidateQueries没能正确触发profile查询的重新获取——虽然onSuccess里的console.log能正常打印，但页面的收藏状态就是没更新对吧？我帮你分析几个可能的原因和对应的解决办法：

1. 检查Query Key的匹配与唯一性 #

你的useProfile里的查询键是['profile']，但这里有个隐藏问题：查询的queryFn依赖user?.id，但queryKey里没有包含这个关键参数。React Query是通过queryKey来区分不同查询的，如果多个用户（或者同一用户登录前后）的profile查询用同一个['profile']键，缓存会混乱，而且调用invalidateQueries时可能无法精准匹配到当前用户的活跃查询。

修改useProfile的queryKey，把user?.id加进去，确保每个用户的profile查询是独立的：

// useProfile.ts
export const useProfile = () => {
  const { user } = useUser();

  const { data } = useQuery({
    queryKey: ['profile', user?.id], // 加入user.id作为查询键的一部分
    queryFn: () => UserService.getProfile(user?.id || ""),
    select: ({ data }) => data,
    enabled: !!user?.id, // 新增：只有当user.id存在时才执行查询，避免无效请求
  });

  return { profile: data };
};

然后在LikeButton里，也要同步更新invalidateQueries的queryKey，同时需要引入useUser获取当前用户id：

// LikeButton.tsx
import { useUser } from '@/hooks/useUser'; // 新增导入

function LikeButton({ productId }: ILikeButtonProps) {
  const { profile } = useProfile();
  const { user } = useUser(); // 获取当前用户
  const queryClient = useQueryClient(); // 注意：直接用实例更清晰，避免解构可能的问题

  const { mutate } = useMutation({
    mutationKey: ['toggle favourite'],
    mutationFn: () => UserService.toggleFavourite(productId),
    onSuccess: () => {
      console.log('onSuccess');
      // 用包含user.id的queryKey来失效查询
      queryClient.invalidateQueries({ queryKey: ['profile', user?.id] });
    },
  });

  // ... 其余代码不变
}

2. 确认查询是否处于活跃状态 #

React Query只会重新获取当前处于活跃状态的查询（也就是正在被挂载组件使用的查询）。如果调用useProfile的组件在点击LikeButton时已经卸载，或者没有渲染，invalidateQueries就不会触发重新获取。你可以做个简单验证：

• 在useProfile的useQuery里添加onSuccess回调，看看查询是否真的重新执行了：

  useQuery({
    // ... 其他配置
    onSuccess: () => console.log('Profile query refetched!'),
  })
  

如果这个日志没打印，说明查询不是活跃状态，需要检查使用useProfile的组件是否一直处于挂载中。

3. 备选方案：手动更新缓存（无需重新请求） #

如果invalidateQueries还是不生效，你可以尝试直接手动更新profile的缓存数据，不用重新调用接口——这样效率更高也更可靠，前提是你清楚收藏操作后favourites的变化逻辑：

// LikeButton.tsx的mutation onSuccess
onSuccess: () => {
  console.log('onSuccess');
  queryClient.setQueryData(['profile', user?.id], (oldProfile) => {
    if (!oldProfile) return oldProfile;

    // 判断当前商品是否已在收藏列表中，决定添加或移除
    const isFavourited = oldProfile.favourites.some(fp => fp.id === productId);
    return {
      ...oldProfile,
      favourites: isFavourited
        ? oldProfile.favourites.filter(fp => fp.id !== productId)
        : [...oldProfile.favourites, { id: productId }] // 如果需要完整商品数据，可以用mutation返回的结果替换这里的对象
    };
  });
}

这个方法直接修改React Query的缓存，能立即更新组件显示的收藏状态，不需要等待接口重新请求。

备注：内容来源于stack exchange，提问作者dyakonovr