Make query: to accept a FormData or a URLSearchParams

Author: marcelolx

README.md

@@ -86,6 +86,8 @@ Adds additional headers to the request.  `X-CSRF-Token` and `Content-Type` are a
 
 Appends query parameters to the URL. Query params in the URL are preserved and merged with the query options.
 
+Accepts `Object`, `FormData` or `URLSearchParams`.
+
 ##### responseKind
 
 Specifies which response format will be accepted. Default is `html`.

src/fetch_request.js

@@ -1,6 +1,6 @@
 import { FetchResponse } from './fetch_response'
 import { RequestInterceptor } from './request_interceptor'
-import { getCookie, compact, metaContent } from './lib/utils'
+import { getCookie, compact, metaContent, stringEntriesFromFormData, mergeEntries } from './lib/utils'
 
 export class FetchRequest {
   constructor (method, url, options = {}) {
@@ -18,6 +18,7 @@ export class FetchRequest {
     } catch (error) {
       console.error(error)
     }
+
     const response = new FetchResponse(await window.fetch(this.url, this.fetchOptions))
 
     if (response.unauthenticated && response.authenticationURL) {
@@ -97,12 +98,17 @@ export class FetchRequest {
     const originalQuery = (this.originalUrl.split('?')[1] || '').split('#')[0]
     const params = new URLSearchParams(originalQuery)
 
-    if (this.options.query) {
-      for (const [key, value] of Object.entries(this.options.query)) {
-        params.append(key, value)
-      }
+    let requestQuery = this.options.query
+    if (requestQuery instanceof window.FormData) {
+      requestQuery = stringEntriesFromFormData(requestQuery)
+    } else if (requestQuery instanceof window.URLSearchParams) {
+      requestQuery = requestQuery.entries()
+    } else {
+      requestQuery = Object.entries(requestQuery || {})
     }
 
+    mergeEntries(params, requestQuery)
+
     const query = params.toString()
     return (query.length > 0 ? `?${query}` : '')
   }

src/lib/utils.js

@@ -29,3 +29,22 @@ export function metaContent (name) {
   const element = document.head.querySelector(`meta[name="${name}"]`)
   return element && element.content
 }
+
+export function stringEntriesFromFormData (formData) {
+  return [...formData].reduce((entries, [name, value]) => {
+    return entries.concat(typeof value === 'string' ? [[name, value]] : [])
+  }, [])
+}
+
+export function mergeEntries (searchParams, entries) {
+  for (const [name, value] of entries) {
+    if (value instanceof window.File) continue
+
+    if (searchParams.has(name)) {
+      searchParams.delete(name)
+      searchParams.set(name, value)
+    } else {
+      searchParams.append(name, value)
+    }
+  }
+}