如何推迟重新获取无效的 RTK 查询答案

【问题标题】：How to postpone refetching of invalidated RTK query如何推迟重新获取无效的 RTK 查询
【发布时间】：2022-10-14 08:11:43
【问题描述】：

RTK 查询似乎可以工作，因此当缓存的结果无效时，会重新获取无效的查询立即地.我希望当程序请求无效数据时会执行重新获取，但不会更快。

真实世界用例

假设我有一个用户需要登录的应用程序——大多数网络应用程序都会这样做。假设我有三个端点：

登录突变 - 登录用户
获取授权信息查询 - 获取经过身份验证的会话数据（已设置 providesTags: ['AuthData']）
登出突变 - 将用户注销（已设置 invalidatesTags: ['AuthData']）

当用户登录时，代码会请求经过身份验证的会话信息。并且这些数据自然会被缓存，因为许多页面可能需要此信息的某些数据。

但当用户稍后注销时，缓存的数据会失效（根据自动失效标签设置），因此会立即被 RTK 查询库重新获取。由于明显的原因，这样的调用会因 HTTP 401 而失败。

问题

如何防止立即重新获取无效的查询？在上面的示例中，我希望在代码对端点进行新调用时重新获取数据但不会更早.是否可以控制 RTK Query 中的重新获取行为？

【问题讨论】：

标签： reactjs redux-toolkit rtk-query

【解决方案1】：

使标签延迟失效的最佳方法是使用 onQueryStarted() 方法并将其与 Redux 工具包中的 setTimeout 和 api.util.invalidateTags() 方法结合使用。

    completeCheckListTask: builder.mutation<TaskResponse, TaskCompleteArg>({
      query: ({ body, pathParams }) => ({
        url: `checklist/${pathParams.id}/${pathParams.exampleId}/task/${pathParams.anotherId}`,
        method: 'PATCH',
        body,
      }),
      async onQueryStarted(props, { dispatch, queryFulfilled }) {
        await queryFulfilled
        setTimeout(() => {
          dispatch(api.util.invalidateTags(['Checklist']))
        }, 3000)
      },
    }),

您可以在此处的文档中阅读更多内容https://redux-toolkit.js.org/rtk-query/usage/manual-cache-updates

【讨论】：