如何在组件加载时自动调用TanStack Query的useMutation？

首先得明确：TanStack Query的useMutation设计初衷是处理数据修改操作（比如增删改），获取数据更适合用useQuery——它会自动在组件挂载时触发请求，还自带缓存、自动重试等功能。不过如果你的后端确实要求用POST请求获取列表，那也可以用useMutation实现组件加载时自动执行，下面是具体方案：

方法1：用useEffect触发mutate（组件挂载时执行） #

直接在组件里用useEffect，依赖项设为包含mutate、userId、token的数组，组件一加载就调用mutate：

import { useEffect, useState } from 'react';
import { fetchClient } from './你的模块路径';

function ClientList() {
  const [clients, setClients] = useState([]);
  const { mutate } = fetchClient();
  // 假设userId和token从上下文、状态或路由中获取
  const userId = '你的用户ID';
  const token = '你的令牌';

  useEffect(() => {
    const requestData = { userId, token };
    mutate(requestData, {
      onSuccess: (response) => {
        if (response.status === 200) {
          setClients(response.data.client);
        }
      },
      onError: (error) => {
        console.error('获取客户列表失败:', error);
      }
    });
  }, [mutate, userId, token]); // 依赖项确保参数变化时重新请求

  return (
    <div>
      {/* 渲染客户列表 */}
    </div>
  );
}

方法2：推荐改用useQuery（更贴合TanStack Query设计） #

如果后端支持用GET请求获取列表，强烈建议换成useQuery，这才是TanStack Query处理数据查询的标准方式：

先修改请求函数为GET方式：

import axios from 'axios';

export const fetchClients = async ({ userId, token }) => {
  const res = await axios.get(`${import.meta.env.VITE_BASE_URL}/client/List`, {
    params: { userId },
    headers: { Authorization: `Bearer ${token}` } // 根据后端要求传递token
  });
  return res.data.client;
};

然后在组件中使用useQuery：

import { useQuery } from '@tanstack/react-query';
import { fetchClients } from './你的模块路径';

function ClientList() {
  const userId = '你的用户ID';
  const token = '你的令牌';

  const { data: clients, isLoading, error } = useQuery({
    queryKey: ['clients', userId, token], // 缓存键，参数变化时自动重新请求
    queryFn: () => fetchClients({ userId, token }),
  });

  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>加载失败：{error.message}</div>;

  return (
    <div>
      {/* 渲染客户列表 */}
    </div>
  );
}

注意事项 #

• 若必须用POST请求获取数据，使用方法1时可通过axios取消令牌处理组件卸载时的请求，避免内存泄漏。
• useQuery会自动缓存请求结果，相同queryKey不会重复发起请求；而useMutation每次调用都会发送新请求，这是两者的核心差异。

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