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>
Источник

4 ответа

Решение

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

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

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

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.

Источник

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

      const {isFetching , isError , isSuccess , data} = useQuery('key' , fnc())
if(isFetching){
return <LoaderSpinner />
}
if(isError){
return "error encountered"
}
return (
{isSuccess && data?.map((item) => <li>{item?.name}</li>)}
)
Источник

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

Источник

@rphlmr

isLoading переключение с true на false

реквизиты isFetching, которые переключаются с true на false.

Может быть, вы имели в виду «от лжи к истине».

Источник
Другие вопросы по тегам