RTK Query invalidatesTags 似乎并没有每次都删除缓存的数据

Question

我有一个 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 开发工具观察这一点，在其中我可以看到在一个组件中完成拒绝突变后调度的removeQueryResult 操作，但在另一个组件中没有触发。这导致组件中的 getApplication 数据没有改变，从而破坏了应用程序的流程。

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

useEffect(() => {
  if (data) {
    dispatch(setIncompleteApplication(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)

对我来说，问题似乎是由于某种原因缓存没有正确清除，因此尽管标签无效并且重新获取使得数据没有正确重置。对于可能导致这种不一致的原因有什么想法吗？

Answer 1

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

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

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