React-query: показывать счетчик загрузки при выборке данных

Использование реактивного запроса в новом проекте и небольшая проблема. Требуется показать счетчик загрузки на пустой странице до загрузки данных, а затем после того, как пользователь получит новые результаты с другим запросом, чтобы отобразить счетчик выше предыдущих результатов.

Первый случай довольно прост и хорошо задокументирован:

  const { isLoading, error, data } = useQuery(["list", query], () =>
    fetch(`https://api/list/${query}`)
  );

  if (isLoading) return <p>Loading...</p>;

  return <div>{data.map((item) => <ListItem key={item.id} item={item}/></div>

Но не могу понять второй случай - потому что после изменения запроса response-query, выполняющий выборку новых результатов и данных из useQuery, пуст, в результате я получаю пустой массив по умолчанию и в этом случае попадает в это условие - if (isLoading && !data.length )

  const { isLoading, error, data=[] } = useQuery(["list", query], () =>
    fetch(`https://api/list/${query}`)
  );

  if (isLoading && !data.length ) return <p>Loading...</p>;

  return <div>
    {data.map((item) => <ListItem key={item.id} item={item}/>
    {isLoading && <Spinner/>}
  </div>

reactjs javascript react-query
person Kuzyo Yaroslav    schedule 25.06.2020    source источник
comment
Зачем вам нужно условие !data.length?   -  person Siddharth    schedule 25.06.2020
comment
Чтобы показывать return <p>Loading...</p> только тогда, когда у меня еще нет данных, после того, как у меня есть предыдущие данные, я хочу показать эти данные с помощью Spinner как указание на поступление новых данных.   -  person Kuzyo Yaroslav    schedule 25.06.2020
comment
сделайте консоль для данных и проверьте, будет ли она возвращать какой-либо объект, изначально возвращаемый данными, неопределенным   -  person pageNotfoUnd    schedule 25.06.2020
comment
Да, поскольку данные не определены, а загрузка верна   -  person Kuzyo Yaroslav    schedule 26.06.2020

Ответы (1)


arrow_upward
12
arrow_downward

Если у вас нет кеша (первая выборка запроса или сборщик мусора через 5 минут), isLoading переключается с true на false (и status === загрузка).

Но если у вас уже есть данные в кеше и их повторная выборка (или использование запроса в другом компоненте), useQuery должен вернуть предыдущие кешированные данные и выполнить повторную выборку в фоновом режиме. В этом случае isLoading всегда имеет значение false, но у вас есть свойства isFetching, которые переключаются с true на false.

В вашем примере, если запрос переменной, переданный в массив, отличается между вызовами, нормально не иметь результата. Ключ кеша строится со всеми переменными в массиве.

const query = "something"
const { isLoading, error, data } = useQuery(["list",query], () =>
    fetch(`https://api/list/${query}`)
  );

const query = "somethingElse"
const { isLoading, error, data } = useQuery(["list",query], () =>
    fetch(`https://api/list/${query}`)
  );

В этом случае кеш не используется совместно, потому что запросы различаются для каждого useQuery.

person rphlmr    schedule 30.06.2020