Question

我正在使用 react-query 库从 API 获取数据，并且我编写了代码来进行乐观更新（因为 API 很慢）。

例如，我使用 useQuery 发出请求：

const { data } = useQuery('posts', loadPostsFunction)

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

const updatingId = 123
const newTitle = 'new title'

queryClient.setQueryData<Post[] | undefined>('posts', (data) =>
  data?.map(post =>
    post.id === updatingId
      ? { ...data, title: newTitle }
      : post
  )
)

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

我想要一些类似于拥有定义了缓存键和缓存类型的商店：

const { data } = useQuery(store.postsKey, loadPostsFunction)

并进行如下更新：

store.updatePost(post.id, { title: 'new title' })

为什么？因为更新缓存是代码中的一个无类型部分，已经带来了一些错误。

在进行查询时，我无法确定在“post”键下肯定有一个完全符合预期类型的数组，如果我的数据加载函数将返回其他内容会怎样，或者如果我使用 {{1 }} 获取分页数据，则类型会有所不同。

对于更新缓存也是如此，现在我无法确定在特定键下是否正是我所期望的。

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

Answer 1

据我所知，我认为唯一的方法是像您一样已经开始使用自定义包装器：

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

我前段时间开始创建一个“类型化查询缓存”，但从未真正做到过。它接受一个 schema 作为输入，并为您提供一个类型化版本的 queryCache，因此 setQueryData 和 getQueryData 是完全类型化的。这是在 v2 上的，但如果你想看一看，原理还是一样的：https://gist.github.com/TkDodo/74051d3224358b8a7f2407630885cbda

React-query 库 - 如何使用 TS 进行乐观更新？

1 个答案: