使用 vuex 的 Apollo 分页

Question

我正在尝试让 vuetify 的分页组件与 nuxtjs@apollo module 一起使用。

但我很难让它与我的 vuex 商店一起工作。

我将跳过大部分代码，因为它有很多样板文件。

首先，为了填充我的初始状态，我将一个 graphql 查询发送到我的后端并将这些查询提交到我的状态。

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)

这很好用，产品、分页和页面都设置了初始数据。

现在，我有 2 个组件 CardComponent，其中包含所有像这样的产品

<script>
export default {
  name: 'CardComponent',

  computed: {
    products() {
      return this.$store.getters.getProducts
    }
  }
}
</script>

还有一个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>

Page初始值为1，当我点击第二页时Page变量更新为2，这也反映在我的状态中。

我不确定的是：我如何 requery 数据库？页面正在更新，但显示的产品仍然相同，我不知道该怎么做。

如果您从商店获得更多代码，我会在此处显示。

Answer 1

使用 refresh() 修复了问题：https://apollo.vuejs.org/api/smart-query.html#refresh

使用 vuex 的 Apollo 分页

Apollo pagination with vuex

vue.js

graphql

nuxt.js