如何让useLazyQuery也支持fixedCacheKey的状态共享特性?
useLazyQuery 状态共享实现方案
useLazyQuery 本身没有像 useMutation 那样的 fixedCacheKey 选项,但你可以通过以下两种方式实现多组件间共享 isSuccess、isError 等状态标识:
利用 RTK Query 内置缓存机制
对于 GET 请求,RTK Query 会自动根据请求的 endpoint 和查询参数生成缓存 key。只要多个 useLazyQuery 实例调用的是同一个 endpoint,且传入的查询参数完全一致,它们就会共享同一份缓存数据,对应的isSuccess、isError、data等状态也会自动同步。触发其中一个实例的trigger方法后,所有使用相同查询参数的实例都会同步更新状态。封装自定义 Hook 复用实例
如果需要强制让多个组件共享同一个 useLazyQuery 实例的状态(即使查询参数可能变化),可以自己封装一个自定义 Hook,在内部调用 useLazyQuery,然后在多个组件中导入复用这个自定义 Hook。这样所有组件都会绑定到同一个 useLazyQuery 实例,状态自然同步。
示例代码(自定义 Hook 方式):
// 自定义Hook import { useLazyQuery } from '@reduxjs/toolkit/query/react'; import { api } from './apiSlice'; export const useSharedLazyQuery = () => { return useLazyQuery(api.endpoints.getSomeData); }; // 组件A中使用 const ComponentA = () => { const [trigger, { isSuccess, isError }] = useSharedLazyQuery(); // 业务逻辑 }; // 组件B中使用 const ComponentB = () => { const [trigger, { isSuccess, isError }] = useSharedLazyQuery(); // 业务逻辑 };
内容的提问来源于stack exchange,提问作者lucataglia
相关产品推荐
相关产品推荐

