feat: improve mutate function type

Author: runkids

core/types.ts

@@ -1,12 +1,17 @@
-import { Ref, UnwrapNestedRefs } from 'vue-demi'
 import { Cache, HistoryOptions } from 'vue-condition-watcher/_internal'
+import { Ref, UnwrapNestedRefs } from 'vue-demi'
 
 export type { HistoryOptions }
 
 export type VoidFn = () => void
 export type Conditions<T> = {
   [K in keyof T]: T[K]
 }
+export type FinalResult<Result, AfterFetchResult> =
+  | Promise<AfterFetchResult extends Result ? Result : AfterFetchResult>
+  | AfterFetchResult extends Result
+  ? Result
+  : AfterFetchResult
 
 export type OnConditionsChangeReturnValue<C> = Partial<UnwrapNestedRefs<C>>
 
@@ -20,9 +25,9 @@ export interface OnFetchErrorContext<T = any, E = any> {
   data: T | null
 }
 
+type MutateFunction<T> = (arg: (oldData: T) => any) => void
 type MutateData = (newData: any) => void
-type MutateFunction = (arg: (oldData: any) => any) => void
-export interface Mutate extends MutateData, MutateFunction {}
+export interface Mutate<T> extends MutateFunction<T>, MutateData {}
 
 export interface Config<Cond = Record<string, any>, Result = unknown, AfterFetchResult = Result> {
   fetcher: (...args: any) => Promise<Result>
@@ -41,11 +46,7 @@ export interface Config<Cond = Record<string, any>, Result = unknown, AfterFetch
     conditions: Partial<Cond> & Record<string, any>,
     cancel: VoidFn
   ) => Promise<Record<string, any>> | Record<string, any>
-  afterFetch?: (
-    data: Result
-  ) => Promise<AfterFetchResult extends Result ? Result : AfterFetchResult> | AfterFetchResult extends Result
-    ? Result
-    : AfterFetchResult
+  afterFetch?: (data: Result) => FinalResult<Result, AfterFetchResult>
   onFetchError?: (ctx: OnFetchErrorContext) => Promise<Partial<OnFetchErrorContext>> | Partial<OnFetchErrorContext>
 }
 
