React Query中实现顺序POST请求与结果聚合

// 示例：初始尝试的简化结构
const [saveTodo, setSaveTodo] = useState([]);

const { mutateAsync: individualMutateAsync } = useMutation({
  mutationFn: (data) => axios.post("https://jsonplaceholder.typicode.com/posts", data),
  onSuccess: (data) => {
    // 在这里更新状态，但这是异步的
    setSaveTodo((prev) => [...prev, data.data.post]);
  },
});

const { mutateAsync: finalMutateAsync } = useMutation({
  mutationFn: (data) => axios.post("https://jsonplaceholder.typicode.com/posts", data),
});

const postUrlSubmit = async (urls, idx) => {
  const url = urls[idx];
  await individualMutateAsync(url, {
    onSettled: () => {
      const next = urls?.[idx + 1];
      if (next) {
        postUrlSubmit(urls, idx + 1);
      } else {
        // 问题所在：此时 saveTodo 状态可能还未完全更新
        finalMutateAsync(saveTodo);
      }
    },
  });
};

const handleSubmit = async () => {
  await postUrlSubmit(["Todo 1", "Todo 2", "Todo 3"], 0);
};

import React, { useState } from 'react';
import { useMutation, QueryClient, QueryClientProvider } from '@tanstack/react-query';
import axios from 'axios';

// 创建一个QueryClient实例
const queryClient = new QueryClient();

// 模拟API请求函数
const postData = async (data) => {
  const response = await axios.post("https://jsonplaceholder.typicode.com/posts", {
    title: data, // 示例中传入的是字符串，这里包装成对象
    body: 'bar',
    userId: 1,
  });
  return response.data; // 返回完整的响应数据
};

const finalPostData = async (data) => {
  console.log("最终发送的数据:", data); // 打印最终聚合的数据
  const response = await axios.post("https://jsonplaceholder.typicode.com/posts", {
    aggregatedData: data, // 将聚合数据作为请求体
  });
  return response.data;
};

function AppContent() {
  // 定义第一个mutation，用于发送单个POST请求
  const individualMutation = useMutation({
    mutationFn: postData,
  });

  // 定义第二个mutation，用于发送最终聚合的POST请求
  const finalMutation = useMutation({
    mutationFn: finalPostData,
  });

  const handleSequentialPosts = async () => {
    const itemsToPost = ["Todo 1", "Todo 2", "Todo 3"]; // 需要顺序发送的数据项
    const collectedResponses = []; // 用于收集每个请求的响应

    // 使用 reduce 方法构建异步序列
    await itemsToPost.reduce(async (previousPromise, currentItem, index) => {
      // 1. 等待前一个Promise完成，确保顺序执行
      await previousPromise;

      try {
        // 2. 执行当前项的POST请求
        const response = await individualMutation.mutateAsync(currentItem);
        console.log(`请求 ${currentItem} 完成，响应:`, response);
        // 3. 将响应数据收集到本地数组中
        collectedResponses.push(response);
      } catch (error) {
        console.error(`请求 ${currentItem} 失败:`, error);
        // 根据需求决定是否继续或中断。这里选择继续，因为需求是“无论对错”
        // 如果需要中断，可以在这里抛出错误或返回 Promise.reject()
      }

      // 4. 如果是最后一个请求，并且收集到了数据，则发送最终的聚合请求
      if (index === itemsToPost.length - 1 && collectedResponses.length > 0) {
        console.log("所有独立请求完成，开始发送最终聚合数据...");
        try {
          await finalMutation.mutateAsync(collectedResponses);
          console.log("最终聚合数据发送成功！");
        } catch (error) {
          console.error("发送最终聚合数据失败:", error);
        }
      }
      // 返回一个解决的Promise，作为下一次迭代的 previousPromise
      return Promise.resolve();
    }, Promise.resolve()); // reduce 的初始值是一个已解决的Promise

    console.log("所有操作已完成。");
  };

  return (
    <div>
      <h1>顺序POST请求与结果聚合</h1>
      <button onClick={handleSequentialPosts} disabled={individualMutation.isPending || finalMutation.isPending}>
        {individualMutation.isPending || finalMutation.isPending ? '发送中...' : '开始顺序POST'}
      </button>
      {individualMutation.isError && <p style={{ color: 'red' }}>单个请求出错: {individualMutation.error.message}</p>}
      {finalMutation.isError && <p style={{ color: 'red' }}>最终请求出错: {finalMutation.error.message}</p>}
      {individualMutation.isSuccess && <p style={{ color: 'green' }}>部分请求成功！</p>}
      {finalMutation.isSuccess && <p style={{ color: 'green' }}>所有请求及聚合发送成功！</p>}
    </div>
  );
}

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <AppContent />
    </QueryClientProvider>
  );
}

export default App;