feat(useFetch): update data on success (#2711)

Co-authored-by: Przemyslaw Brzosko <pbzk@novonordisk.com>
vueuse · Mar 14, 2023 · 78cfbdd · 78cfbdd
1 parent 6bc6089
commit 78cfbdd
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 34 deletions.
diff --git a/packages/core/useFetch/index.test.ts b/packages/core/useFetch/index.test.ts
@@ -200,20 +200,20 @@ describe('useFetch', () => {
       baseUrl: 'https://example.com',
       options: {
         onFetchError(ctx) {
-          ctx.data.title = 'Global'
+          ctx.error = 'Global'
           return ctx
         },
       },
     })
-    const { data } = useMyFetch('test?status=400&json', {
+    const { error } = useMyFetch('test?status=400&json', {
       onFetchError(ctx) {
-        ctx.data.title += ' Local'
+        ctx.error += ' Local'
         return ctx
       },
     }).json()
 
     await retry(() => {
-      expect(data.value).toEqual(expect.objectContaining({ title: 'Global Local' }))
+      expect(error.value).toEqual('Global Local')
     })
   })
 
@@ -272,23 +272,23 @@ describe('useFetch', () => {
       baseUrl: 'https://example.com',
       options: {
         onFetchError(ctx) {
-          ctx.data.title = 'Global'
+          ctx.error = 'Global'
           return ctx
         },
       },
     })
-    const { data } = useMyFetch(
+    const { error } = useMyFetch(
       'test?status=400&json',
       { method: 'GET' },
       {
         onFetchError(ctx) {
-          ctx.data.title += ' Local'
+          ctx.error += ' Local'
           return ctx
         },
       }).json()
 
     await retry(() => {
-      expect(data.value).toEqual(expect.objectContaining({ title: 'Global Local' }))
+      expect(error.value).toEqual('Global Local')
     })
   })
 
@@ -345,21 +345,20 @@ describe('useFetch', () => {
       combination: 'overwrite',
       options: {
         onFetchError(ctx) {
-          ctx.data.global = 'Global'
+          ctx.error = 'Global'
           return ctx
         },
       },
     })
-    const { data } = useMyFetch('test?status=400&json', {
+    const { error } = useMyFetch('test?status=400&json', {
       onFetchError(ctx) {
-        ctx.data.local = 'Local'
+        ctx.error = 'Local'
         return ctx
       },
     }).json()
 
     await retry(() => {
-      expect(data.value).toEqual(expect.objectContaining({ local: 'Local' }))
-      expect(data.value).toEqual(expect.not.objectContaining({ global: 'Global' }))
+      expect(error.value).toEqual('Local')
     })
   })
 
@@ -422,24 +421,23 @@ describe('useFetch', () => {
       combination: 'overwrite',
       options: {
         onFetchError(ctx) {
-          ctx.data.global = 'Global'
+          ctx.error = 'Global'
           return ctx
         },
       },
     })
-    const { data } = useMyFetch(
+    const { error } = useMyFetch(
       'test?status=400&json',
       { method: 'GET' },
       {
         onFetchError(ctx) {
-          ctx.data.local = 'Local'
+          ctx.error = 'Local'
           return ctx
         },
       }).json()
 
     await retry(() => {
-      expect(data.value).toEqual(expect.objectContaining({ local: 'Local' }))
-      expect(data.value).toEqual(expect.not.objectContaining({ global: 'Global' }))
+      expect(error.value).toEqual('Local')
     })
   })
 
@@ -537,31 +535,33 @@ describe('useFetch', () => {
   })
 
   test('should run the onFetchError function', async () => {
-    const { data, statusCode } = useFetch('https://example.com?status=400&json', {
+    const { data, error, statusCode } = useFetch('https://example.com?status=400&json', {
       onFetchError(ctx) {
-        ctx.data.title = 'Hunter x Hunter'
+        ctx.error = 'Internal Server Error'
         return ctx
       },
     }).json()
 
     await retry(() => {
       expect(statusCode.value).toEqual(400)
-      expect(data.value).toEqual(expect.objectContaining({ title: 'Hunter x Hunter' }))
+      expect(error.value).toEqual('Internal Server Error')
+      expect(data.value).toBeNull()
     })
   })
 
   test('should run the onFetchError function when network error', async () => {
-    const { data, statusCode } = useFetch('https://example.com?status=500&text=Internal%20Server%20Error', {
+    const { data, error, statusCode } = useFetch('https://example.com?status=500&text=Internal%20Server%20Error', {
       onFetchError(ctx) {
-        ctx.data = { title: 'Hunter x Hunter' }
+        ctx.error = 'Internal Server Error'
 
         return ctx
       },
     }).json()
 
     await retry(() => {
       expect(statusCode.value).toStrictEqual(500)
-      expect(data.value).toEqual({ title: 'Hunter x Hunter' })
+      expect(error.value).toEqual('Internal Server Error')
+      expect(data.value).toBeNull()
     })
   })
 

diff --git a/packages/core/useFetch/index.ts b/packages/core/useFetch/index.ts
@@ -26,7 +26,7 @@ export interface UseFetchReturn<T> {
   error: Ref<any>
 
   /**
-   * The fetch response body, may either be JSON or text
+   * The fetch response body on success, may either be JSON or text
    */
   data: Ref<T | null>
 
@@ -349,7 +349,7 @@ export function useFetch<T>(url: MaybeComputedRef<string>, ...args: any[]): UseF
   const statusCode = ref<number | null>(null)
   const response = shallowRef<Response | null>(null)
   const error = shallowRef<any>(null)
-  const data = shallowRef<T | null>(initialData)
+  const data = shallowRef<T | null>(initialData || null)
 
   const canAbort = computed(() => supportsAbort && isFetching.value)
 
@@ -441,14 +441,15 @@ export function useFetch<T>(url: MaybeComputedRef<string>, ...args: any[]): UseF
 
           responseData = await fetchResponse[config.type]()
 
-          if (options.afterFetch && statusCode.value >= 200 && statusCode.value < 300)
-            ({ data: responseData } = await options.afterFetch({ data: responseData, response: fetchResponse }))
-
-          data.value = responseData
-
           // see: https://www.tjvantoll.com/2015/09/13/fetch-and-errors/
-          if (!fetchResponse.ok)
+          if (!fetchResponse.ok) {
+            data.value = initialData || null
             throw new Error(fetchResponse.statusText)
+          }
+
+          if (options.afterFetch)
+            ({ data: responseData } = await options.afterFetch({ data: responseData, response: fetchResponse }))
+          data.value = responseData
 
           responseEvent.trigger(fetchResponse)
           return resolve(fetchResponse)
@@ -457,8 +458,7 @@ export function useFetch<T>(url: MaybeComputedRef<string>, ...args: any[]): UseF
           let errorData = fetchError.message || fetchError.name
 
           if (options.onFetchError)
-            ({ data: responseData, error: errorData } = await options.onFetchError({ data: responseData, error: fetchError, response: response.value }))
-          data.value = responseData
+            ({ error: errorData } = await options.onFetchError({ data: responseData, error: fetchError, response: response.value }))
           error.value = errorData
 
           errorEvent.trigger(fetchError)