RTK Query invalidatesTags 似乎不会每次都删除缓存的数据

我有一个 RTK 查询突变端点拒绝应用程序,它使 getApplication 查询无效。这些都在同一个 API 中。

rejectApplication: builder.mutation<RejectResponse, string>({
  query: (applicationId) => ({
    url: `/applications/${applicationId}`,
    method: "DELETE",
  }),
  invalidatesTags: (_result, _error, applicationId) => [
    "Status",
    { type: "Application", id: "LIST" },
    { type: "Application", id: applicationId },
  ],
}),
getApplication: builder.query<ApplicationResponse, string>({
  query: (applicationId: string) => ({
    method: "GET",
    url: `/applications/${applicationId}`,
  }),
  providesTags: (_result, _error, id) => [{ type: "Application", id: id }],
}),

问题是我有两个使用 useRejectApplicationMutation 钩子的组件,但由于某种原因,它们中只有一个似乎在查询结果失效后正确地从缓存中删除了它。我可以通过 Redux devtools 观察到这一点,在其中我可以看到 removeQueryResult 操作在一个组件中完成拒绝突变后被调度,但在另一个组件中没有触发。这导致组件中的 getApplication 数据没有变化,从而中断了应用程序的流程。

const {
  data,
  isLoading: getApplicationIsLoading,
  isError: getApplicationIsError,
} = useGetApplicationQuery(props.application.applicationId as string);

useEffect(() => {
  if (data) {
    dispatch(setIncompleteApplication(data));
  }
}, [data]);

因此在这种情况下,不会调用带有 data 的 useEffect ,因为似乎没有重新获取数据,尽管它应该在满足拒绝突变后失效。奇怪的是,在控制台中,它看起来确实应该正确地重新获取无效的应用程序和状态,因为 MSW 端点在删除请求之后被命中。

[MSW] 12:37:38 DELETE /v1/applications/XA1234567 (200 OK)
[MSW] 12:37:38 GET /v1/status (200 OK) 
[MSW] 12:37:39 GET /v1/applications/XA1234567 (200 OK)

对我来说,问题似乎是由于某种原因没有正确清除缓存,所以尽管标签无效并且重新获取数据导致数据没有正确重置。关于可能导致这种不一致的任何想法?

stack overflow RTK Query invalidatesTags doesn't seem to remove cached data every time
原文答案
author avatar

接受的答案

invalidatesTags 并不总是从缓存中删除东西。它仅从缓存中删除当前未在组件中使用的缓存条目的内容-对于触发重新获取的所有其他内容,因此再次触发请求,如果响应中有新数据,则更新响应因此。

因此,在您的组件中, isFetching 将切换到 true ,但数据不会消失 - 在大多数情况下,这是首选行为,因为您不希望所有内容都跳转到加载指示器,而只是更新显示突变后的数据。

现在,如果您的端点返回的数据在结构上与之前返回的数据相同,那么它也不会是新的 data 对象,而只是旧的。在重新获取时,RTK-Query 比较旧结果和新结果,并尝试尽可能多地保持引用相等,因此当底层数据实际上根本没有改变时, useEffects 不会被触发。


答案:

作者头像

您的 applicationId 是仅表示 id 还是代表具有属性的对象?因为如果代表一个对象,则应从中重构代码

invalidatesTags: (_result, _error, applicationId) => [
  "Status",
  { type: "Application", id: "LIST" },
  { type: "Application", id: applicationId },
],

invalidatesTags: (_result, _error, { applicationId }) => [
  "Status",
  { type: "Application", id: "LIST" },
  { type: "Application", id: applicationId },
],

注意 applicationId 周围的卷曲牙套?这样,您会从HTTP请求的结果中破坏对象,然后将其传递给ID属性以使其无效。