能否用react-query实现POST请求？具体实现方法是什么？

React Query 完全支持POST等数据提交操作，这类变更操作主要通过 useMutation Hook 实现，以下是具体实现步骤和技巧：

核心：使用useMutation处理POST请求 #

useMutation 是React Query专门用于处理数据变更（POST/PUT/DELETE等）的Hook，和用于查询的useQuery逻辑互补。

基础实现步骤 #

1. 导入Hook

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

2. 封装POST请求函数
   用你习惯的HTTP库（fetch/axios）封装POST请求，注意处理错误：

// 示例：用fetch实现POST请求
const submitData = async (formPayload) => {
  const res = await fetch('https://your-api-domain.com/submit', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      // 如有需要，添加授权头：Authorization: `Bearer ${token}`
    },
    body: JSON.stringify(formPayload),
  });

  if (!res.ok) {
    throw new Error(`请求失败：${res.statusText}`);
  }

  return res.json();
};

3. 在组件中使用useMutation
   在组件内初始化useMutation，并绑定提交触发逻辑：

function SubmitForm() {
  // 初始化mutation
  const { mutate, isLoading, error, isSuccess } = useMutation({
    mutationFn: submitData,
    onSuccess: (responseData) => {
      // 提交成功后的操作：比如提示用户、刷新关联数据
      console.log('提交返回数据:', responseData);
    },
    onError: (err) => {
      // 处理错误：比如显示错误提示
      console.error('提交失败:', err.message);
    },
  });

  // 触发提交的函数
  const handleSubmit = () => {
    const formData = { username: 'test', email: 'test@example.com' };
    mutate(formData); // 调用mutate传入请求参数
  };

  return (
    <div>
      <button onClick={handleSubmit} disabled={isLoading}>
        {isLoading ? '提交中...' : '提交表单'}
      </button>
      {/* 状态提示 */}
      {error && <p style={{ color: 'red' }}>{error.message}</p>}
      {isSuccess && <p style={{ color: 'green' }}>提交成功！</p>}
    </div>
  );
}

进阶技巧 #

提交后刷新关联查询数据

如果提交后需要更新之前用useQuery获取的列表/详情数据，可以结合useQueryClient实现自动刷新：

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

function SubmitForm() {
  const queryClient = useQueryClient(); // 获取QueryClient实例

  const mutation = useMutation({
    mutationFn: submitData,
    onSuccess: () => {
      // 刷新key为'user-list'的查询数据
      queryClient.invalidateQueries({ queryKey: ['user-list'] });
    },
  });

  // ...其余逻辑不变
}

乐观更新（提升用户体验）

想要在请求完成前就更新UI，可以通过乐观更新实现，失败时再回滚：

const mutation = useMutation({
  mutationFn: submitData,
  onMutate: async (newUser) => {
    // 暂停当前查询，避免数据冲突
    await queryClient.cancelQueries({ queryKey: ['user-list'] });
    // 保存当前查询的原始数据
    const previousUsers = queryClient.getQueryData(['user-list']);
    // 提前更新UI数据
    queryClient.setQueryData(['user-list', [...previousUsers, newUser]]);
    // 返回上下文，用于错误回滚
    return { previousUsers };
  },
  onError: (err, newUser, context) => {
    // 请求失败，回滚数据
    queryClient.setQueryData(['user-list'], context.previousUsers);
  },
  onSettled: () => {
    // 无论成败，最终刷新查询确保数据一致
    queryClient.invalidateQueries({ queryKey: ['user-list'] });
  },
});

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