能否使用RTK Query调用仅接受POST请求的REST接口并启用缓存？

当然可以实现——RTK Query的query钩子并非只能处理GET请求，完全可以配置成POST方式，同时利用其内置的缓存机制避免重复请求，不需要用mutation。

核心思路 #

RTK Query的mutation是为修改数据的操作设计的（比如增删改），不会缓存结果；而query是为获取数据设计的，自带缓存、自动重发等特性。我们只需要在query配置里指定method: 'POST'并传入请求体即可。

具体实现步骤 #

1. 定义API Slice

创建API切片时，用builder.query定义POST请求的endpoint：

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

export const dataApi = createApi({
  reducerPath: 'dataApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/your-api-base-url' }),
  endpoints: (builder) => ({
    fetchDataViaPost: builder.query({
      // 配置POST请求，参数为请求体内容
      query: (requestBody) => ({
        url: 'your-target-endpoint',
        method: 'POST',
        body: requestBody,
      }),
      // 可选：自定义缓存过期时间（默认60秒）
      keepUnusedDataFor: 300,
      // 可选：自定义缓存key生成逻辑（默认序列化整个requestBody）
      // serializeQueryArgs: ({ queryArgs }) => JSON.stringify({ key1: queryArgs.key1 }),
    }),
  }),
});

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

2. 组件中使用Hook

直接在组件中调用useFetchDataViaPostQuery，无需手动写useEffect——Hook会自动在组件挂载、请求体参数变化时触发请求，参数不变时直接读取缓存：

import { useFetchDataViaPostQuery } from './path-to-dataApi';

function DataComponent() {
  // 定义请求体参数
  const requestParams = {
    filter: 'active',
    page: 1,
    pageSize: 10,
  };

  // 调用Hook，自动处理缓存、加载状态
  const { data, error, isLoading } = useFetchDataViaPostQuery(requestParams);

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

  return (
    <div>
      {data?.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

关键说明 #

• 缓存逻辑：RTK Query默认会根据请求的url、method和序列化后的requestBody生成缓存key，只要这些内容不变，就会直接返回缓存结果，不会发起新请求。
• 缓存控制：通过keepUnusedDataFor可以设置缓存过期时间；通过serializeQueryArgs可以自定义缓存key（比如忽略请求体中不影响返回结果的字段）。
• 无需手动管理：对比之前用mutation+useEffect的方式，这种写法完全不需要自己处理缓存判断、重复请求拦截的逻辑，RTK Query会自动完成。

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