如何用RTK Query发起静态URL的POST请求并动态修改请求体

完全可以实现，RTK Query支持将动态参数传入请求体，并且会像处理动态端点一样对不同参数组合的请求进行缓存和优化，具体实现方式如下：

1. 定义带动态请求体的API端点 #

创建API Slice时，在query函数中接收动态参数，将其与默认请求体合并，生成最终的POST请求体：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const dataApi = createApi({
  reducerPath: 'dataApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'http://dummy.yt/' }),
  endpoints: (builder) => ({
    fetchData: builder.query({
      // 接收动态参数作为入参
      query: (dynamicParams) => ({
        url: 'fetch/',
        method: 'POST',
        // 合并默认请求体和动态参数，动态参数会覆盖默认值
        body: {
          type: 'Data_one',
          include: '*',
          limit: 4,
          ...dynamicParams
        }
      })
    })
  })
});

// 导出自动生成的Hook
export const { useFetchDataQuery } = dataApi;

2. 在组件中动态传入请求体参数 #

在组件里调用生成的Hook时，传入需要修改的请求体参数（比如offset），RTK Query会根据参数的不同维护独立的缓存：

import { useState } from 'react';
import { useFetchDataQuery } from './dataApi';

function DataList() {
  const [currentOffset, setCurrentOffset] = useState(0);
  // 传入当前offset作为动态参数
  const { data, error, isLoading } = useFetchDataQuery({ offset: currentOffset });

  const handleNextPage = () => {
    // 更新offset，触发新的请求
    setCurrentOffset(prev => prev + 1);
  };

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

  return (
    <div>
      <ul>
        {data?.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
      <button onClick={handleNextPage}>下一页</button>
    </div>
  );
}

export default DataList;

关键说明 #

• RTK Query会将传入的dynamicParams作为缓存键的一部分，不同参数组合的请求会被视为独立请求，各自缓存结果，和动态端点的优化逻辑一致。
• 如果需要修改其他请求体参数（比如limit），直接在传入的参数对象中添加即可，比如useFetchDataQuery({ limit: 8, offset: 1 })，参数会自动覆盖默认值。
• 若接口是用于修改数据的POST请求，可改用builder.mutation，逻辑类似，只需将useFetchDataQuery换成useFetchDataMutation。

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