Add a feature toggle for avoiding n+1 queries

Author: carlobeltrame

README.md

@@ -114,6 +114,13 @@ Vue.use(HalJsonVuex(store, axios, { apiName: 'backend' }))
 let someEntity = this.backend.get('/some/endpoint')
 ```
 
+### avoidNPlusOneRequests
+When accessing the elements of an embedded collection, and some of the elements of the collection have not been loaded from the API before, this library will automatically try to avoid N+1 queries by eager fetching the whole collection.
+In case you run into problems with this behaviour with your API, you can disable it by setting the `avoidNPlusOneRequests` option to false:
+```js
+Vue.use(HalJsonVuex(store, axios, { avoidNPlusOneRequests: false }))
+```
+
 ### forceRequestedSelfLink
 When requesting an entity, some HAL JSON APIs will not always return the same `self` link as it was in the request.
 An example would be if the API added a `page=0` query parameter to the `self` link of a collection, even if the request was done without that parameter:

src/index.js

@@ -33,15 +33,16 @@ export class ServerException extends Error {
  */
 function HalJsonVuex (store, axios, options) {
   const defaultOptions = {
-    forceRequestedSelfLink: false,
     apiName: 'api',
+    avoidNPlusOneRequests: true,
+    forceRequestedSelfLink: false,
     nuxtInject: null
   }
   const opts = { ...defaultOptions, ...options }
 
   store.registerModule(opts.apiName, { state: {}, ...storeModule })
 
-  const storeValueProxy = StoreValueProxyCreator(axios.defaults.baseURL, get, isUnknown)
+  const storeValueProxy = StoreValueProxyCreator(axios.defaults.baseURL, get, isUnknown, opts)
 
   if (opts.nuxtInject !== null) axios = adaptNuxtAxios(axios)
 

src/storeValueProxy.js

@@ -1,6 +1,6 @@
 import urltemplate from 'url-template'
 
-export default function StoreValueProxy (apiRoot, get, isUnknown) {
+export default function StoreValueProxy (apiRoot, get, isUnknown, opts = {}) {
   function isEqualIgnoringOrder (array, other) {
     return array.length === other.length && array.every(elem => other.includes(elem))
   }
@@ -142,17 +142,17 @@ export default function StoreValueProxy (apiRoot, get, isUnknown) {
    * (or from the API if necessary), and returns that as a new array. In case some of the entity references in
    * the array have not finished loading yet, returns a loadingArrayProxy instead.
    * @param array            possibly mixed array of values and references
-   * @param fetchAllUri      optional URI that allows fetching all array items in a single network request, if known
+   * @param fetchAllUri      URI that allows fetching all array items in a single network request, if known
    * @param fetchAllProperty property in the entity from fetchAllUri that will contain the array
    * @returns array the new array with replaced items, or a loadingArrayProxy if any of the array elements
    *                is still loading.
    */
-  function mapArrayOfEntityReferences (array, fetchAllUri = null, fetchAllProperty = null) {
+  function mapArrayOfEntityReferences (array, fetchAllUri, fetchAllProperty) {
     if (!containsUnknownEntityReference(array)) {
       return replaceEntityReferences(array)
     }
 
-    if (fetchAllUri) {
+    if (opts.avoidNPlusOneRequests) {
       const completelyLoaded = get({ _meta: { reload: { uri: fetchAllUri, property: fetchAllProperty } } }, true)
         ._meta.load.then(() => replaceEntityReferences(array))
       return loadingArrayProxy(completelyLoaded)
@@ -174,11 +174,11 @@ export default function StoreValueProxy (apiRoot, get, isUnknown) {
    * lazy, since that potentially fetches a large number of entities from the API.
    * @param target      object on which the items getter should be defined
    * @param items       array of items, which can be mixed primitive values and entity references
-   * @param fetchAllUri optional URI that allows fetching all collection items in a single network request, if known
-   * @param property    optional property name inside the entity fetched at fetchAllUri that contains the collection
+   * @param fetchAllUri URI that allows fetching all collection items in a single network request, if known
+   * @param property    property name inside the entity fetched at fetchAllUri that contains the collection
    * @returns object the target object with the added getter
    */
-  function addItemsGetter (target, items, fetchAllUri = null, property = null) {
+  function addItemsGetter (target, items, fetchAllUri, property) {
     Object.defineProperty(target, 'items', { get: () => filterDeleting(mapArrayOfEntityReferences(items, fetchAllUri, property)) })
     Object.defineProperty(target, 'allItems', { get: () => mapArrayOfEntityReferences(items, fetchAllUri, property) })
     return target