fix(mutate): fix types of mutate/trigger; make mutate/trigger always return the result of fetcher (#2708)

fix(mutate): fix types of mutate/trigger; make mutate/trigger always return the result of MutatorCallback

Co-authored-by: Shu Ding <[email protected]>

Author: Ponyets

_internal/src/types.ts

@@ -310,11 +310,15 @@ export type MutatorCallback<Data = any> = (
   currentData?: Data
 ) => Promise<undefined | Data> | undefined | Data
 
-export type MutatorOptions<Data = any> = {
+/**
+ * @typeParam Data - The type of the data related to the key
+ * @typeParam MutationData - The type of the data returned by the mutator
+ */
+export type MutatorOptions<Data = any, MutationData = Data> = {
   revalidate?: boolean
   populateCache?:
     | boolean
-    | ((result: any, currentData: Data | undefined) => Data)
+    | ((result: MutationData, currentData: Data | undefined) => Data)
   optimisticData?:
     | Data
     | ((currentData: Data | undefined, displayedData: Data | undefined) => Data)
@@ -365,23 +369,38 @@ export type MutatorWrapper<Fn> = Fn extends (
 
 export type Mutator<Data = any> = MutatorWrapper<MutatorFn<Data>>
 
-export interface ScopedMutator<Data = any> {
-  <T = Data>(
+export interface ScopedMutator {
+  /**
+   * @typeParam Data - The type of the data related to the key
+   * @typeParam MutationData - The type of the data returned by the mutator
+   */
+  <Data = any, MutationData = Data>(
     matcher: (key?: Arguments) => boolean,
-    data?: T | Promise<T> | MutatorCallback<T>,
-    opts?: boolean | MutatorOptions<Data>
-  ): Promise<Array<T | undefined>>
-  <T = Data>(
+    data?: MutationData | Promise<MutationData> | MutatorCallback<MutationData>,
+    opts?: boolean | MutatorOptions<Data, MutationData>
+  ): Promise<Array<MutationData | undefined>>
+  /**
+   * @typeParam Data - The type of the data related to the key
+   * @typeParam MutationData - The type of the data returned by the mutator
+   */
+  <Data = any, T = Data>(
     key: Arguments,
     data?: T | Promise<T> | MutatorCallback<T>,
-    opts?: boolean | MutatorOptions<Data>
+    opts?: boolean | MutatorOptions<Data, T>
   ): Promise<T | undefined>
 }
 
-export type KeyedMutator<Data> = (
-  data?: Data | Promise<Data | undefined> | MutatorCallback<Data>,
-  opts?: boolean | MutatorOptions<Data>
-) => Promise<Data | undefined>
+/**
+ * @typeParam Data - The type of the data related to the key
+ * @typeParam MutationData - The type of the data returned by the mutator
+ */
+export type KeyedMutator<Data> = <MutationData>(
+  data?:
+    | MutationData
+    | Promise<MutationData | undefined>
+    | MutatorCallback<MutationData>,
+  opts?: boolean | MutatorOptions<Data, MutationData>
+) => Promise<MutationData | undefined>
 
 export type SWRConfiguration<
   Data = any,

_internal/src/utils/cache.ts

@@ -27,8 +27,8 @@ export const initCache = <Data = any>(
   provider: Cache<Data>,
   options?: Partial<ProviderConfiguration>
 ):
-  | [Cache<Data>, ScopedMutator<Data>, () => void, () => void]
-  | [Cache<Data>, ScopedMutator<Data>]
+  | [Cache<Data>, ScopedMutator, () => void, () => void]
+  | [Cache<Data>, ScopedMutator]
   | undefined => {
   // The global state for a specific provider will be used to deduplicate
   // requests and store listeners. As well as a mutate function that is bound to
@@ -43,10 +43,7 @@ export const initCache = <Data = any>(
     // new mutate function.
     const EVENT_REVALIDATORS = {}
 
-    const mutate = internalMutate.bind(
-      UNDEFINED,
-      provider
-    ) as ScopedMutator<Data>
+    const mutate = internalMutate.bind(UNDEFINED, provider) as ScopedMutator
     let unmount = noop
 
     const subscriptions: Record<string, ((current: any, prev: any) => void)[]> =

_internal/src/utils/config.ts

@@ -41,7 +41,7 @@ const compare = (currentData: any, newData: any) =>
   stableHash(currentData) == stableHash(newData)
 
 // Default cache provider
-const [cache, mutate] = initCache(new Map()) as [Cache<any>, ScopedMutator<any>]
+const [cache, mutate] = initCache(new Map()) as [Cache<any>, ScopedMutator]
 export { cache, mutate, compare }
 
 // Default config

_internal/src/utils/mutate.ts

@@ -174,10 +174,9 @@ export async function internalMutate<Data>(
         // Rollback. Always populate the cache in this case but without
         // transforming the data.
         populateCache = true
-        data = committedData
 
         // Reset data to be the latest committed data, and clear the `_c` value.
-        set({ data, _c: UNDEFINED })
+        set({ data: committedData, _c: UNDEFINED })
       }
     }
 
@@ -186,29 +185,30 @@ export async function internalMutate<Data>(
       if (!error) {
         // Transform the result into data.
         if (isFunction(populateCache)) {
-          data = populateCache(data, committedData)
+          const populateCachedData = populateCache(data, committedData)
+          set({ data: populateCachedData, error: UNDEFINED, _c: UNDEFINED })
+        } else {
+          // Only update cached data and reset the error if there's no error. Data can be `undefined` here.
+          set({ data, error: UNDEFINED, _c: UNDEFINED })
         }
-
-        // Only update cached data and reset the error if there's no error. Data can be `undefined` here.
-        set({ data, error: UNDEFINED, _c: UNDEFINED })
       }
     }
 
     // Reset the timestamp to mark the mutation has ended.
     MUTATION[key][1] = getTimestamp()
 
     // Update existing SWR Hooks' internal states:
-    const res = await startRevalidate()
-
-    // The mutation and revalidation are ended, we can clear it since the data is
-    // not an optimistic value anymore.
-    set({ _c: UNDEFINED })
+    Promise.resolve(startRevalidate()).then(() => {
+      // The mutation and revalidation are ended, we can clear it since the data is
+      // not an optimistic value anymore.
+      set({ _c: UNDEFINED })
+    })
 
     // Throw error or return data
     if (error) {
       if (throwOnError) throw error
       return
     }
-    return populateCache ? res : data
+    return data
   }
 }

core/src/use-swr.ts

@@ -550,7 +550,7 @@ export const useSWRHandler = <Data = any, Error = any>(
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const boundMutate: SWRResponse<Data, Error>['mutate'] = useCallback(
     // Use callback to make sure `keyRef.current` returns latest result every time
-    (...args) => {
+    (...args: any[]) => {
       return internalMutate(cache, keyRef.current, ...args)
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps

infinite/src/index.ts

@@ -232,13 +232,9 @@ export const infinite = (<Data, Error>(useSWRNext: SWRHook) =>
 
     const mutate = useCallback(
       // eslint-disable-next-line func-names
-      function (
-        data?:
-          | undefined
-          | Data[]
-          | Promise<Data[] | undefined>
-          | MutatorCallback<Data[]>,
-        opts?: undefined | boolean | MutatorOptions<Data[]>
+      function <T>(
+        data?: undefined | T | Promise<T | undefined> | MutatorCallback<T>,
+        opts?: undefined | boolean | MutatorOptions<Data[], T>
       ) {
         // When passing as a boolean, it's explicitly used to disable/enable
         // revalidation.
@@ -261,8 +257,8 @@ export const infinite = (<Data, Error>(useSWRNext: SWRHook) =>
         }
 
         return arguments.length
-          ? swr.mutate(data, { ...options, revalidate: shouldRevalidate })
-          : swr.mutate()
+          ? swr.mutate<T>(data, { ...options, revalidate: shouldRevalidate })
+          : swr.mutate<T>()
       },
       // swr.mutate is always the same reference
       // eslint-disable-next-line react-hooks/exhaustive-deps

mutation/src/types.ts

@@ -190,7 +190,13 @@ export interface SWRMutationResponse<
 }
 
 export interface SWRMutationHook {
-  <Data = any, Error = any, SWRMutationKey extends Key = Key, ExtraArg = never>(
+  <
+    Data = any,
+    Error = any,
+    SWRMutationKey extends Key = Key,
+    ExtraArg = never,
+    SWRData = Data
+  >(
     /**
      * The key of the resource that will be mutated. It should be the same key
      * used in the `useSWR` hook so SWR can handle revalidation and race
@@ -212,9 +218,21 @@ export interface SWRMutationHook {
     /**
      * Extra options for the mutation hook.
      */
-    options?: SWRMutationConfiguration<Data, Error, SWRMutationKey, ExtraArg>
+    options?: SWRMutationConfiguration<
+      Data,
+      Error,
+      SWRMutationKey,
+      ExtraArg,
+      SWRData
+    >
   ): SWRMutationResponse<Data, Error, SWRMutationKey, ExtraArg>
-  <Data = any, Error = any, SWRMutationKey extends Key = Key, ExtraArg = never>(
+  <
+    Data = any,
+    Error = any,
+    SWRMutationKey extends Key = Key,
+    ExtraArg = never,
+    SWRData = Data
+  >(
     /**
      * The key of the resource that will be mutated. It should be the same key
      * used in the `useSWR` hook so SWR can handle revalidation and race
@@ -240,10 +258,17 @@ export interface SWRMutationHook {
       Data,
       Error,
       SWRMutationKey,
-      ExtraArg
+      ExtraArg,
+      SWRData
     > & { throwOnError: false }
   ): SWRMutationResponse<Data | undefined, Error, SWRMutationKey, ExtraArg>
-  <Data = any, Error = any, SWRMutationKey extends Key = Key, ExtraArg = never>(
+  <
+    Data = any,
+    Error = any,
+    SWRMutationKey extends Key = Key,
+    ExtraArg = never,
+    SWRData = Data
+  >(
     /**
      * The key of the resource that will be mutated. It should be the same key
      * used in the `useSWR` hook so SWR can handle revalidation and race
@@ -269,7 +294,8 @@ export interface SWRMutationHook {
       Data,
       Error,
       SWRMutationKey,
-      ExtraArg
+      ExtraArg,
+      SWRData
     > & { throwOnError: true }
   ): SWRMutationResponse<Data, Error, SWRMutationKey, ExtraArg>
 }

subscription/src/types.ts

@@ -1,7 +1,7 @@
 import type { Key, SWRConfiguration, MutatorCallback } from 'swr'
 
 export type SWRSubscriptionOptions<Data = any, Error = any> = {
-  next: <T = Data>(err?: Error | null, data?: Data | MutatorCallback<T>) => void
+  next: (err?: Error | null, data?: Data | MutatorCallback<Data>) => void
 }
 
 export type SWRSubscription<

test/type/mutate.ts

@@ -62,11 +62,9 @@ export function useMutatorTypes() {
 
   mutate(async () => '1')
 
-  // @ts-expect-error
   mutate(async () => 1)
 
-  // FIXME: this should work.
-  // mutate(async () => 1, { populateCache: false })
+  mutate(async () => 1, { populateCache: false })
 }
 
 export function useConfigMutate() {
@@ -85,7 +83,7 @@ export function useConfigMutate() {
   )
 
   expect<Promise<any>>(
-    mutate('string', data => {
+    mutate('string', (data?: string) => {
       expectType<string | undefined>(data)
       return '0'
     })

test/use-swr-infinite.test.tsx

@@ -1394,7 +1394,7 @@ describe('useSWRInfinite', () => {
           <button
             onClick={() => {
               mutate(updater, {
-                populateCache: (result: string, currentData: string[]) => {
+                populateCache: (result: string[], currentData: string[]) => {
                   return [...currentData, ...result]
                 },
                 revalidate: false
@@ -1476,7 +1476,7 @@ describe('useSWRInfinite', () => {
             onClick={() => {
               mutate(updater, {
                 optimisticData: current => [current[0], [...current[1], 'B4']],
-                populateCache: (result: string, currentData: string[]) => {
+                populateCache: (result: string[], currentData: string[]) => {
                   return [currentData[0], [...currentData[1], ...result]]
                 },
                 revalidate: false