当我们在主查询调用中使用参数时，如何更新 RTK 查询中的查询缓存？

Question

我目前正在第一次尝试实现 RTK 查询，并在删除项目实现方面遇到问题。正如有关此主题的其他人所提到的，我还面临在调用删除项目后立即再次调用获取项目查询的问题。这是我的代码片段

        getAllSchedules: builder.query({
            query: (params) => ({
                url: '/schedules/',
                params,
            }),
            transformResponse: (response) => ({
                schedules: response.results,
                pagination: {
                    count: response.count,
                    current_limit: response.limit,
                    total_pages: response.total_pages,
                    current_page: response.current_page,
                },
            }),
            providesTags: (result) =>
                Array.isArray(result?.schedules)
                    ? [
                          ...result.schedules.map(({ id }) => ({
                              type: 'Schedule',
                              id,
                          })),
                          'Schedule',
                      ]
                    : ['Schedule'],
        }),
        getScheduleById: builder.query({
            query: (id) => `/schedules/${id}/`,
            providesTags: (result, error, id) => [{ type: 'Schedule', id }],
        }),
        deleteSchedule: builder.mutation({
            query: (id) => ({
                url: `/schedules/${id}/`,
                method: 'DELETE',
            }),
            invalidatesTags: (result, error, id) => [{ type: 'Schedule', id }],
        }),

以上两个函数分别用于获取日程数据列表和单个日程数据项，最后一个函数用于删除单个日程数据项。我正在表列表中执行删除计划操作，因此希望在删除后立即更新数据，但是像这样使缓存无效会导致 BE 中不再存在的 getScheduleById 调用，从而创建 404 错误。

我不希望发生此错误，因为由于站点中的默认错误处理，它会显示给系统中的用户。但同时我不能像这样手动缓存失效

 onQueryStarted: async (id, { dispatch, queryFulfilled }) => {
                try {
                    const patchResult = dispatch(
                        scheduleApiSlice.updateCachedData(
                            'getAllSchedules',
                            undefined,
                            (draft) => {
                                draft.schedules = draft.schedules.filter(
                                    (schedule) => schedule.id != id
                                );
                            }
                        )
                    );
                    await queryFulfilled;
                } catch {
                    patchResult.undo();
                }
            },

因为这需要我像以前一样将所有参数传递给

getAllSchedules

查询，并且当我使用分页并搜索我的列表时，我必须在此 updateCache 中提供与其相关的所有参数，但我无法做到现在因为我无法在handleDelete中访问它，并且我不想通过共享列表中的变量到handleDelete和其他东西来使事情变得过于复杂。有没有好的方法来处理这个问题？

Answer 1

deleteSchedule 函数应该使整个列表无效。使用 getAllSchedules 仅提供 ['Schedule'] 标签，不提供任何 ID。删除后，['Schedule'] 标签无效。这种方法确保只有 getAllSchedules 会在删除项目时重新触发。

deleteSchedule: builder.mutation({
    query: (id) => ({
        url: `/schedules/${id}/`,
        method: 'DELETE',
    }),
    invalidatesTags: ['Schedule'], 
}),

getAllSchedules: builder.query({
    ...
    providesTags: ['Schedule']
}),