feat(useFetch): add parameters to the afterFetch and onFetchError (#4499)

Co-authored-by: Anthony Fu <[email protected]>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: 3 people

packages/core/useFetch/index.md

@@ -212,6 +212,82 @@ const { isFetching, error, data } = useMyFetch('users', {
 })
 ```
 
+You can re-execute the request by calling the `execute` method in `afterFetch` or `onFetchError`. Here is a simple example of refreshing a token:
+
+```ts
+let isRefreshing = false
+const refreshSubscribers: Array<() => void> = []
+
+const useMyFetch = createFetch({
+  baseUrl: 'https://my-api.com',
+  options: {
+    async beforeFetch({ options }) {
+      const myToken = await getMyToken()
+      options.headers.Authorization = `Bearer ${myToken}`
+
+      return { options }
+    },
+    afterFetch({ data, response, context, execute }) {
+      if (needRefreshToken) {
+        if (!isRefreshing) {
+          isRefreshing = true
+          refreshToken().then((newToken) => {
+            if (newToken.value) {
+              isRefreshing = false
+              setMyToken(newToken.value)
+              onRrefreshed()
+            }
+            else {
+              refreshSubscribers.length = 0
+              // handle refresh token error
+            }
+          })
+        }
+
+        return new Promise((resolve) => {
+          addRefreshSubscriber(() => {
+            execute().then((response) => {
+              resolve({ data, response })
+            })
+          })
+        })
+      }
+
+      return { data, response }
+    },
+    // or use onFetchError with updateDataOnError
+    updateDataOnError: true,
+    onFetchError({ error, data, response, context, execute }) {
+      // same as afterFetch
+      return { error, data }
+    },
+  },
+  fetchOptions: {
+    mode: 'cors',
+  },
+})
+
+async function refreshToken() {
+  const { data, execute } = useFetch<string>('refresh-token', {
+    immediate: false,
+  })
+
+  await execute()
+  return data
+}
+
+function onRrefreshed() {
+  refreshSubscribers.forEach(callback => callback())
+  refreshSubscribers.length = 0
+}
+
+function addRefreshSubscriber(callback: () => void) {
+  refreshSubscribers.push(callback)
+}
+
+const { isFetching, error, data } = useMyFetch('users')
+```
+
 ### Events
 
 The `onFetchResponse` and `onFetchError` will fire on fetch request responses and errors respectively.

packages/core/useFetch/index.test.ts

@@ -1,3 +1,4 @@
+import type { AfterFetchContext, OnFetchErrorContext } from '.'
 import { until } from '@vueuse/shared'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick, ref } from 'vue'
@@ -768,4 +769,42 @@ describe.skipIf(isBelowNode18)('useFetch', () => {
     expect(isFetching.value).toBe(false)
     expect(isFinished.value).toBe(true)
   })
+
+  it('should be possible to re-trigger the request via the afterFetch parameters', async () => {
+    let count = 0
+    let options: Partial<AfterFetchContext> = {}
+    useFetch('https://example.com', {
+      afterFetch: (ctx) => {
+        !count && ctx.execute()
+        count++
+        options = ctx
+        return ctx
+      },
+    })
+
+    await vi.waitFor(() => {
+      expect(fetchSpy).toHaveBeenCalledTimes(2)
+      expect(options?.context).toBeDefined()
+      expect(options?.execute).toBeDefined()
+    })
+  })
+
+  it('should be possible to re-trigger the request via the onFetchError parameters', async () => {
+    let count = 0
+    let options: Partial<OnFetchErrorContext> = {}
+    useFetch('https://example.com?status=400&json', {
+      onFetchError: (ctx) => {
+        !count && ctx.execute()
+        count++
+        options = ctx
+        return ctx
+      },
+    })
+
+    await vi.waitFor(() => {
+      expect(fetchSpy).toHaveBeenCalledTimes(2)
+      expect(options?.context).toBeDefined()
+      expect(options?.execute).toBeDefined()
+    })
+  })
 })

packages/core/useFetch/index.ts

@@ -118,12 +118,22 @@ export interface AfterFetchContext<T = any> {
   response: Response
 
   data: T | null
+
+  context: BeforeFetchContext
+
+  execute: (throwOnFailed?: boolean) => Promise<any>
 }
 
 export interface OnFetchErrorContext<T = any, E = any> {
   error: E
 
   data: T | null
+
+  response: Response | null
+
+  context: BeforeFetchContext
+
+  execute: (throwOnFailed?: boolean) => Promise<any>
 }
 
 export interface UseFetchOptions {
@@ -185,7 +195,7 @@ export interface UseFetchOptions {
    * Will run immediately after the fetch request is returned.
    * Runs after any 4xx and 5xx response
    */
-  onFetchError?: (ctx: { data: any, response: Response | null, error: any }) => Promise<Partial<OnFetchErrorContext>> | Partial<OnFetchErrorContext>
+  onFetchError?: (ctx: OnFetchErrorContext) => Promise<Partial<OnFetchErrorContext>> | Partial<OnFetchErrorContext>
 }
 
 export interface CreateFetchOptions {
@@ -483,6 +493,8 @@ export function useFetch<T>(url: MaybeRefOrGetter<string>, ...args: any[]): UseF
           ({ data: responseData } = await options.afterFetch({
             data: responseData,
             response: fetchResponse,
+            context,
+            execute,
           }))
         }
         data.value = responseData
@@ -498,6 +510,8 @@ export function useFetch<T>(url: MaybeRefOrGetter<string>, ...args: any[]): UseF
             data: responseData,
             error: fetchError,
             response: response.value,
+            context,
+            execute,
           }))
         }