如何在RTK-Query中使用useLazyQuery获取组件二次挂载时的缓存数据？

核心原因 #

useLazyQuery的设计是仅在调用trigger时才会查询缓存或发起请求，组件挂载时不会主动读取缓存，因此二次挂载时data初始为undefined，但点击trigger时会直接读取缓存返回数据。

可行解决方案 #

方案1：挂载时自动触发trigger（基于保存的参数） #

利用trigger在缓存存在时会直接返回数据的特性，通过保存上次查询的参数，组件挂载时自动调用trigger：

...
const [trigger, { data }] = api.useLazyQuery();
const exists: boolean = !!data;

// 点击时保存参数并触发查询
const onClickHandler = (e) => {
  const param = e.target.value;
  localStorage.setItem('lastQueryParam', param);
  trigger(param);
};

// 组件挂载时读取参数，自动触发查询（缓存存在则直接返回数据）
React.useEffect(() => {
  const lastParam = localStorage.getItem('lastQueryParam');
  if (lastParam) {
    trigger(lastParam);
  }
}, [trigger]);

React.useEffect(() => {
  console.log(data);
}, [data]);

return <> {exists && <>结果数据：{data}</>} </>
...

方案2：直接从RTK Query缓存读取数据 #

通过RTK Query的内置选择器，直接访问Redux缓存中的数据，无需调用trigger：

...
import { useSelector } from 'react-redux';

// 读取上次保存的查询参数
const lastParam = localStorage.getItem('lastQueryParam');
// 替换为你实际的endpoint名称（比如"fetchTargetData"）
const cachedData = useSelector(
  lastParam ? api.endpoints.fetchTargetData.select(lastParam) : () => undefined
);
const exists: boolean = !!cachedData;

const [trigger] = api.useLazyQuery();

const onClickHandler = (e) => {
  const param = e.target.value;
  localStorage.setItem('lastQueryParam', param);
  trigger(param);
};

return <> {exists && <>结果数据：{cachedData}</>} </>
...

方案3：改用useQuery（参数可提前获取时） #

如果组件挂载时能确定查询参数（比如从路由、全局状态获取），直接用useQuery替代，它会自动读取缓存并渲染数据：

...
const queryParam = localStorage.getItem('lastQueryParam');
// 参数存在时自动查询，不存在则跳过
const { data, refetch } = api.useQuery(queryParam, { skip: !queryParam });
const exists: boolean = !!data;

const onClickHandler = (e) => {
  const param = e.target.value;
  localStorage.setItem('lastQueryParam', param);
  // 用refetch触发新的查询
  refetch(param);
};

return <> {exists && <>结果数据：{data}</>} </>
...

注意事项 #

• 缓存有效期：RTK Query默认keepUnusedDataFor为5分钟，可在endpoint配置中调整该值延长缓存时间
• 参数存储：跨会话保留用localStorage，仅当前会话用sessionStorage，多页应用也可使用路由参数或全局状态管理

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