diff --git a/examples/range-with-query-and-prefetch/App.vue b/examples/range-with-query-and-prefetch/App.vue
new file mode 100644
index 0000000..5480bfa
--- /dev/null
+++ b/examples/range-with-query-and-prefetch/App.vue
@@ -0,0 +1,30 @@
+
+
+
+
diff --git a/examples/range-with-query-and-prefetch/main.js b/examples/range-with-query-and-prefetch/main.js
new file mode 100644
index 0000000..4fb7af4
--- /dev/null
+++ b/examples/range-with-query-and-prefetch/main.js
@@ -0,0 +1,22 @@
+import Vue from 'vue'
+import App from './App.vue'
+import Vuex from 'vuex'
+import { PaginationPlugin, createResource } from '../../'
+import { fetchPage } from '../_api/api-client'
+
+Vue.config.productionTip = false
+
+Vue.use(Vuex)
+Vue.use(PaginationPlugin)
+
+const store = new Vuex.Store({
+ strict: true
+})
+
+// Initialize resource
+createResource('licenses', fetchPage, { prefetch: true })
+
+new Vue({
+ render: h => h(App),
+ store
+}).$mount('#app')
diff --git a/examples/range-with-query-and-prefetch/package.json b/examples/range-with-query-and-prefetch/package.json
new file mode 100644
index 0000000..93698a3
--- /dev/null
+++ b/examples/range-with-query-and-prefetch/package.json
@@ -0,0 +1,5 @@
+{
+ "scripts": {
+ "serve": "../../node_modules/.bin/vue-cli-service serve main.js"
+ }
+}
diff --git a/src/createResource.js b/src/createResource.js
index 02e7c6b..c5dc11b 100644
--- a/src/createResource.js
+++ b/src/createResource.js
@@ -182,10 +182,11 @@ module.exports = function (name, fetchPage, opts) {
prefetchNextPage: async function ({ commit, state }, instanceConfig) {
if (state.currentRequest) await state.currentRequest
let registryName = instanceConfig.registryName
- if (instanceConfig.page && (instanceConfig.page * instanceConfig.pageSize) >= state.registry[registryName].items.length) return
- if (instanceConfig.pageTo && (instanceConfig.pageTo * instanceConfig.pageSize) >= state.registry[registryName].items.length) return
+ let rangeMode = !!instanceConfig.pageFrom
+ let currentPage = rangeMode ? instanceConfig.pageTo : instanceConfig.page
+ if ((currentPage * instanceConfig.pageSize) >= state.registry[registryName].items.length) return
- let nextPage = (instanceConfig.page ? instanceConfig.page : instanceConfig.pageTo) + 1
+ let nextPage = currentPage + 1
let nextPageIndexStart = nextPage * instanceConfig.pageSize - instanceConfig.pageSize
let nextPageFragment = state.registry[registryName].items.slice(nextPageIndexStart, nextPageIndexStart + instanceConfig.pageSize)
@@ -193,7 +194,12 @@ module.exports = function (name, fetchPage, opts) {
if (!nextPageFragment.includes(undefined)) return
let opts = Object.assign({}, instanceConfig)
- opts.page += 1
+ if (rangeMode) {
+ opts.pageTo++
+ opts.page = opts.pageTo
+ } else {
+ opts.page++
+ }
let nextPageReq = fetchPage.call(this, opts).then((result) => {
let slice = []
result.data.map((item) => {
diff --git a/test/createInstance.test.js b/test/createInstance.test.js
index 40ddbfb..2c13b1c 100644
--- a/test/createInstance.test.js
+++ b/test/createInstance.test.js
@@ -441,6 +441,93 @@ test('Range mode with args fn', async function () {
expect(adapter.lastArgs.args).toEqual({ counter: 2 })
})
+test('Range mode with args fn and prefetch', async function () {
+ let adapter = new TestAdapter()
+ adapter.nextResult = {
+ total: 33,
+ data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+ }
+
+ const opts = {
+ pageFrom: 1,
+ pageTo: 1,
+ pageSize: 10,
+ args () {
+ return { counter: this.counter }
+ }
+ }
+
+ let component = {
+ data () {
+ return {
+ counter: 1
+ }
+ },
+ computed: {
+ test: createInstance('test13', opts)
+ },
+ render (h) {
+ return h('div')
+ }
+ }
+
+ let wrapper = createWrapper('test13', opts, component)
+ createResource('test13', adapter.fetchPage.bind(adapter), { prefetch: true })
+
+ expect(wrapper.vm.test.loading).toBe(true)
+ await nextTick()
+
+ expect(wrapper.vm.test.loading).toBe(false)
+ expect(wrapper.vm.test.pageFrom).toBe(1)
+ expect(wrapper.vm.test.pageTo).toBe(1)
+ expect(wrapper.vm.test.total).toBe(33)
+ expect(wrapper.vm.test.items.length).toBe(10)
+ expect(wrapper.vm.test.items).toEqual([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
+ expect(adapter.lastArgs.args).toEqual({ counter: 1 })
+
+ wrapper.vm.test.pageTo = 2
+ await nextTick()
+
+ expect(wrapper.vm.test.loading).toBe(false)
+ expect(wrapper.vm.test.pageFrom).toBe(1)
+ expect(wrapper.vm.test.pageTo).toBe(2)
+ expect(wrapper.vm.test.total).toBe(33)
+ expect(wrapper.vm.test.items.length).toBe(20)
+ expect(wrapper.vm.test.items).toEqual([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
+ expect(adapter.lastArgs.args).toEqual({ counter: 1 })
+
+ adapter.nextResult = {
+ total: 22,
+ data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+ }
+
+ wrapper.vm.counter = 2
+
+ expect(wrapper.vm.test.loading).toBe(true)
+ expect(wrapper.vm.test.pageFrom).toBe(1)
+ expect(wrapper.vm.test.pageTo).toBe(1)
+ await nextTick()
+
+ expect(wrapper.vm.test.loading).toBe(false)
+ expect(wrapper.vm.test.pageFrom).toBe(1)
+ expect(wrapper.vm.test.pageTo).toBe(1)
+ expect(wrapper.vm.test.total).toBe(22)
+ expect(wrapper.vm.test.items.length).toBe(10)
+ expect(wrapper.vm.test.items).toEqual([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
+ expect(adapter.lastArgs.args).toEqual({ counter: 2 })
+
+ wrapper.vm.test.pageTo = 2
+ await nextTick()
+
+ expect(wrapper.vm.test.loading).toBe(false)
+ expect(wrapper.vm.test.pageFrom).toBe(1)
+ expect(wrapper.vm.test.pageTo).toBe(2)
+ expect(wrapper.vm.test.total).toBe(22)
+ expect(wrapper.vm.test.items.length).toBe(20)
+ expect(wrapper.vm.test.items).toEqual([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
+ expect(adapter.lastArgs.args).toEqual({ counter: 2 })
+})
+
test('Don\'t touch computed getters', async function () {
let adapter = new TestAdapter()
adapter.nextResult = {