feat: dynamic lazy + handle race condition

Author: frederikbache

src/components/createUseList.ts

@@ -72,8 +72,11 @@ export default function createUseList<Models, IdType>(
       options.include ? unwrap(options.include) : []
     );
     const path = computed(() => (options.path ? unwrap(options.path) : null));
+    const lazy = computed(() =>
+      options.lazy !== undefined ? unwrap(options.lazy) : false
+    );
 
-    const autoFetch = computed(() => !options.lazy);
+    const autoFetch = computed(() => !lazy.value);
 
     const { error, state, hasLoaded, isLoading, isFailed, handleError } =
       useFetchState(!!options.loadOnUpdate);
@@ -90,6 +93,8 @@ export default function createUseList<Models, IdType>(
       });
     }
 
+    const requestKey = Math.random() * performance.now();
+
     /**
      * Fetch list
      */
@@ -101,7 +106,8 @@ export default function createUseList<Models, IdType>(
           pagination.value,
           sort.value,
           include.value,
-          path.value
+          path.value,
+          requestKey
         )
         .then((res: any) => {
           const paginationChanged =
@@ -138,6 +144,10 @@ export default function createUseList<Models, IdType>(
       if (autoFetch.value) fetch();
     });
 
+    watch(autoFetch, () => {
+      if (autoFetch.value) fetch();
+    });
+
     /**
      * Load the items
      */

src/createStores.ts

@@ -130,6 +130,7 @@ function createStore(
   return defineStore('vroom:' + name, {
     state: () => ({
       items: [] as any[],
+      requestKeys: {} as { [key: string]: number },
     }),
     getters: {
       list(state) {
@@ -159,7 +160,8 @@ function createStore(
         pagination: PaginationSettings,
         sort: SortSettings[],
         include: string[],
-        overridePath: string | null
+        overridePath: string | null,
+        requestKey?: string
       ) {
         let params = {
           ...parseFilters(filter),
@@ -172,7 +174,16 @@ function createStore(
         }
         const url = overridePath || endpoint;
 
+        const startedAt = performance.now();
+        if (requestKey) {
+          this.requestKeys[requestKey] = startedAt;
+        }
+
         return api.get(url, params).then((res: any) => {
+          if (requestKey) {
+            if (this.requestKeys[requestKey] !== startedAt) return;
+            delete this.requestKeys[requestKey];
+          }
           if (settings.envelope === false) {
             this.add(res);
             return { items: res };

test/helpers.ts

@@ -0,0 +1,3 @@
+export async function wait(delay = 0) {
+  await new Promise((r) => setTimeout(r, delay));
+}

test/uselist.test.ts

@@ -3,6 +3,7 @@ import { createVroom, defineModel } from '.';
 import { beforeEach, describe, it, expect, vi, test } from 'vitest';
 import { createApp, defineComponent, nextTick, ref } from 'vue';
 import { createPinia } from 'pinia';
+import { wait } from './helpers';
 
 const app = createApp({});
 const vroom = createVroom({
@@ -241,4 +242,47 @@ describe('Use list', () => {
     expect(wrapper.vm.isLoading).toBe(false);
     expect(wrapper.vm.items).toHaveLength(4);
   });
+
+  it('Lazy load is dynamic', async () => {
+    const lazy = ref(true);
+    const wrapper = getWrapper('book', { lazy });
+
+    expect(wrapper.vm.isLoading).toBe(false);
+
+    lazy.value = false;
+    await wait();
+    expect(wrapper.vm.isLoading).toBe(true);
+    await wait();
+    expect(wrapper.vm.isLoading).toBe(false);
+    expect(wrapper.vm.items).toHaveLength(4);
+  });
+
+  it('Handles race condition', async () => {
+    const mock = {
+      async sleep(delay: number) {
+        await wait(delay);
+        return;
+      },
+    };
+    vroom.server?.get('/books', async (request, db) => {
+      const { delay } = request.query as any;
+      const asNumber = parseInt(delay);
+      await mock.sleep(asNumber);
+      return { data: db.book.all(), meta: { delay: asNumber } };
+    });
+    const spy = vi.spyOn(mock, 'sleep');
+
+    const delay = ref(2);
+
+    const wrapper = getWrapper('book', { filter: { delay } });
+    await wait();
+    delay.value = 10;
+    await wait();
+    delay.value = 5;
+    await wait(20); // wait for everything to complete
+    expect(wrapper.vm.items).toHaveLength(4);
+    expect(spy).toHaveBeenCalledTimes(3);
+    // @ts-ignore
+    expect(wrapper.vm.meta.delay).toBe(5);
+  });
 });