react-query Devtools未显示useMutation触发的POST请求问题

• API选型错误：页面初始加载拉取数据属于读场景，应该用useQuery，你误用了面向写操作（增/删/改、提交类操作）的useMutation。
• Devtools识别逻辑：React Query Devtools默认优先展示被缓存管理的Query记录，Mutation本身设计为一次性副作用操作，不会进入长期缓存列表，加上你手动用本地useState存返回数据，完全绕开了React Query的状态托管，自然不会生成可追踪的查询记录。
• 额外过滤可能：如果Devtools开启了「仅显示活跃查询」过滤规则，已完成的无状态托管Mutation会被直接过滤隐藏。

• 场景与API不匹配：useMutation设计用于触发有状态变更的副作用操作（比如提交表单、删除数据），不适合初始化拉取数据的场景。
• 冗余本地状态：不需要单独用useState存储接口返回值，React Query本身会托管请求返回的数据、加载态、错误态，手动存state会完全绕过React Query的缓存和状态追踪能力。
• 语法冗余：async/await和.then链式调用混用，没有必要。
• 多余触发逻辑：不需要手动写useEffect在组件挂载时触发请求，useQuery默认会在组件挂载时自动执行请求逻辑。
• 认知误区：不要认为useQuery只能发GET请求，它不限制请求方法，只要是拉取数据、期望结果被缓存管理的场景，不管用POST还是其他请求方法，都应该用useQuery。

// 移除冗余的本地snapshotData状态
const { 
  data: snapshotData = [], // 直接从useQuery解构返回数据，设置空数组为默认值
  isError, 
  isLoading 
} = useQuery({
  // 必须配置全局唯一的queryKey，Devtools依靠这个key识别、展示查询记录
  queryKey: ['dashboardSnapshot'],
  queryFn: async () => {
    const payload = {
      L3: null,
      L4: null,
    };
    const res = await axios.post("/dashboard/snapshot/", payload);
    // 直接return接口返回数据，React Query会自动完成缓存、状态更新
    return res.data;
  },
  retry: 3,
});

替换代码后刷新页面，就能在React Query Devtools中看到对应请求的完整记录，包括请求状态、返回数据、重试日志、缓存配置等全部信息。

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