Реакция-запрос: обнаружить первую выборку

Решил эту проблему с помощью хука useRef(). По сути, вы подсчитываете, сколько раз были получены данные. Если count === 0 — данные загружаются впервые. Делимся примером ниже:

import React, { useRef, useState } from 'react';
import { useQuery } from '@tanstack/react-query';

const Loading = () => <>Loading...</>;

// Function for retrieving data
const fetchData = async (params, onSuccess) => {
    const searchParams = new URLSearchParams(params);
    const response = await fetch(`${ENDPOINT_URL}?${searchParams.toString()}`);
    const data = await response.json();

    if (!response.ok) {
        throw new Error(data?.message || 'Oops something went wrong');
    }

    if (onSuccess) {
        onSuccess(data);
    }

    return data;
};

const Component = ({ params }) => {
    const [data, setData] = useState(null);
    const fetchCountRef = useRef(0);
    const onSuccess = (data) => {
        /**
         * Fetched one more time
         */
        fetchCountRef.current += 1;
        setData(data);
    };

    const { data, status, error } = useQuery({
        queryKey: ['component', params, onSuccess],
        queryFn: () => fetchData(params, onSuccess),
        enabled,
        staleTime: 0
    });
    const fetching = status === 'pending';
    /**
     * Check if you're fetching for the first time
     */ 
    const isInitialFetch = fetchCountRef += 1;

    if (error) {
        return <div>{error?.message}</div>;
    }

    /**
     * Gets displayed when fetching for the first time
     */ 
    if (isInitialFetch && fetching) {
        return <Loading />;
    }

    return <div>
        <header>This element will be visible when you fetch data again</header>
        {fetching
            ? <Loading>
            : <div>Your data ({data}) will be displayed here</div>
        }
    </div>;
};

Код не проверял, но надеюсь, вы поняли идею. Это довольно легко и аккуратно.

Нет необходимости использовать useRef. Простой способ добиться этого — использовать keepPreviousData

import { useQuery, keepPreviousData } from '@tanstack/react-query';

//...

const { data, isPlaceholderData, status, error } = useQuery({
  queryKey: [‘component’, params, onSuccess],
  queryFn: () => fetchData(params, onSuccess),
  enabled,
  placeholderData: keepPreviousData,
  staleTime: 0
});

//...

return (<div>
  <header>This element will be visible when you fetch data again</header>
    {isPlaceholderData
       ? <Loading>
       : <div>Your data ({data}) will be displayed here</div>
    }
 </div>);

При использовании placeholderData и keepPreviousData данные остаются заполненными, когда происходит новая выборка из-за изменения ключа запроса. И isPlaceholderData можно использовать для отображения пользовательского интерфейса загрузки в это время.

Живая демонстрация отдельных интерфейсов загрузки