Fix prefetching in range mode with args

examples/range-with-query-and-prefetch/App.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <input v-model="query" placeholder="Search for a license...">
+    <ul>
+      <li v-for="item in licenses.items" :key="item.id">{{ item.id }}</li>
+    </ul>
+    <a @click="licenses.pageTo++">Load more...</a>
+  </div>
+</template>
+<script>
+import { createInstance } from '../../'
+
+export default {
+  data() {
+    return {
+      query: ''
+    }
+  },
+  computed: {
+    licenses: createInstance('licenses', {
+      pageFrom: 1,
+      args () {
+        return {
+          query: this.query,
+        }
+      },
+    })
+  }
+}
+</script>

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')

examples/range-with-query-and-prefetch/package.json

@@ -0,0 +1,5 @@
+{
+  "scripts": {
+    "serve": "../../node_modules/.bin/vue-cli-service serve main.js"
+  }
+}

src/createResource.js

@@ -182,18 +182,24 @@ 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)
 
         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) => {

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 = {