Повторное срабатывание RTKQuery хука при ошибке

Question

Происходит изменение свойств хука RTKQuery по непонятным причинам. Приведу код:

Код создания запросов RTKQuery

import { simedApi } from '@/shared/api';
import { Log } from '../model/types/log';
import { MessageLogType } from '../model/types/log';

export interface LogMessageListRequest {
    from: string;
    till: string;
    journalName: string;
    messageTypes: MessageLogType[];
}

export const logApi = simedApi.injectEndpoints({
    endpoints: (builder) => ({
        getJournalList: builder.query<string[], void>({
            query: (pageRequest) => {
                return {
                    url: '/Logger/f',
                    method: 'GET',
                    body: pageRequest,
                };
            },
        }),
        getLogMessageList: builder.query<Log[], LogMessageListRequest>({
            query: (logMessageListRequest) => {
                return {
                    url: '/Logger/GetLogMessages',
                    method: 'POST',
                    body: logMessageListRequest,
                };
            },
        }),
    }),
    overrideExisting: true,
});

export const {
    useGetJournalListQuery,
    useLazyGetJournalListQuery,

    useGetLogMessageListQuery,
    useLazyGetLogMessageListQuery,
} = logApi;

Код проблемного компонента:

import { FC, useEffect } from 'react';
import { App, Select, SelectProps, theme } from 'antd';
import { CloseCircleOutlined } from '@ant-design/icons';
import { CollbackFetchComplete, tryExtractErrorModelSimedApi } from '@/shared/api';
import { StrictOmit } from '@/shared/utils';
import { useGetJournalListQuery } from '../api/logApi';
import { getLocalizedJournal } from '../model/journalLocalization';

interface ChooseJournalNameSelectProps
    extends StrictOmit<SelectProps<string>, 'options' | 'loading'>,
        CollbackFetchComplete<string[] | undefined> {}

export const ChooseJournalNameSelect: FC<ChooseJournalNameSelectProps> = ({
    onFetchDataChange,
    ...selectProps
}) => {
    const { token } = theme.useToken();
    const { notification } = App.useApp();

    const { data, error, isError, isSuccess, isFetching } = useGetJournalListQuery();

    useEffect(() => {
        if (isSuccess) {
            onFetchDataChange?.(data, { isError: false });
        } else if (isError) {
            const errorSimedApi = tryExtractErrorModelSimedApi(error);
            notification.error({
                message: 'При загрузке списка журналов возникла ошибка',
                description: errorSimedApi?.errorMessageShort,
                icon: <CloseCircleOutlined style={{ color: token.colorError }} />,
            });
            onFetchDataChange?.(data, {
                isError: true,
                errorMessage: errorSimedApi?.errorMessageShort,
            });
        }
    }, [isSuccess, isError, data, error]);

    return (
        <Select
            prefix="Журнал:"
            placeholder="Выберите журнал"
            disabled={!data || data.length === 0}
            {...selectProps}
            loading={isFetching}
            options={
                data?.map((journal: string) => ({
                    label: getLocalizedJournal(journal),
                    value: journal,
                })) || []
            }
        />
    );
};

Я специально в getJournalList указал неправильный url для имитации ошибки к серверу. Проблема возникает в useEffect с [isSuccess, isError, data, error] - заходит 3 раза и вот с какими значениями: 1 раз:

isSuccess: false, 
isError: true, 
data: undefined, 
error: {   
    data = '<!doctype html>\n<html l... ,

    error =  SyntaxError: Unexpected token... ,

    originalStatus =  200,

    status = 'PARSING_ERROR'
}

2 раз:

isSuccess: false, 
isError: false, 
data: undefined, 
error: {   
    data = '<!doctype html>\n<html l... ,

    error =  SyntaxError: Unexpected token... ,

    originalStatus =  200,

    status = 'PARSING_ERROR'
}

3 раз:

isSuccess: false, 
isError: true, 
data: undefined, 
error: {   
    data = '<!doctype html>\n<html l... ,

    error =  SyntaxError: Unexpected token... ,

    originalStatus =  200,

    status = 'PARSING_ERROR'
}

Получается, что 1 и 3 разы одинаковые и получается, что уведомление 2 раза выбрасывается. А почему вообще так может происходить, что 3 раза заходит в useEffect мне не понятно. К серверу идет один запрос в панели разработчика.

И еще такой момент. Я использую react-router-dom и такой странный 3-х разовый заход происходит именно, когда я с любой другой страницы перехожу на ту, где есть проблемный компонент. Если я нахожусь на той странице, где проблемный компонент и просто обновляю страницу, то происходит это:

1 раз:

isSuccess: false, 
isError: true, 
data: undefined, 
error: undefined

2 раз:

isSuccess: false, 
isError: true, 
data: undefined, 
error: {   
    data = '<!doctype html>\n<html l... ,

    error =  SyntaxError: Unexpected token... ,

    originalStatus =  200,

    status = 'PARSING_ERROR'
}

Также заметил, что если я в целом первый раз попадаю на страницу с проблемным компонентом (не важно каким образом), то первый раз выводит одно уведомление, а все последующие по два. Как будто бы состояние хука useGetJournalListQuery сбрасывается только лишь при повторном переходе на страницу с проблемным компонентом. То есть когда ухожу на другую страницу, то состояние useGetJournalListQuery где-то еще хранится с ошибкой и только при повторном заходе на страницу с ошибкой происходит сброс, а потом снова попытка отправить запрос

БЛОГ НА HUSL

Повторное срабатывание RTKQuery хука при ошибке

Ответы (0 шт):