@Andrey1302

REACT QUERY. Как реализовать отображение разных лоудеров при первом и последующих запросах query?

Я использую react-query. У меня есть мутация и 2 запроса, где второй запрос зависит от данных из первого запроса. Это означает, что если я инвалидирую первый запрос, второй запрос также инвалидируется, поскольку данные из первого запроса являются ключами для второго.

На UI есть таблица с элементами, которые можно с нее удалять. По нажатию на кнопку удаления я вызываю мутацию на удаление. Она в свою очередь инвалидирует квери, которая отдает айдишники элементов. Далее я этот массив айди отдаю во вторую квери, которая делает запрос на получение деталей по айдишникам.

Мутация удаления:
export const useUpdateCampaign = () => {
    const queryClient = useQueryClient();
    return useMutation({
        onSuccess: ({ id }) => {
            queryClient.invalidateQueries({ queryKey: ['campaigns', id]});
        },
        mutationFn: (
            data: UpdateCampaignRequest
        ) => BoostClient.getInstance().updateCampaign(data),
    })
}


Квери запроса айдишников элементов таблицы:
export const useGetCampaignDetails = (campaignId: string) => {
    return useQuery({
        queryKey: ['campaigns', campaignId],
        queryFn: () => BoostClient.getInstance().getCampaign({ campaignId }),
    })
}


Вторая квери:
export const useGetIncentivesDetails = (perkIds?: Array<string>) => {
    return useQuery({
        queryKey: ['incentives', perkIds],
        queryFn: () => PerkCollectionsClient.getInstance().getMarketplacePerks({
            limit: 10000,
            searchById: perkIds
        }),
        enabled: !!perkIds?.length,
    });
}


Как использую в компоненте с таблицей:
const { data: campaignDetails, isLoading: isCampaignDetailsLoading } = useGetCampaignDetails(id || '');

const incentives = campaignDetails?.data.incentives.map(perk => String(perk.perk));
const { data: perks, isLoading: isPerksLoading } = useGetIncentivesDetails(incentives);


Моя цель: я хочу показать скелетон-лоадер при первой загрузке данных (когда выполняются квери в первый раз) и обычный спиннер при последующих загрузках (когда данные уже есть).

Проблема: isPerksLoading всегда true как при первом запросе данных, так и при последующих (когда второй запрос запускается автоматически). Это ожидаемое поведение? Кажется, что при последующих запросах isLoading должен быть false, а isFetching должен быть true.

Специфические настройки: staleTime: Infinity в конфигурации клиента запроса, но это, похоже, не влияет на описанные выше значения.

Вопрос: Это ожидаемое поведение? Если нет, как я могу достичь желаемого поведения показа разных лоадеров при начального и последующих запросах для этих квери (вторая - зависимая от первой)?
  • Вопрос задан
  • 54 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы