我已经在我的一个项目中集成了RTK查询,我正在尝试了解如何处理我的表的UI。我已经阅读了其他StackOverflow问题(例如that one),但我无法找到我的用例的答案。
我的表格行具有操作,因此用户可以直接从表格页面编辑或删除行项目。
我正在使用以下RTK查询挂钩:
// To fetch the data that populates the table.
// 'isLoading' is used to show the spinner all over the table
const {data, isLoading} = useGetItemsQuery()
// To trigger the edit of the item.
const [triggerEditItem] = useEditItemMutation({fixedCacheKey: 'edit-item-' + data.id})
// To get when the editing is happening
const [, {isLoading: isEditing}] = useEditItemMutation({fixedCacheKey: 'edit-item-' + data.id})
这是我的一部分:
serviceApi.injectEndpoints({
endpoints: (builder) => ({
getItems: builder.query({
providesTags: [TAGS.ITEMS],
query: // The query,
}),
editItem: builder.mutation({
invalidatesTags: [TAGS.ITEMS],
query: // The query,
}),
})
editItem
使TAGS.ITEMS
标记无效,因此getItems
的重新获取完成。我这样做是因为我从documentation读取:
大多数情况下,为了在触发后端更改后接收最新数据,您可以利用缓存标记失效来执行自动重取,这将导致查询在被告知发生了可能导致其数据过期的变异时重新获取其数据。大多数情况下,我们推荐使用自动重新获取作为手动缓存更新的首选项,除非您遇到这样做的需要。
实现我的表的行的组件使用我在上面编写的第三个钩子,这样它就可以相应地显示和隐藏微调器。
我的问题是,我不希望在由于无效标记而重新读取时,微调器遍布整个表(也就是说,我不希望对表的微调器使用isFetching
布尔值),但我希望微调器仅位于修改的行上,直到重新读取完成。
有一种方法可以做到这一点与自动重新获取或这是一个场景,我必须手动更新该高速缓存,以获得我想要的行为?
1条答案
按热度按时间insrf1ej1#
这应该是你的答案:
Redux RTK Query: Invalidating only single element from list
由phry本人:
不。RTK-Query是一个文档缓存(完整响应=文档),而不是一个规范化缓存。它不知道任何关于缓存响应的内容及其结构的信息--它永远不会尝试自己“缝合”任何东西。
您可以通过乐观更新手动执行此操作,但RTK-Q自动执行的所有操作都是重取,这在大多数用例中应该绰绰有余。