Я реализовал 'scroll-loader', и когда я go на странице и прокручиваю, все загружается правильно, но когда я делаю одну из следующих операций: создание, обновление, удаление, страница перезагружается, и я получаю первая страница с элементами на странице, но я не могу получить следующие страницы с элементами, однако запрос отправляется на сервер и я получаю ответ с новыми страницами и элементами, но на стороне клиента новые страницы и элементы не не показывать, а запросы отправлять на бэкэнд до тех пор, пока сервер не ответит с ошибкой о максимальном количестве запросов для конечной точки. Пожалуйста, помогите мне решить эту проблему
запрос, чтобы получить пользователей:
apollo: {
users: {
query: gql`query users($input: ReadUsersInput){
users(input: $input){
pageInfo {
start
total
pageLength
limit
}
users {
id
email
lastName
firstName
groups
connection
}
}
}`,
variables: {
input: {
page: {
page: 0,
limit: 10
}
}
},
update(data) {
return data.users
}
}
}
шаблон:
<div
class="user-mgmt-info"
v-if="rowCount > 0">
1-{{ rowCount }} of {{ totalUsersCount }}
</div>
<scroll-loader
:loader-method="fetchMore"
:loader-disable="isLoadMoreDisabled"
:loader-size="40">
</scroll-loader>
Я ищу изменения в массиве пользователей:
isLoadMoreDisabled() {
return this.totalUsersCount === 0 || this.rowCount >= this.totalUsersCount
}
watch: {
users() {
if (!this.isLoadMoreDisabled && !this.awaitingChanges) {
this.fetchMore()
}
},
},
способ получения новых страниц с пользователями:
fetchMore(){
if (!this.isLoadMoreDisabled) {
this.$apollo.queries.users.fetchMore({
variables: {
input: {
page: {
page: this.currentPage += 1,
limit: 10
}
}
},
updateQuery(previousResult, { fetchMoreResult }) {
// eslint-disable-next-line
const users = [
...previousResult.users.users,
...fetchMoreResult.users.users
]
const pageInfo = fetchMoreResult.users.pageInfo
return {
users: {
users,
pageInfo,
__typename: "users"
}
}
}
})
}
}