feat(query): 🚀 accept object as query string

Author: Chantouch Sek

.eslintrc

@@ -14,7 +14,7 @@
     "sourceType": "module"
     // "project": "./tsconfig.json"
   },
-  "plugins": ["@typescript-eslint", "prettier"],
+  "plugins": ["@typescript-eslint", "prettier", "promise", "import"],
   "rules": {
     "prettier/prettier": ["error"],
     "@typescript-eslint/no-explicit-any": 0,

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-api-queries",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "description": "Elegant and simple way to build requests for REST API",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -58,12 +58,13 @@
     "@types/jest": "^26.0.14",
     "@types/lodash.merge": "^4.6.6",
     "@types/node": "^14.11.10",
-    "@typescript-eslint/eslint-plugin": "^4.4.1",
+    "@typescript-eslint/eslint-plugin": "^4.15.1",
     "@typescript-eslint/parser": "^4.4.1",
     "axios-mock-adapter": "^1.18.2",
     "bootstrap-vue": "^2.17.3",
-    "eslint": "^7.11.0",
+    "eslint": "^7.2.0",
     "eslint-config-prettier": "^6.13.0",
+    "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-prettier": "^3.1.4",
     "husky": "^4.3.0",
     "jest": "^26.5.3",
@@ -85,6 +86,7 @@
     "camelcase-keys": "^6.2.2",
     "escape-string-regexp": "^4.0.0",
     "lodash.merge": "^4.6.2",
+    "qs": "^6.9.6",
     "snakecase-keys": "^3.2.0"
   }
 }

package.json

@@ -120,6 +120,26 @@ describe('BaseProxy', () => {
       .all()
     expect(data).toEqual(items)
   })
+  it('it should accept query params as object', async () => {
+    const items = [
+      { first_name: 'Dara', last_name: 'Hok', id: 1 },
+      { first_name: 'Chantouch', last_name: 'Sek', id: 2 },
+    ]
+    mockAdapter
+      .onGet('/posts?search[id]=1&first_name=Dara')
+      .reply(200, { data: items })
+    const params = {
+      search: { id: 1 },
+      first_name: 'Dara',
+      last_name: 'Hok',
+    }
+    const { data } = await proxy
+      .setParameters(params)
+      .removeParameters(['last_name'])
+      .all()
+    expect(data).toEqual(items)
+    expect(proxy.parameters).toEqual({ search: { id: 1 }, first_name: 'Dara' })
+  })
 
   it('it should find an item by id', async () => {
     const item = { first_name: 'Chantouch', last_name: 'Sek', id: 1 }

src/__tests__/base-proxy.test.ts

@@ -1,8 +1,9 @@
 import type { AxiosError, AxiosInstance, AxiosResponse, Method } from 'axios'
-import { isFile, isArray } from '../util/objects'
-import type { Errors } from '../'
+import { isArray, isFile } from '../util/objects'
+import type { Errors } from '..'
 import Validator from './Validator'
 import { objectToFormData } from '../util/formData'
+import qs from 'qs'
 
 const validator = Validator
 const UNPROCESSABLE_ENTITY = 422
@@ -12,9 +13,13 @@ export interface ParametersType {
 
 class BaseProxy {
   public errors: Errors
+
   public parameters: any | any[]
+
   public readonly endpoint: string
+
   public static $http: AxiosInstance
+
   public static $errorsKeyName = 'errors'
 
   constructor(endpoint: string, parameters?: any | any[]) {
@@ -52,7 +57,7 @@ class BaseProxy {
   }
 
   putWithFile(id: string | number, payload: any): Promise<any> {
-    payload['_method'] = 'put'
+    payload._method = 'put'
     return this.submit('post', `/${this.endpoint}/${id}`, payload)
   }
 
@@ -96,11 +101,8 @@ class BaseProxy {
   }
 
   __getParameterString(url: string): string {
-    const keys = Object.keys(this.parameters)
-    const parameters = keys
-      .filter((key: string) => !!this.parameters[key])
-      .map((key: string) => `${key}=${this.parameters[key]}`)
-    return parameters.length === 0 ? url : `${url}?${parameters.join('&')}`
+    const query = qs.stringify(this.parameters, { encode: false })
+    return query ? `${url}?${query}` : url
   }
 
   __getQueryString(parameter: string): any | any[] {

src/core/BaseProxy.ts

@@ -7,9 +7,10 @@ export function objectToFormData(
     return formData.append(parent, object)
   }
   for (const property in object) {
-    if (object.hasOwnProperty(property)) {
-      appendToFormData(formData, getKey(parent, property), object[property])
+    if (!object.hasOwnProperty(property)) {
+      continue
     }
+    appendToFormData(formData, getKey(parent, property), object[property])
   }
   return formData
 }