Trying to incorporate vuetify's pagination component with the nuxtjs@apollo module has been quite a challenge for me.
I'm facing difficulties making it work seamlessly with my vuex store.
To avoid overwhelming you, I'll skim through most of the code which primarily consists of boilerplate.
To begin with, in order to populate my initial state, I send a graphql query to my backend and then commit these results to my state.
const client = context.app.apolloProvider.defaultClient
const response = await client.query({
query: productsGQL,
variables: {
first: 5,
page: 1
}
})
commit('setProducts', response.data.products.data)
commit('setPagination', response.data.products.paginatorInfo)
commit('setPage', response.data.products.paginatorInfo.currentPage)
This process works smoothly as all necessary data such as products, pagination, and page are set with initial values.
Now, I have two components - a CardComponent that houses all the products:
<script>
export default {
name: 'CardComponent',
computed: {
products() {
return this.$store.getters.getProducts
}
}
}
</script>
And a PaginationComponent:
<template>
<div>
<v-pagination
v-model='page'
circle
:length='total_pages'
/>
</div>
</template>
<script>
export default {
name: 'PaginationComponent',
data() {
return {
total_pages: Math.ceil(this.$store.getters.getPagination.total / this.$store.getters.getPagination.perPage)
}
},
computed: {
page: {
get() {
return this.$store.getters.getPage
},
set(value) {
return this.$store.commit('setPage', value)
}
}
}
}
</script>
The initial value of Page is set at 1. When I click on the second page, the Page variable updates to 2, and this change is reflected in my state as well.
My current dilemma lies in figuring out how to trigger a requery to update the database. While the page number changes successfully, the displayed products remain the same, leaving me uncertain about my next steps.
If you require more code from the store, please let me know so I can include it here.