如何使react-query中useMutation实现的类GET请求失效？

核心原因很明确：useMutation的请求不会被react-query的缓存系统管理，只有useQuery创建的请求才会被缓存、监听并响应invalidateQueries的失效指令。所以你直接传端点给invalidateQueries没用，因为mutation根本不在缓存池里。

给你两种可行的解决办法：

方法一：改用useQuery模拟POST请求（推荐） #

既然你是把POST当GET用，直接用useQuery更贴合需求，还能享用到react-query的缓存、自动重试、背景刷新等特性。只需要在queryFn里发送POST请求就行：

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

// 组件内使用
const queryClient = useQueryClient()
const { data, isLoading } = useQuery(
  ['post-get-data'], // 自定义queryKey，失效时要匹配这个键
  async () => {
    const res = await fetch('/your-api-endpoint', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ param1: 'value1' }) // 你的请求参数
    })
    return res.json()
  }
)

// 其他操作后触发失效重跑
const handleRefresh = () => {
  queryClient.invalidateQueries(['post-get-data'])
}

这样调用invalidateQueries时，react-query会自动重新执行这个POST请求，和普通GET请求的useQuery逻辑完全一致。

方法二：如果必须用useMutation，手动触发重跑 #

要是因为某些限制必须保留useMutation，那只能手动调用mutation的触发函数来实现“重跑”：

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

// 组件内使用
const queryClient = useQueryClient()
const [triggerPostRequest] = useMutation(async () => {
  const res = await fetch('/your-api-endpoint', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ param1: 'value1' })
  })
  return res.json()
})

// 其他操作后手动触发重跑
const handleAfterAction = async () => {
  // 先执行你的其他操作，比如另一个mutation
  await someOtherMutation.mutateAsync()
  // 手动调用POST请求的mutation
  await triggerPostRequest()
}

这种方式相当于主动重新发起请求，没有用到缓存失效机制，但能达到你要的“重跑”效果。

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