fix: Check new condition and pre-condition is equivalent before fetch data.

Author: runkids

src/useConditionWatcher.ts

@@ -1,6 +1,6 @@
 import { reactive, ref, watch, inject, onMounted, onUnmounted } from 'vue-demi'
 import { ConditionsType, Config, QueryOptions, ResultInterface } from './types'
-import { filterNoneValueObject, createParams, stringifyQuery, syncQuery2Conditions } from './utils'
+import { filterNoneValueObject, createParams, stringifyQuery, syncQuery2Conditions, isEquivalent } from './utils'
 import { useFetchData } from './useFetchData'
 import { useParseQuery } from './useParseQuery'
 import clone from 'rfdc'
@@ -81,7 +81,8 @@ export default function useConditionWatcher<T extends Config, E extends QueryOpt
       // initial conditions by window.location.search. just do once.
       syncConditionsByQuery()
       // watch query changed
-      watch(query, async () => {
+      watch(query, async (newQuery, prevQuery) => {
+        if (isEquivalent(newQuery, prevQuery)) return
         const path: string = router.currentRoute.value ? router.currentRoute.value.path : router.currentRoute.path
         const queryString = stringifyQuery(query.value, queryOptions.ignore || [])
         await router.push(path + '?' + queryString).catch((e) => e)

src/utils.ts

@@ -71,3 +71,42 @@ export function syncQuery2Conditions(conditions: ConditionsType, query: Conditio
     }
   })
 }
+
+export function isEquivalent(x, y) {
+  if (x === null || x === undefined || y === null || y === undefined) {
+    return x === y
+  }
+  if (x.constructor !== y.constructor) {
+    return false
+  }
+  if (x instanceof Function) {
+    return x === y
+  }
+  if (x instanceof RegExp) {
+    return x === y
+  }
+  if (x === y || x.valueOf() === y.valueOf()) {
+    return true
+  }
+  if (Array.isArray(x) && x.length !== y.length) {
+    return false
+  }
+  if (x instanceof Date) {
+    return false
+  }
+  if (!(x instanceof Object)) {
+    return false
+  }
+  if (!(y instanceof Object)) {
+    return false
+  }
+  let p = Object.keys(x)
+  return (
+    Object.keys(y).every((i) => {
+      return p.indexOf(i) !== -1
+    }) &&
+    p.every((i) => {
+      return isEquivalent(x[i], y[i])
+    })
+  )
+}

test/utils.test.ts

@@ -1,4 +1,24 @@
-import { filterNoneValueObject, createParams, stringifyQuery, syncQuery2Conditions } from '../src/utils'
+import { filterNoneValueObject, createParams, stringifyQuery, syncQuery2Conditions, isEquivalent } from '../src/utils'
+
+describe('utils: isEquivalent', () => {
+  it(`Check Object Equality`, () => {
+    const current = {
+      name: '',
+      tags: [],
+      phone: undefined,
+      address: null,
+      data: new Date(),
+    }
+    const old = {
+      name: '',
+      tags: [],
+      phone: undefined,
+      address: null,
+      data: new Date(),
+    }
+    expect(isEquivalent(current, old)).toBeTruthy()
+  })
+})
 
 describe('utils: filterNoneValueObject', () => {
   it(`Should be return empty object`, () => {