Асинхронные данные

Работа с асинхронными данными

При работе с динамическими данными, особенно в реальных приложениях, часто возникает необходимость асинхронного получения данных от API. Компонент из surf-charts легко интегрируется со многими инструментами для работы с подобными сценариями.

Далее мы разберем пример загрузки асинхронных данных с помощью TanstackQuery.

Асинхронные данные с React Query

Представим, что данные чарта лежат на сервере и нам нужно их запросить. Мы хотим отображать в контейнере диаграммы статусы: загрузка и ошибка. А также показывать данные по мере их поступления. Давайте создадим такой компонент:

Пример

import { useQuery } from '@tanstack/react-query';
import { VerticalChart } from '@surf/charts';
import Loader from '@components/Loader';
import ErrorImage from '@components/ErrorImage';
 
const fetchSalesData = async () => {
  const response = await fetch('/api/sales');
  if (!response.ok) {
    throw new Error('Failed to fetch sales data');
  }
  return response.json();
};
 
export function DynamicDataChart() {
  const { data, status } = useQuery(['salesData'], fetchSalesData);
 
  const statuses = {
    pending: <Loader />,
    error: <ErrorImage />
  };
 
  const labels = {
    pending: 'Wait...',
    error: 'An error occurred'
  };
 
  return (
    <VerticalChart
      label='Monthly Sales'
      data={data}
      tooltipPostfix='K'
      noDataContent={statuses[status]}
      noLabelContent={labels[status]}
    />
  );
}

В этом примере происходит следующее:

1. Есть запрос на получение данных, и мы получаем статус pending, поэтому на чарте отображается компонент Loader.
2. При возникновении ошибки на чарте будет отображаться компонент ErrorImage.
3. Если Data успешно получена, то график автоматически отобразит ее.

Вот и все. Все просто, не так ли?

Таким образом, вы можете заменить TanstackQuery на ваш любимый менеджер запросов. Вы также можете создать свою собственную систему обработки статусов. Не бойтесь экспериментировать, удачи!