feat: support undefined and null as find params to stop query (#34)

Author: anbraten

src/useFind.ts

@@ -10,12 +10,12 @@ function loadServiceEventHandlers<
   M,
 >(
   service: FeathersService<CustomApplication, ServiceTypes<CustomApplication>[T]>,
-  params: Ref<Params>,
+  params: Ref<Params | undefined | null>,
   data: Ref<M[]>,
 ): () => void {
   const onCreated = (item: M): void => {
-    // ignore items which are not matching the query
-    if (!sift(params.value.query)(item)) {
+    // ignore items not matching the query or when no params are set
+    if (!params.value || !sift(params.value.query)(item)) {
       return;
     }
 
@@ -27,8 +27,8 @@ function loadServiceEventHandlers<
   };
 
   const onItemChanged = (changedItem: M): void => {
-    // ignore items not matching the query
-    if (!sift(params.value.query)(changedItem)) {
+    // ignore items not matching the query or when no params are set
+    if (!params.value || !sift(params.value.query)(changedItem)) {
       // remove item from the list if they have been on it before
       data.value = data.value.filter((item) => getId(item) !== getId(changedItem));
       return;
@@ -77,13 +77,13 @@ export type UseFindFunc<CustomApplication> = <
   M = ServiceModel<CustomApplication, T>,
 >(
   serviceName: T,
-  params?: Ref<Params>,
+  params?: Ref<Params | undefined | null>,
 ) => UseFind<M>;
 
 export default <CustomApplication extends Application>(feathers: CustomApplication) =>
   <T extends keyof ServiceTypes<CustomApplication>, M = ServiceModel<CustomApplication, T>>(
     serviceName: T,
-    params: Ref<Params> = ref({ paginate: false, query: {} }),
+    params: Ref<Params | undefined | null> = ref({ paginate: false, query: {} }),
     { disableUnloadingEventHandlers } = { disableUnloadingEventHandlers: false },
   ): UseFind<M> => {
     // type cast is fine here (source: https://github.com/vuejs/vue-next/issues/2136#issuecomment-693524663)
@@ -95,19 +95,22 @@ export default <CustomApplication extends Application>(feathers: CustomApplicati
 
     const find = async () => {
       isLoading.value = true;
+      if (!params.value) {
+        data.value = [];
+        isLoading.value = false;
+        return;
+      }
+
       // TODO: the typecast below is necessary due to the prerelease state of feathers v5. The problem there is
       // that the AdapterService interface is not yet updated and is not compatible with the ServiceMethods interface.
       const res = await (service as unknown as ServiceMethods<M>).find(params.value);
       data.value = Array.isArray(res) ? res : [res];
       isLoading.value = false;
     };
 
-    watch(
-      () => params.value.query,
-      () => {
-        void find();
-      },
-    );
+    watch(params, () => {
+      void find();
+    });
 
     const connectListener = () => {
       void find();

test/useFind.test.ts

@@ -1,4 +1,4 @@
-import { Application } from '@feathersjs/feathers';
+import { Application, Params } from '@feathersjs/feathers';
 import { nextTick, ref } from 'vue';
 
 import useFindOriginal, { UseFind } from '~/useFind';
@@ -142,11 +142,16 @@ describe('Find composition', () => {
   });
 
   it('should reload data after changing the params', async () => {
-    expect.assertions(2);
+    expect.assertions(3);
 
     // given
     const findParams = ref({ query: { zug: 'start' } });
-    const serviceFind = jest.fn(() => Promise.resolve([]));
+    const serviceFind = jest.fn((params: Params) => {
+      if (params.query && params.query.zug === 'start') {
+        return [additionalTestModel];
+      }
+      return [testModel];
+    });
     const feathersMock = {
       service: () => ({
         find: serviceFind,
@@ -157,12 +162,17 @@ describe('Find composition', () => {
       off: jest.fn(),
     } as unknown as Application;
     const useFind = useFindOriginal(feathersMock);
+    let findComposition = null as UseFind<TestModel> | null;
     mountComposition(() => {
-      useFind('testModels', findParams);
+      findComposition = useFind('testModels', findParams);
     });
 
+    // before then to ensure that the previous loading procedure is completed
+    await nextTick();
+    expect(findComposition && findComposition.data.value).toStrictEqual([additionalTestModel]);
+
     // when
-    findParams.value.query = { zug: 'change' };
+    findParams.value = { query: { zug: 'change' } };
     await nextTick();
 
     // then
@@ -175,6 +185,162 @@ describe('Find composition', () => {
     );
   });
 
+  it('should un-load data after params changes to ref of undefined', async () => {
+    expect.assertions(5);
+
+    // given
+    const findParams = ref<Params | undefined>({ query: { zug: 'start' } });
+    const serviceFind = jest.fn(() => Promise.resolve([testModel]));
+    const feathersMock = {
+      service: () => ({
+        find: serviceFind,
+        on: jest.fn(),
+        off: jest.fn(),
+      }),
+      on: jest.fn(),
+      off: jest.fn(),
+    } as unknown as Application;
+    const useFind = useFindOriginal(feathersMock);
+    let findComposition = null as UseFind<TestModel> | null;
+    mountComposition(() => {
+      findComposition = useFind('testModels', findParams);
+    });
+
+    // before then to ensure that the previous loading procedure is completed
+    await nextTick();
+    expect(findComposition && findComposition.data.value).toStrictEqual([testModel]);
+
+    // when
+    findParams.value = undefined;
+    await nextTick();
+
+    // then
+    expect(serviceFind).toHaveBeenCalledTimes(1);
+    expect(findComposition).toBeTruthy();
+    expect(findComposition && findComposition.isLoading.value).toBeFalsy();
+    expect(findComposition && findComposition.data.value).toStrictEqual([]);
+  });
+
+  it('should un-load data after params changes to ref of null', async () => {
+    expect.assertions(5);
+
+    // given
+    const findParams = ref<Params | null>({ query: { zug: 'start' } });
+    const serviceFind = jest.fn(() => Promise.resolve([testModel]));
+    const feathersMock = {
+      service: () => ({
+        find: serviceFind,
+        on: jest.fn(),
+        off: jest.fn(),
+      }),
+      on: jest.fn(),
+      off: jest.fn(),
+    } as unknown as Application;
+    const useFind = useFindOriginal(feathersMock);
+    let findComposition = null as UseFind<TestModel> | null;
+    mountComposition(() => {
+      findComposition = useFind('testModels', findParams);
+    });
+
+    // before then to ensure that the previous loading procedure is completed
+    await nextTick();
+    expect(findComposition && findComposition.data.value).toStrictEqual([testModel]);
+
+    // when
+    findParams.value = null;
+    await nextTick();
+
+    // then
+    expect(serviceFind).toHaveBeenCalledTimes(1);
+    expect(findComposition).toBeTruthy();
+    expect(findComposition && findComposition.isLoading.value).toBeFalsy();
+    expect(findComposition && findComposition.data.value).toStrictEqual([]);
+  });
+
+  it('should return empty data when params is ref of undefined and load data after changing to valid params', async () => {
+    expect.assertions(6);
+
+    // given
+    const findParams = ref<Params | undefined>();
+    const serviceFind = jest.fn((params: Params) => {
+      if (params.query && params.query.zug === 'start') {
+        return [additionalTestModel];
+      }
+      return [testModel];
+    });
+    const feathersMock = {
+      service: () => ({
+        find: serviceFind,
+        on: jest.fn(),
+        off: jest.fn(),
+      }),
+      on: jest.fn(),
+      off: jest.fn(),
+    } as unknown as Application;
+    const useFind = useFindOriginal(feathersMock);
+    let findComposition = null as UseFind<TestModel> | null;
+    mountComposition(() => {
+      findComposition = useFind('testModels', findParams);
+    });
+
+    // before then to ensure that the previous loading procedure is completed
+    await nextTick();
+    expect(findComposition && findComposition.isLoading.value).toBeFalsy();
+    expect(findComposition && findComposition.data.value).toStrictEqual([]);
+
+    // when
+    findParams.value = { query: { zug: 'start' } };
+    await nextTick();
+
+    // then
+    expect(serviceFind).toHaveBeenCalledTimes(1);
+    expect(findComposition).toBeTruthy();
+    expect(findComposition && findComposition.isLoading.value).toBeFalsy();
+    expect(findComposition && findComposition.data.value).toStrictEqual([additionalTestModel]);
+  });
+
+  it('should return empty data when params is ref of null and load data after changing to valid params', async () => {
+    expect.assertions(6);
+
+    // given
+    const findParams = ref<Params | null>(null);
+    const serviceFind = jest.fn((params: Params) => {
+      if (params.query && params.query.zug === 'start') {
+        return [additionalTestModel];
+      }
+      return [testModel];
+    });
+    const feathersMock = {
+      service: () => ({
+        find: serviceFind,
+        on: jest.fn(),
+        off: jest.fn(),
+      }),
+      on: jest.fn(),
+      off: jest.fn(),
+    } as unknown as Application;
+    const useFind = useFindOriginal(feathersMock);
+    let findComposition = null as UseFind<TestModel> | null;
+    mountComposition(() => {
+      findComposition = useFind('testModels', findParams);
+    });
+
+    // before then to ensure that the previous loading procedure is completed
+    await nextTick();
+    expect(findComposition && findComposition.isLoading.value).toBeFalsy();
+    expect(findComposition && findComposition.data.value).toStrictEqual([]);
+
+    // when
+    findParams.value = { query: { zug: 'start' } };
+    await nextTick();
+
+    // then
+    expect(serviceFind).toHaveBeenCalledTimes(1);
+    expect(findComposition).toBeTruthy();
+    expect(findComposition && findComposition.isLoading.value).toBeFalsy();
+    expect(findComposition && findComposition.data.value).toStrictEqual([additionalTestModel]);
+  });
+
   describe('Event Handlers', () => {
     it('should listen to "create" events', () => {
       expect.assertions(2);