useResource$() - Явная реактивность

В этом руководстве мы хотим получить список репозиториев для заданной организации GitHub. Чтобы помочь вам, мы добавили в нижнюю часть файла функцию getRepositories(). Ваша задача - использовать getRepositories() для получения списка репозиториев каждый раз, когда пользователь обновляет элемент org.

Qwik предоставляет useResource$() и <Resource>, чтобы помочь вам получить и отрендерить данные с сервера. При получении данных приложение может находиться в одном из трёх состояний:

pending: идёт получение данных с сервера => Отображается индикатор загрузка...;
resolved: данные успешно получены с сервера => Отображение данных;
rejected: данные не могут быть получены с сервера из-за ошибки => Отображение ошибки.

Используйте функцию useResource$(), чтобы настроить способ получения данных с сервера. Используйте <Resource> для отображения данных.

Получение данных

Используйте useResource$(), чтобы настроить способ получения данных с сервера.

  const reposResource = useResource$<string[]>(({ track, cleanup }) => {
    // Нам нужен способ повторного получения данных при каждом
    // изменении `github.org`. Используйте `track` для
    // повторного запуска этой функции получения данных.
    track(() => github.org);
 
    // Хорошей практикой является использование `AbortController`
    // для прерывания получения данных, если поступает новый запрос.
    // Мы создаем новый `AbortController` и регистрируем функцию
    // `cleanup`, которая вызывается при повторном запросе.
    const controller = new AbortController();
    cleanup(() => controller.abort());
 
    // Получаем данные и возвращаем промис.
    return getRepositories(github.org, controller);
  });

Функция useResource$() возвращает объект ResourceReturn, который представляет собой объект, подобный промисам, и может быть сериализован Qwik. Функция useResource$() позволяет с помощью track отслеживать свойства для того, чтобы функция useResource$() могла реагировать на изменения состояния. Функция cleanup позволяет зарегистрировать код, который необходимо выполнить, чтобы освободить ресурсы от предыдущего запроса. Наконец, функция useResource$() возвращает промис, который разрешается в значение.

Рендер данных

Используйте <Resource> для отображения данных функции useResource$(). <Resource> позволяет вам отображать различное содержимое в зависимости от текущего состояния ресурса: pending, resolved или rejected.

На сервере <Resource> не отображает состояние loading, вместо этого он приостанавливает отображение, пока ресурс не будет получен, и всегда будет рендериться как resolved или rejected (на клиенте <Resource> отображает все состояния, включая pending).

<Resource
   value={resourceToRender}
   onPending={() => <div>Загрузка...</div>}
   onRejected={(reason) => <div>Ошибка: {reason}</div>}
   onResolved={(data) => <div>{data}</div>}
/>

Сервер vs Клиент

Обратите внимание, что один и тот же код может рендериться как на сервере, так и на клиенте (с немного другим поведением, которое пропускает при рендере состояние pending на сервере).

Next: Использование контекста

Edit Tutorial