1

我有一个 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)

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

4

2 回答 2

1

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

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

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

于 2021-12-08T13:14:17.803 回答
0

您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 属性以使其无效。

于 2022-01-21T13:40:42.987 回答