Я хочу сделать пагинацию(бесконечный скролл) с помощью 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