Кнопка «Просмотреть больше и просмотреть меньше» с запросом React

#reactjs #react-query

#реагирует на #реагировать-запрос

Вопрос:

В моем приложении React у меня есть страница, которая при отрисовке делает запрос на извлечение с помощью запроса React useInfiniteQuery , чтобы получить два элемента с сервера и заполнить список.

Я реализовал кнопку «Просмотреть больше», которая, когда вы нажмете на нее, вызовет запрос React useInfiniteQuery , получит больше данных и добавит их в список. Я могу сделать это X раз и потенциально получить сотни элементов в списке.

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

Как я могу этого достичь? Есть ли что-то, что поставляется с запросом React, что позволяет мне это сделать?

Должен ли я просто удалить элементы из DOM вручную?

Ответ №1:

react-запрос не делает ничего, связанного с dom, вам решать, сколько страниц вы хотите отобразить. если у вас в кэше 10 страниц и вы хотите отрисовывать только 2 из них — тогда отрисовывайте только 2 из них. вы также можете удалить другие страницы из кэша с queryClient.setQueryData помощью , но я бы этого не делал.