Merge pull request #256 from robsontenorio/dev

Release v1.11.0

Author: JoaoPedroAS51

docs/content/en/api/model-options.md

@@ -111,6 +111,23 @@ formData() {
 }
 ```
 
+### `stringifyOptions`
+- Default: `{ encode: false, arrayFormat: 'comma' }`
+- Returns: `object`
+
+This method can be overridden in the model to configure `qs`.
+
+See [qs](https://github.com/ljharb/qs#stringifying)
+
+```js
+stringifyOptions() {
+  return {
+    encode: false,
+    arrayFormat: 'comma',
+  }
+}
+```
+
 ## Model Options
 
 These are model-related options.

docs/content/en/configuration.md

@@ -296,6 +296,52 @@ export default class Model extends BaseModel {
 }
 ```
 
+## Configuring Query Parameters Parser
+
+See the [API reference](/api/model-options#stringifyOptions) and [qs](https://github.com/ljharb/qs#stringifying)
+
+We may also need to configure the parser to match our needs. By default, it is configured to match 
+`spatie/laravel-query-builder`, which uses `comma` array format.
+
+If we want, for example, to change this behaviour to `indices`, we can configure the stringify options of `qs` 
+by overriding the `stringifyOptions` method.
+
+We can globally configure this in the [Base Model](/configuration#creating-a-base-model):
+
+```js{}[~/models/Model.js]
+import { Model as BaseModel } from 'vue-api-query'
+
+export default class Model extends BaseModel {
+
+  // Define a base url for a REST API
+  baseURL() {
+    return 'http://my-api.com'
+  }
+
+  // Implement a default request method
+  request(config) {
+    return this.$http.request(config)
+  }
+
+  // Override default query parameter names
+  parameterNames() {
+    const defaultParams = super.parameterNames()
+    const customParams = {
+      include: 'include_custom'
+    }
+    
+    return { ...defaultParams, ...customParams }
+  }
+  
+  // Configure qs
+  stringifyOptions() {
+    return {
+      arrayFormat: 'indices'
+    }
+  }
+}
+```
+
 ## Configuring FormData
 
 See the [API reference](/api/model-options#formdata) and [object-to-formdata](https://github.com/therealparmesh/object-to-formdata#usage)
@@ -331,6 +377,13 @@ export default class Model extends BaseModel {
     return { ...defaultParams, ...customParams }
   }
   
+  // Configure qs
+  stringifyOptions() {
+    return {
+      arrayFormat: 'indices'
+    }
+  }
+  
   // Configure object-to-formadata
   formData() {
     return {

docs/yarn.lock

@@ -2437,9 +2437,9 @@ bail@^1.0.0:
   integrity sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ==
 
 balanced-match@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
-  integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
+  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
 base64-js@^1.0.2:
   version "1.3.1"
@@ -2655,9 +2655,9 @@ browserslist@^4.0.0, browserslist@^4.12.0, browserslist@^4.6.4, browserslist@^4.
     node-releases "^1.1.71"
 
 buffer-from@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
-  integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
+  integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
 
 buffer-json@^2.0.0:
   version "2.0.0"
@@ -3209,7 +3209,7 @@ compression@^1.7.4:
 [email protected]:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
-  integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
+  integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
 
 concat-stream@^1.5.0:
   version "1.6.2"
@@ -5645,9 +5645,9 @@ loader-runner@^2.3.1, loader-runner@^2.4.0:
   integrity sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==
 
 loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
-  integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.2.tgz#29a957f3a63973883eb684f10ffd3d151fec01a3"
+  integrity sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==
   dependencies:
     big.js "^5.2.2"
     emojis-list "^3.0.0"
@@ -6067,17 +6067,22 @@ minimalistic-crypto-utils@^1.0.1:
   integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
 
 minimatch@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
-  integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
+  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
   dependencies:
     brace-expansion "^1.1.7"
 
-minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5:
+minimist@^1.1.1, minimist@^1.2.5:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
   integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
 
+minimist@^1.2.0:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.7.tgz#daa1c4d91f507390437c6a8bc01078e7000c4d18"
+  integrity sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==
+
 minipass-collect@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/minipass-collect/-/minipass-collect-1.0.2.tgz#22b813bf745dc6edba2576b940022ad6edc8c617"
@@ -8393,9 +8398,9 @@ source-map-resolve@^0.5.0:
     urix "^0.1.0"
 
 source-map-support@~0.5.12:
-  version "0.5.19"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
-  integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==
+  version "0.5.21"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"
+  integrity sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==
   dependencies:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
@@ -8796,9 +8801,9 @@ terser-webpack-plugin@^2.3.5:
     webpack-sources "^1.4.3"
 
 terser@^4.1.2, terser@^4.3.9, terser@^4.6.12, terser@^4.6.3:
-  version "4.8.0"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-4.8.0.tgz#63056343d7c70bb29f3af665865a46fe03a0df17"
-  integrity sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-4.8.1.tgz#a00e5634562de2239fd404c649051bf6fc21144f"
+  integrity sha512-4GnLC0x667eJG0ewJTa6z/yXrbLGv80D9Ru6HIpCQmO+Q4PfEtBFi0ObSckqwL6VyQv/7ENJieXHo2ANmdQwgw==
   dependencies:
     commander "^2.20.0"
     source-map "~0.6.1"

index.d.ts

@@ -1,3 +1,5 @@
+import type { IStringifyOptions } from 'qs'
+
 type Method =
   | 'get'
   | 'GET'
@@ -443,6 +445,14 @@ export class Model extends StaticModel {
     limit: string
   }
 
+  /**
+   * This method can be overridden in the model to configure `qs`.
+   *
+   * @see {@link https://robsontenorio.github.io/vue-api-query/api/model-options#stringifyOptions|API Reference}
+   * @see {@link https://github.com/ljharb/qs#stringifying|qs}
+   */
+  protected stringifyOptions(): IStringifyOptions
+
   /**
    * Query
    */

package.json

@@ -69,7 +69,8 @@
     "semantic-release": "^19.0.3"
   },
   "dependencies": {
-    "defu": "^5.0.0",
+    "@types/qs": "^6.9.7",
+    "defu": "^6.0.0",
     "dotprop": "^1.2.0",
     "dset": "^3.1.2",
     "object-to-formdata": "^4.1.0",

src/Model.js

@@ -1,4 +1,4 @@
-import defu from 'defu'
+import { defu } from 'defu'
 import getProp from 'dotprop'
 import { dset as setProp } from 'dset'
 import { serialize } from 'object-to-formdata'
@@ -188,6 +188,12 @@ export default class Model extends StaticModel {
     }
   }
 
+  stringifyOptions() {
+    return {
+      arrayFormat: 'comma'
+    }
+  }
+
   /**
    *  Query
    */

src/Parser.js

@@ -106,7 +106,10 @@ export default class Parser {
     let fields = { [this.parameterNames().fields]: this.builder.fields }
     this.uri +=
       this.prepend() +
-      qs.stringify(fields, { encode: false, arrayFormat: 'comma' })
+      qs.stringify(fields, {
+        encode: false,
+        ...this.builder.model.stringifyOptions()
+      })
   }
 
   filters() {
@@ -117,7 +120,10 @@ export default class Parser {
     let filters = { [this.parameterNames().filter]: this.builder.filters }
     this.uri +=
       this.prepend() +
-      qs.stringify(filters, { encode: false, arrayFormat: 'comma' })
+      qs.stringify(filters, {
+        encode: false,
+        ...this.builder.model.stringifyOptions()
+      })
   }
 
   sorts() {
@@ -159,7 +165,7 @@ export default class Parser {
       this.prepend() +
       qs.stringify(this.builder.payload, {
         encode: false,
-        arrayFormat: 'comma'
+        ...this.builder.model.stringifyOptions()
       })
   }
 }

tests/builder.test.js

@@ -4,6 +4,7 @@ import MockAdapter from 'axios-mock-adapter'
 import { Model } from '../src'
 import ModelWithParamNames from './dummy/models/ModelWithParamNames'
 import Post from './dummy/models/Post'
+import PostWithOptions from './dummy/models/PostWithOptions'
 
 describe('Query builder', () => {
   let errorModel = {}
@@ -56,6 +57,36 @@ describe('Query builder', () => {
     expect(post._builder.query()).toEqual(query)
   })
 
+  test('it can change default array format option', () => {
+    let post = PostWithOptions.include('user').whereIn('status', [
+      'published',
+      'archived'
+    ])
+
+    expect(post._builder.query()).toEqual(
+      '?include=user&filter[status][0]=published&filter[status][1]=archived'
+    )
+
+    expect(post._builder.filters).toEqual({
+      status: ['published', 'archived']
+    })
+
+    post = PostWithOptions.include('user').whereIn(
+      ['user', 'status'],
+      ['active', 'inactive']
+    )
+
+    expect(post._builder.query()).toEqual(
+      '?include=user&filter[user][status][0]=active&filter[user][status][1]=inactive'
+    )
+
+    expect(post._builder.filters).toEqual({
+      user: {
+        status: ['active', 'inactive']
+      }
+    })
+  })
+
   test('include() sets properly the builder', () => {
     let post = Post.include('user')
 

tests/dummy/models/PostWithOptions.js

@@ -0,0 +1,23 @@
+import BaseModel from './BaseModel'
+import Comment from './Comment'
+import Tag from './Tag'
+import User from './User'
+
+export default class PostWithOptions extends BaseModel {
+  comments() {
+    return this.hasMany(Comment)
+  }
+
+  relations() {
+    return {
+      user: User,
+      'relationships.tags': Tag
+    }
+  }
+
+  stringifyOptions() {
+    return {
+      arrayFormat: 'indices'
+    }
+  }
+}