@@ -56,7 +57,7 @@ export interface UseConditionWatcherReturn<Cond, Result> {
   readonly data: Readonly<Ref<Result | undefined>>
   readonly error: Ref<any | undefined>
   execute: (throwOnFailed?: boolean) => void
-  mutate: Mutate
+  mutate: Mutate<Result>
   resetConditions: (conditions?: object) => void
   onConditionsChange: (fn: OnConditionsChangeContext<Cond>) => void
   onFetchSuccess: (fn: (response: any) => void) => void

core/use-condition-watcher.ts

@@ -1,28 +1,28 @@
+import { Conditions, Config, Mutate, UseConditionWatcherReturn } from './types'
 import {
+  UnwrapNestedRefs,
+  computed,
+  getCurrentInstance,
+  isRef,
+  onUnmounted,
   reactive,
+  readonly,
   ref,
+  shallowRef,
+  unref,
   watch,
-  readonly,
-  UnwrapNestedRefs,
-  onUnmounted,
   watchEffect,
-  unref,
-  isRef,
-  shallowRef,
-  computed,
-  getCurrentInstance,
 } from 'vue-demi'
-import { Config, UseConditionWatcherReturn, Conditions, Mutate } from './types'
-import { usePromiseQueue, useHistory, useCache, createEvents } from 'vue-condition-watcher/_internal'
+import { containsProp, isNoData as isDataEmpty, isObject, isServer, rAF } from 'vue-condition-watcher/_internal'
+import { createEvents, useCache, useHistory, usePromiseQueue } from 'vue-condition-watcher/_internal'
 import {
-  filterNoneValueObject,
   createParams,
-  syncQuery2Conditions,
-  isEquivalent,
   deepClone,
+  filterNoneValueObject,
+  isEquivalent,
   pick,
+  syncQuery2Conditions,
 } from 'vue-condition-watcher/_internal'
-import { containsProp, isNoData as isDataEmpty, isObject, isServer, rAF } from 'vue-condition-watcher/_internal'
 
 export default function useConditionWatcher<Cond extends Record<string, any>, Result, AfterFetchResult = Result>(
   config: Config<Cond, Result, AfterFetchResult>
@@ -209,11 +209,13 @@ export default function useConditionWatcher<Cond extends Record<string, any>, Re
     if (pollingTimer.value) return
 
     watchEffect((onCleanup) => {
-      if (unref(watcherConfig.pollingInterval)) {
+      const pollingInterval = unref(watcherConfig.pollingInterval)
+
+      if (pollingInterval) {
         pollingTimer.value = (() => {
           let timerId = null
           function next() {
-            const interval = unref(watcherConfig.pollingInterval)
+            const interval = pollingInterval
             if (interval && timerId !== -1) {
               timerId = setTimeout(nun, interval)
             }
@@ -249,23 +251,23 @@ export default function useConditionWatcher<Cond extends Record<string, any>, Re
    *  - 1.
    *     mutate(newData)
    *  - 2.
-   *     mutate((currentData) => {
-   *        currentData[0].name = 'runkids'
-   *        return currentData
+   *     mutate((draft) => {
+   *        draft[0].name = 'runkids'
+   *        return draft
    *     })
    */
-  const mutate = (...args): Mutate => {
+  const mutate = (...args): Mutate<Result> => {
     const arg = args[0]
     if (arg === undefined) {
-      return data.value as any
+      return data.value
     }
     if (typeof arg === 'function') {
       data.value = arg(deepClone(data.value))
     } else {
       data.value = arg
     }
     cache.set({ ..._conditions }, data.value)
-    return data.value as any
+    return data.value
   }
 
   // - History mode base on vue-router

examples/vue3/package.json

@@ -7,14 +7,14 @@
   },
   "dependencies": {
     "element-plus": "^1.3.0-beta.1",
-    "vue": "^3.2.26",
+    "vue": "^3.2.45",
     "vue-condition-watcher": "1.4.7",
-    "vue-router": "^4.0.10"
+    "vue-router": "^4.1.6"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^2.0.1",
-    "@vue/compiler-sfc": "^3.2.26",
-    "typescript": "^4.3.5",
-    "vite": "^2.7.10"
+    "@vitejs/plugin-vue": "^3.2.0",
+    "@vue/compiler-sfc": "^3.2.45",
+    "typescript": "^4.9.3",
+    "vite": "^3.2.4"
   }
 }

examples/vue3/src/api.ts

@@ -1,5 +1,39 @@
+export type Users = {
+  cell: string
+  bob: {
+    date: string
+    age: number
+  }
+  email: string
+  gender: string
+  id: {
+    name: string
+    value: string
+  }
+  name: {
+    title: string
+    first: string
+    last: string
+  }
+  phone: string
+  picture: {
+    large: string
+    medium: string
+    thumbnail: string
+  }
+}[]
+export interface Result {
+  info: {
+    page: number
+    results: number
+    seed: string
+    version: string
+  }
+  results: Users
+}
+
 const users = (params: Record<string, any>) =>
-  fetch('https://randomuser.me/api/?' + query(params), { method: 'GET' }).then((res) => res.json())
+  fetch('https://randomuser.me/api/?' + query(params), { method: 'GET' }).then((res) => res.json() as Promise<Result>)
 
 const photos = () => fetch('https://jsonplaceholder.typicode.com/photos', { method: 'GET' }).then((res) => res.json())
 

examples/vue3/src/views/Home.vue

@@ -2,9 +2,9 @@
 import { ref, nextTick, inject } from 'vue'
 import { useRouter } from 'vue-router'
 import type { ElScrollbar } from 'element-plus'
-// import { useConditionWatcher } from '../../../../src/index'
-import { useConditionWatcher } from 'vue-condition-watcher'
-import api from '../api'
+import useConditionWatcher  from '../../../../core/index'
+// import { useConditionWatcher } from 'vue-condition-watcher'
+import api, { Result, Users } from '../api'
 
 const router = useRouter()
 const payload = ref('')
@@ -25,7 +25,7 @@ const {
   onConditionsChange, 
   onFetchSuccess, 
   onFetchError 
-} = useConditionWatcher(
+} = useConditionWatcher<{gender: string[]; page: number}, Result, Users>(
   {
     fetcher: (params) => {
       payload.value = JSON.stringify(params)
@@ -45,15 +45,6 @@ const {
     pollingWhenOffline: true,
     revalidateOnFocus: true,
     cacheProvider: inject('cacheProvider'),
-    // cacheProvider: function localStorageProvider() {
-    //   // example by https://swr.vercel.app/docs/advanced/cache#localstorage-based-persistent-cache
-    //   const map = new Map(JSON.parse(localStorage.getItem('app-cache') || '[]'))
-    //   window.addEventListener('beforeunload', () => {
-    //     const appCache = JSON.stringify(Array.from(map.entries()))
-    //     localStorage.setItem('app-cache', appCache)
-    //   })
-    //   return map
-    // },
     history: {
       sync: router,
     },
@@ -132,7 +123,7 @@ onFetchFinally(async () => {
     </el-col>
     <el-col :span="6">
       <el-button type="primary" @click="execute" size="small">Refresh</el-button>
-      <el-button type="primary" @click="resetConditions" size="small">Reset Conditions</el-button>
+      <el-button type="primary" @click="resetConditions()" size="small">Reset Conditions</el-button>
       <el-button type="primary" @click="updateFirstRowData" size="small">Mutate First Row Data</el-button>
     </el-col>
   </el-row>
@@ -181,4 +172,4 @@ onFetchFinally(async () => {
   <div class="footer">
     <el-pagination background layout="prev, pager, next" :total="100" v-model:current-page="conditions.page"/>
   </div>
-</template>
+</template>

examples/vue3/vite.config.js

@@ -5,4 +5,4 @@ export default {
   optimizeDeps: {
     exclude: ['vue-demi']
   }
-}
+}