如果RTK查询中的获取请求更新了子项，我如何更新列表中的数据

Question

所以我对RTK查询的一般概念了解得很好，但我有一个用例需要一些帮助。

我有一个列表组件和一个详细信息组件，您可以导航到该组件以查看该列表项的更多详细信息。所以我有两个端点getList和getDetails。

我的问题是，如果我加载了列表，另一个用户更新了同一列表的数据库，当我查看更新项目的详细信息时，我会看到新数据，但如果我导航回列表，它不会显示从getDetails端点接收的新数据

综上所述：

1. getList并在一个组件中显示列表
2. 当我已经加载列表时，另一个用户更新数据库中的项目1
3. 我导航到项目1的details组件，getDetails显示新数据
4. 我导航回列表组件，项目1的旧数据仍然显示

如何从getDetails获取新数据以更新项目1的getList中的数据？

tagTypes: ["ItemList"],
endpoints: (builder) => ({
getList: builder.query<ListResults, RelisTables>({
query: (table) => `data/${table}`,
providesTags: (result) => {
return result?.list?.items.length
? [
...result?.list?.items.map(({ details: { id } }: any) => ({
type: "ItemList" as const,
id,
})),
{ type: "ItemList" as const, id: "LIST" },
]
: [{ type: "ItemList" as const, id: "LIST" }];
},
}),
getDetails: builder.query<ListResults, RelisDetails>({
query: ({ id, table }) => `data/${table}/${id}`,
providesTags: (result, error, { id }) => [{ type: "ItemList" as const, id }],
}),
}),

Answer 1

我找到了一种巧妙的方法，但我相信我只是愚蠢，把自己逼到了一个不必要的角落。

实际上，我监听传入的getDetails请求以完成，然后分派一个查询/queryResultPatched操作。我从这篇文章中得到了修改的灵感。

getDetails: builder.query<ListResults, RelisDetails>({
query: ({ id, table }) => `data/${table}/${id}`,
providesTags: (result, error, { id }) => [{ type: "ItemList" as const, id }],
// Hacky way of updating item from list should it have changed
// between getting the list and then getting new details.
// Maybe there is a better way of doing this but I am not sure how.
async onCacheEntryAdded(arg, { cacheDataLoaded, dispatch, getCacheEntry, getState }) {
await cacheDataLoaded;
const data = getCacheEntry().data?.list.items[0];
if (data) {
dispatch(
relisApi.util.updateQueryData("getList", undefined, (response) => {
const position =
response.list.items.length &&
response.list.items.findIndex((item) => {
return item.details?.id && item.details.id.toString() === arg.id;
});
if (position > -1) {
response.list.items[position] = data;
}
})
);
}
},
}),