feat(useFetch): infer 'json' type for array payloads (#4329)

WingSMC · Gergely Dremak · antfu · web-flow · commit 3d29c16e4861 · 2024-11-21T08:03:12.000Z
Co-authored-by: Gergely Dremak &lt;gergely.dremak@hu.bosch.com&gt;
Co-authored-by: Anthony Fu &lt;github@antfu.me&gt;
diff --git a/packages/core/useFetch/index.test.ts b/packages/core/useFetch/index.test.ts
@@ -84,6 +84,22 @@ describe.skipIf(isBelowNode18)('useFetch', () => {
     })
   })
 
+  it('should use \'json\' payloadType', async () => {
+    let options: any
+    const payload = [1, 2]
+    useFetch('https://example.com', {
+      beforeFetch: (ctx) => {
+        options = ctx.options
+      },
+    }).post(payload)
+
+    await retry(() => {
+      expect(fetchSpy).toHaveBeenCalledOnce()
+      expect(options.body).toEqual(JSON.stringify(payload))
+      expect(options.headers['Content-Type']).toBe('application/json')
+    })
+  })
+
   it('should have an error on 400', async () => {
     const { error, statusCode } = useFetch('https://example.com?status=400')
 
diff --git a/packages/core/useFetch/index.ts b/packages/core/useFetch/index.ts
@@ -419,9 +419,10 @@ export function useFetch<T>(url: MaybeRefOrGetter<string>, ...args: any[]): UseF
     if (config.payload) {
       const headers = headersToObject(defaultFetchOptions.headers) as Record<string, string>
       const payload = toValue(config.payload)
-      // Set the payload to json type only if it's not provided and a literal object is provided and the object is not `formData`
+      // Set the payload to json type only if it's not provided and a literal object or array is provided and the object is not `formData`
       // The only case we can deduce the content type and `fetch` can't
-      if (!config.payloadType && payload && Object.getPrototypeOf(payload) === Object.prototype && !(payload instanceof FormData))
+      const proto = Object.getPrototypeOf(payload)
+      if (!config.payloadType && payload && (proto === Object.prototype || Array.isArray(proto)) && !(payload instanceof FormData))
         config.payloadType = 'json'
 
       if (config.payloadType)
@@ -592,7 +593,7 @@ export function useFetch<T>(url: MaybeRefOrGetter<string>, ...args: any[]): UseF
 
   function waitUntilFinished() {
     return new Promise<UseFetchReturn<T>>((resolve, reject) => {
-      until(isFinished).toBe(true).then(() => resolve(shell)).catch(error => reject(error))
+      until(isFinished).toBe(true).then(() => resolve(shell)).catch(reject)
     })
   }
 
