使用RTK自定义查询缓存密钥(redux工具包查询)

4sup72z8  于 2023-01-26  发布在  其他
关注(0)|答案(2)|浏览(152)

我试过阅读文档,但什么都没有,有没有办法覆盖默认的RTK查询缓存键机制,这样我就可以设置我自己的键一样,在React查询?如果是这样,如何?

waxmsbnn

waxmsbnn1#

是,使用序列化QueryArgs。
但一般来说,RTK查询中的缓存键是一个实现细节,我不认为有很多很好的理由去摆弄它?

4jb9z9bj

4jb9z9bj2#

我需要有自己的缓存键,因为我在子组件中查询一些数据,并且我想在祖父组件中使用这些数据,我使用的是惰性查询,所以我将按需获取数据(onClick)。
问题是每次使用查询时,redux工具包查询都会创建一个新示例,这意味着可以在不同的组件中使用相同的惰性查询函数,而不会让它们相互干扰。
回到我的问题,在两个组件之间共享数据的唯一方法是使用mutations,因为您实际上可以提供自己的fixedCacheKey,这意味着具有相同fixedCacheKey的每个变体都可以访问相同的数据,而不必每次都调用fetch函数。或者把它保存到一个单独的切片中(我发现这真的很没品味)。下面是一个例子:
孙组件:

const GrandChild = () => {
const [mutationFunc, {data, isLoading, error}] = useGetDataMutation({fixedCacheKey: 'Your key'})

return(
<div>
    <button onClick={mutationFunc}>
        fetchData
    </button>
</div>
)
}

以及祖函数:

const GrandParent = () => {
const [mutationFunc, {data, isLoading, error}] = useGetDataMutation({fixedCacheKey: 'Your key'})

return (
<div>
   {data?
     <AuthorizedComponents/> :
     <ChildComponent/>  // GrandChild component is its child
}
</div>
)
}

我的例子是一个身份验证过程,如果函数成功,我必须在孙函数中进行身份验证并呈现授权的组件。

相关问题