feat(useFetch): chain callbacks from createFetch and useFetch

packages/core/useFetch/index.test.ts

@@ -115,6 +115,72 @@ describe('useFetch', () => {
     })
   })
 
+  test('should chain beforeFetch function when using a factory instance', async () => {
+    const useMyFetch = createFetch({
+      baseUrl: 'https://example.com',
+      options: {
+        beforeFetch({ options }) {
+          options.headers = { ...options.headers, Global: 'foo' }
+          return { options }
+        },
+      },
+    })
+    useMyFetch('test', {
+      beforeFetch({ options }) {
+        options.headers = { ...options.headers, Local: 'foo' }
+        return { options }
+      },
+    })
+
+    await retry(() => {
+      expect(fetchSpyHeaders()).toMatchObject({ Global: 'foo', Local: 'foo' })
+    })
+  })
+
+  test('should chain afterFetch function when using a factory instance', async () => {
+    const useMyFetch = createFetch({
+      baseUrl: 'https://example.com',
+      options: {
+        afterFetch(ctx) {
+          ctx.data.title = 'Global'
+          return ctx
+        },
+      },
+    })
+    const { data } = useMyFetch('test?json', {
+      afterFetch(ctx) {
+        ctx.data.title += ' Local'
+        return ctx
+      },
+    }).json()
+
+    await retry(() => {
+      expect(data.value).toEqual(expect.objectContaining({ title: 'Global Local' }))
+    })
+  })
+
+  test('should chain onFetchError function when using a factory instance', async () => {
+    const useMyFetch = createFetch({
+      baseUrl: 'https://example.com',
+      options: {
+        onFetchError(ctx) {
+          ctx.data.title = 'Global'
+          return ctx
+        },
+      },
+    })
+    const { data } = useMyFetch('test?status=400&json', {
+      onFetchError(ctx) {
+        ctx.data.title += ' Local'
+        return ctx
+      },
+    }).json()
+
+    await retry(() => {
+      expect(data.value).toEqual(expect.objectContaining({ title: 'Global Local' }))
+    })
+  })
+
   test('should run the beforeFetch function and add headers to the request', async () => {
     useFetch('https://example.com', { headers: { 'Accept-Language': 'en-US' } }, {
       beforeFetch({ options }) {

packages/core/useFetch/index.ts

@@ -214,6 +214,16 @@ function headersToObject(headers: HeadersInit | undefined) {
   return headers
 }
 
+function chainCallbacks<T = any>(...callbacks: (((ctx: T) => void | Partial<T> | Promise<void | Partial<T>>) | undefined)[]) {
+  return (ctx: T) => {
+    callbacks.forEach(async (callback) => {
+      if (callback)
+        ctx = { ...ctx, ...(await callback(ctx)) }
+    })
+    return ctx
+  }
+}
+
 export function createFetch(config: CreateFetchOptions = {}) {
   const _options = config.options || {}
   const _fetchOptions = config.fetchOptions || {}
@@ -230,7 +240,13 @@ export function createFetch(config: CreateFetchOptions = {}) {
     // Merge properties into a single object
     if (args.length > 0) {
       if (isFetchOptions(args[0])) {
-        options = { ...options, ...args[0] }
+        options = {
+          ...options,
+          ...args[0],
+          beforeFetch: chainCallbacks(_options.beforeFetch, args[0].beforeFetch),
+          afterFetch: chainCallbacks(_options.afterFetch, args[0].afterFetch),
+          onFetchError: chainCallbacks(_options.onFetchError, args[0].onFetchError),
+        }
       }
       else {
         fetchOptions = {