Блог

У меня есть конечная точка мутации запроса RTK, отклоняющая приложение, которая делает недействительным запрос getApplication. Они находятся в одном и том же API.

 rejectApplication: builder.mutationlt;RejectResponse, stringgt;({  query: (applicationId) =gt; ({  url: `/applications/${applicationId}`,  method: "DELETE",  }),  invalidatesTags: (_result, _error, applicationId) =gt; [  "Status",  { type: "Application", id: "LIST" },  { type: "Application", id: applicationId },  ], }),  

 getApplication: builder.querylt;ApplicationResponse, stringgt;({  query: (applicationId: string) =gt; ({  method: "GET",  url: `/applications/${applicationId}`,  }),  providesTags: (_result, _error, id) =gt; [{ type: "Application", id: id }], }),  

Проблема в том, что у меня есть два компонента, которые используют хук useRejectApplicationMutation, но по какой-то причине только один из них, похоже, правильно удаляет результат запроса из кэша после того, как он был признан недействительным. Я могу наблюдать это с помощью Redux devtools, где я вижу, что действия removeQueryResult отправляются после того, как мутация отклонения выполнена в одном компоненте, но не запускается в другом компоненте. Это приводит к тому, что данные getApplication в компоненте не меняются, что нарушает поток приложения.

 const {  data,  isLoading: getApplicationIsLoading,  isError: getApplicationIsError, } = useGetApplicationQuery(props.application.applicationId as string);  useEffect(() =gt; {  if (data) {  dispatch(setIncompleteApplication(data));  } }, [data]);  

Таким образом, в этом случае эффект использования с данными не вызывается, потому что данные, похоже, не были восстановлены, хотя они должны быть признаны недействительными после выполнения мутации отклонения. Странно, но в консоли это выглядит так, как будто должно быть правильно указано приложение и статус, которые признаны недействительными, поскольку конечные точки 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)  

Мне кажется, проблема в том, что по какой-то причине кэш не очищен должным образом, поэтому, хотя теги признаны недействительными и сделаны повторные выборки, данные не сбрасываются должным образом. Есть какие-нибудь идеи о том, что может быть причиной этого несоответствия?

invalidatesTags не всегда удаляет вещи из кэша. Он удаляет из кэша только те записи кэша, которые в данный момент не используются в компоненте — для всего остального он запускает повторную выборку, поэтому запрос снова запускается, и если в ответе есть новые данные, ответ обновляется соответствующим образом.

Таким образом, в вашем компоненте isFetching переключится на true , но данные не исчезнут — в большинстве случаев это предпочтительное поведение, так как вы не хотите, чтобы все переходило к индикатору загрузки, а просто обновляли отображаемые данные после мутации.

Теперь, если ваша конечная точка возвращает данные, структурно равные данным, которые она возвращала ранее, это также будет не новый data объект, а просто старый. При повторной выборке RTK-запрос сравнивает старый и новый результат и пытается сохранить как можно больше его ссылочного равенства, чтобы useEffects не срабатывать, когда базовые данные на самом деле вообще не изменились.