RTK中如何合规按顺序调用Mutation与Query？

核心思路是利用 RTK Query 的 skip 参数控制查询时机，既符合 React Hook 规则，又能实现「先执行创建任务 Mutation，再启动进度轮询 Query」的逻辑。

修改后的完整代码 #

import { useParams, useEffect, useState } from 'react';
import { useCreateJobMutation, useGetJobIdQuery } from './apiSlice';

const StatusPage = () => {
  const { id, version } = useParams();
  const [stopPolling, setStopPolling] = useState(false);
  const pollInterval = stopPolling ? 0 : 1000;

  // 初始化创建任务的 Mutation
  const [createJob, { data: postData, isSuccess, error }] = useCreateJobMutation();
  
  // 用 skip 控制 Query 执行时机：仅当 jobId 存在时才发起轮询
  const { data: jobProgress } = useGetJobIdQuery(
    postData?.[0]?.id, 
    { 
      pollingInterval: pollInterval,
      skip: !postData?.[0]?.id // jobId 不存在时跳过查询
    }
  );

  // 进度完成时停止轮询并处理业务逻辑
  useEffect(() => {
    if (jobProgress?.progress === 100) {
      setStopPolling(true);
      // 此处添加任务完成后的逻辑，如跳转页面、展示结果等
      console.log('任务执行完成', jobProgress);
    }
  }, [jobProgress]);

  // 页面加载时触发任务创建
  useEffect(() => {
    const newJob = { id, version }; // 根据实际业务构造请求参数
    createJob(newJob);
  }, [id, version, createJob]);

  // 错误状态展示
  if (error) {
    return <div>任务创建失败：{error.message}</div>;
  }

  return (
    <div>
      {!postData && <div>正在创建任务...</div>}
      {postData && jobProgress && (
        <div>当前进度：{jobProgress.progress}%</div>
      )}
      {stopPolling && <div>任务已完成！</div>}
    </div>
  );
};

export default StatusPage;

关键说明 #

1. skip 参数控制查询时机
   useGetJobIdQuery 每次渲染都会被调用，但通过 skip: !postData?.[0]?.id 让 Query 在 jobId 未生成时跳过执行，直到 Mutation 成功返回 postData 后自动启动轮询，完全符合 Hook 调用规则。

2. 动态停止轮询
   用 stopPolling 状态切换轮询间隔：当进度达到 100% 时将间隔设为 0，自动停止轮询；也可直接将 skip 设为 stopPolling，效果一致。

3. 避免 undefined 报错
   使用可选链 postData?.[0]?.id，防止初始渲染时 postData 为 undefined 导致的属性访问错误。

4. 修正 useEffect 依赖
   将路由参数 id、version 和 createJob 加入依赖数组，确保路由参数变化时重新创建任务，同时满足 React Hook 的依赖规则。

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