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

Posted 2023-02-19

【中文标题】如果子项从 RTK 查询中的获取请求更新，我如何更新列表中的数据

【英文标题】：How can I update the data in my list if a subitem updates from a get request in RTK Query

【发布时间】：2022-01-16 09:06:44

【问题描述】：

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

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

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

总之：

getList 并在一个组件中显示列表 另一个用户更新了 db 中的第 1 项，而我已经加载了我的列表 我导航到第 1 项的详细信息组件，getDetails 显示新数据 我导航回列表组件，但仍然显示第 1 项的旧数据

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

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 ],
    ),
),

【参考方案1】：

我找到了一种很老套的方法，但我确实认为我只是愚蠢，把自己逼到了一个不必要的角落。

实际上，我监听传入的 getDetails 请求以完成，然后分派查询/queryResultPatched 操作。我的修改灵感来自this post from the docs。

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;
                        
                    )
                );
            
        ,
    ),