В этом блоге я расскажу о сортировке и разбивке на страницы на стороне сервера с использованием реагирования-запроса и реагирования-загрузочной таблицы-следующего.
Обычно я предпочитаю использовать useQuery для получения данных с сервера.
React Query управляет кэшированием запросов на основе ключей запроса. Ключи запроса могут быть как простыми, как строка, так и сложными, как массив из множества строк и вложенных объектов. Пока ключ запроса является сериализуемым и уникальным для данных запроса, вы можете его использовать. «asyncFunction» отвечает за получение данных с сервера.
Здесь мы можем начать с предположительного сценария, в котором пользователь может пойти дальше. Итак, в этом случае вместо того, чтобы показывать загрузчик пользователю при извлечении данных, что, если я могу показать пользователю кэшированные данные? Это увеличит пользовательский опыт.
Давайте разберем приведенную выше концепцию на примере. В разбивке на страницы в основном я могу предсказать, что пользователь может перейти на следующую страницу, тогда почему я должен ждать, пока пользователь нажмет кнопку 2-й страницы, а затем вызовите API. это приведет к тому, что загрузчик будет отображаться в пользовательском интерфейсе, или я даже могу сохранить информацию о предыдущей странице, пока мы не получим данные второй страницы из API, как показано ниже.
Но, в конце концов, потребуется время, чтобы отразиться на пользовательском интерфейсе после события клика.
Поэтому я буду использовать prefetchQuery. Это метод для queryClient, где мы получаем данные с сервера и сохраняем их в кеше.
Это будет извлекать данные с сервера с помощью asyncFunction и сохранять их в кеше по ключам запроса.
Теперь давайте начнем с демо.
Создайте реагирующее приложение с помощью create-react-app
давайте внесем изменения в наш файл app.js
Используйте компонент QueryClientProvider для подключения и предоставления QueryClient нашему приложению, как показано ниже.
давайте создадим наш пользовательский компонент таблицы
Я передаю реквизиты этому компоненту следующим образом:
data — данные ответа, которые мы получаем от сервера после вызова API.
columns — это имя столбца таблицы
page — Номер активной страницы таблицы
totalSize — Общее количество записей, присутствующих на сервере.
handleTableChange — Обработчик для обработки пагинация и сортировка,
для получения более подробной информации см. раздел нумерация страниц.
Создайте контроллер.
Здесь я взял три переменные состояния — page, sortField, sortOrder для управления нумерацией страниц и сортировкой. Значение по умолчанию для страницы равно 1, а затем эти переменные передаются нашим пользовательским хукам для вызова API с этими параметрами.
Я уничтожил объект ответа, чтобы получить данные и состояние загрузки из пользовательского хука useGetData.
В этом примере структура данных выглядит следующим образом.
Обратите внимание, что я добавил удаленный параметр в плагин таблицы, который означает, что разбивка на страницы и сортировка будут обрабатываться удаленно, и создал функцию обработки с именем handleTableChange, которая будет вызываться при каждом нажатии кнопки разбиения на страницы и сортировки.
эта функция-дескриптор принимает два параметра —
1. type — это тип действия. В нашем случае это будет либо нумерация страниц, либо сортировка
2. Объект — содержит определенные значения, т. е. page, sortField и sortOrder.
в зависимости от типа я изменяю переменные состояния, что приводит к вызовам API. а теперь поговорим об этом…
Вот мой нестандартный крючок
Мы знаем, как ведет себя массив зависимостей в useEffect. То же самое работает и здесь, я передал page, sortField и sortColumn как часть ключей запроса, и он будет действовать как массив зависимостей. Это означает, что если какое-либо из этих значений будет изменено, это вызовет новый вызов API с помощью предоставленной функции обратного вызова.
Это базовая реализация разбиения на страницы и сортировки на стороне сервера с использованием react-bootstrap-table-next и react-query.
Но это не является правильным решением нашей проблемы.
Когда пользователь нажимает любую кнопку разбивки на страницы или сортировки, это приводит к новому вызову API, и, следовательно, загрузчик будет отображаться на экране до тех пор, пока мы не получим новые данные в ответ. и да, мы уже обсуждали это, я должен немного изменить наш хук useGetData следующим образом:
Но, как уже говорилось, это снова потребует времени, чтобы отразить пользовательский интерфейс после нажатия пользователя.
Теперь я буду использовать метод prefetchQuery queryClient, чтобы сделать вызов API для следующей страницы и сохранить эти данные в кеше.
Для этого я буду использовать хук useEffect в нашем пользовательском хуке с зависимостью от всех динамических ключей, которые мы предоставили для useQuery, и проверю наличие дополнительных данных или нет, а также обработаю вызов API для следующего номера страницы следующим образом.
В моем случае я установил staleTime на 2 минуты. это означает, что не будет нового вызова API с теми же ключами в течение 2 минут, и он будет ссылаться на данные из кеша.
Таким образом мы можем предварительно извлечь данные и сохранить их в кеше с определенным временем устаревания, и это поможет нам быстрее отображать данные, когда пользователь нажимает на следующую страницу.
Ого, ты зашел так далеко! Если вам понравилась эта статья, возможно, поставьте лайк или повторно поделитесь веткой на LinkedIn.
Спасибо !
