Reactjs React查询库-如何使用TS键入乐观更新？

我使用库从API获取数据，并编写代码进行乐观更新（因为API很慢）

例如，我使用

useQuery

发出请求：

const{data}=useQuery（'posts'，loadPostsFunction）

在另一个地方，我在缓存中进行更新，代码更复杂，所以我将省略实际代码，这里是简化的：

const updateingid=123
const newTitle='新标题'
queryClient.setQueryData（'posts'，（数据）=>
数据？.map（post=>
post.id==更新id
？{…数据，标题：newTitle}
：邮政
)
)

问题是，我有很多不同的查询和不同的资源，我想以某种方式映射缓存键和存储在该键下的数据类型

我想要类似于拥有一个具有定义的缓存键和缓存类型的存储：

const{data}=useQuery（store.postsKey，loadPostsFunction）

并进行如下更新：

store.updatePost（post.id，{title:'newtitle'}）

为什么?？因为更新缓存是代码中一个单一的非类型化部分，已经带来了一些bug

在进行查询时，我无法确定在“post”键下是否确实存在一个完全预期类型的数组，如果我的数据加载函数将返回其他内容，或者如果我使用

useinfinitequaly

获取分页数据，则类型将不同

和更新缓存一样，现在我不能确定在特定键下是否有我所期望的内容

---

我开始写一个解决方案，它看起来很不优雅，所以我决定问是否有人已经解决了这个问题，如果有现成的库或代码示例该怎么办。

据我所知，唯一的方法是像您已经开始的那样定制包装器：

const updatePost = (post: Post) => queryClient.setQueryData<Post>(store.postsKey, post)

constupdatepost=（post:post）=>queryClient.setQueryData（store.postsKey，post）

不久前，我开始创建一个“类型化查询缓存”，但从来没有真正做到这一点。它将

模式

作为输入，并为您提供queryCache的类型化版本，以便

setQueryData

和

getQueryData

都是完全类型化的。这是在v2上，但如果您想看一看，原理仍然是一样的：