@frogqwetr

Как сделать пагинацию, используя RTK Query?

Я хочу сделать пагинацию(бесконечный скролл) с помощью RTK Query, но не понимаю, как это правильно сделать. Я получаю ограниченный лимитом список пользователей и при нажатии на кнопку "показать еще" у меня меняется страница, но старые данные, которые были получены до этого затираются. Можно ли как - то получить состояние всех до этого отправленных запросов? Или добавлять их самому, как это делается при обычном подходе, например, с помощью redux-thunk и прочих инструментов.
Компонент списка пользователей
const UsersList: FC = memo(() => {
    const [page, setPage] = useState(1)
    
     const {isLoading, data } = useGetInformationAboutAllUsersQuery(page)
   
    const users = !isLoading && data?.usersInformations ? 
                  <List items={data.usersInformations} renderItem={renderUserItem} />: null

    return (
        <div>
            {users}
            <button onClick={()=>setPage(page => page+1)}>Показать еще</button>
        </div>
    )
})

RTK Query.

interface IDataUsersQuery{
    usersInformations: IUserInformation[],
    totalCount: number | undefined
}

export const usersSliceQuery = createApi({
    reducerPath:'users',
    baseQuery: fetchBaseQuery({baseUrl: apiUrlNames.MAIN_URL}),
    tagTypes: ['users'],
    endpoints: (builder) => ({
        getInformationAboutAllUsers: builder.query<IDataUsersQuery, number>({

            query: (page : number = 3 ) => {
               return `${apiUrlNames.URL_USERS_INFORMATIONS}?_limit=${5}&_page=${page}`
            },

            transformResponse(response: IUserInformation[], meta: any) {
                return { usersInformations: response, 
                    totalCount: Number(meta?.response?.headers.get('X-Total-Count')) }
              }
        })
    })
})

export const {useGetInformationAboutAllUsersQuery} = usersSliceQuery
  • Вопрос задан
  • 1268 просмотров
Решения вопроса 1
@Black_and_green
Developer - chigrin.xyz
Для данного случае нет, готового решения внутри библиотеки - обсуждение фичи на github
- Можно использовать React Query (useQueries)
- Использовать только 3 страницы (prev, current, next)
- Написать свой хук поверх rtq. Сделал пример
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы