druxt-views 0.21.0 → 0.22.1

package/dist/components/DruxtView.vue

@@ -79,6 +79,17 @@ export default {
       default: 'default',
     },
 
+    /**
+     * Module settings object.
+     *
+     * @type {ModuleSettings}
+     * @default {}
+     */
+    settings: {
+      type: Object,
+      default: () => ({}),
+    },
+
     /**
      * JSON:API Resource type.
      *
@@ -330,6 +341,14 @@ export default {
     },
   },
 
+  mounted() {
+    // If static, re-fetch data allowing for cache-bypass.
+    // @TODO - Don't re-fetch in serverless configuration.
+    if (this.$store.app.context.isStatic) {
+      this.$fetch()
+    }
+  },
+
   methods: {
     /**
      * Builds the query for the JSON:API request.
@@ -447,12 +466,22 @@ export default {
     async fetchData(settings) {
       const viewId = this.viewId || (((this.view || {}).data || {}).attributes || {}).drupal_internal__id
       if (viewId) {
+        // Check if we need to bypass cache.
+        let bypassCache = false
+        if (typeof (settings.query || {}).bypassCache === 'boolean') {
+          bypassCache = settings.query.bypassCache
+        }
+
+        // Build query.
         const query = this.getQuery(settings)
+
+        // Execute the resquest.
         this.resource = await this.getResults({
           displayId: this.displayId,
           prefix: this.lang,
           query: stringify(query),
-          viewId
+          viewId,
+          bypassCache
         })
       }
     },
@@ -475,10 +504,22 @@ export default {
     /**
      * Component settings.
      */
-    settings: ({ $druxt }, wrapperSettings) => {
-      const settings = merge($druxt.settings.views || {}, wrapperSettings, { arrayMerge: (dest, src) => src })
+    settings: (context, wrapperSettings) => {
+      const { $druxt, settings } = context
+
+      // Start with the `nuxt.config.js` `druxt.settings.views` settings and
+      // merge the Wrapper component settings on top.
+      let mergedSettings = merge(($druxt.settings || {}).views || {}, wrapperSettings || {}, { arrayMerge: (dest, src) => src })
+      // Merge the DruxtViews component `settings` property on top.
+      mergedSettings = merge(mergedSettings || {}, settings || {}, { arrayMerge: (dest, src) => src })
+
+      // Evaluate the bypass cache function.
+      if (typeof (mergedSettings.query || {}).bypassCache === 'function') {
+        mergedSettings.query.bypassCache = !!mergedSettings.query.bypassCache(context)
+      }
+
       return {
-        query: settings.query || {},
+        query: mergedSettings.query || {},
       }
     },
 
@@ -693,28 +734,40 @@ export default {
  * or the Wrapper component `druxt` object.
  *
  * @typedef {object} ModuleSettings
- * @param {boolean} bundleFilter - Whether to automatically detect Resource types to filter, based on the View `bundle` filter.
- * @param {string[]} fields - An array of fields to filter from the JSON:API Views Resource types.
- * @param {string[]} resourceTypes - An array of Resource types to be used by the Fields filter.
- *
- * @example @lang js
- * {
- *   bundleFilter: false,
- *   fields: [],
- *   resourceTypes: []
- * }
+ * @param {object} query - View results query settings:
+ * @param {(boolean|function)} query.bypassCache - Whether to pull the data from the Vuex store or from the JSON:API.
+ * @param {boolean} query.bundleFilter - Whether to automatically detect Resource types to filter, based on the View `bundle` filter.
+ * @param {string[]} query.fields - An array of fields to filter from the JSON:API Views Resource types.
+ * @param {string[]} query.resourceTypes - An array of Resource types to be used by the Fields filter.
  *
- * @example @lang vue
+ * @example <caption>DruxtView Wrapper component</caption> @lang vue
  * <script>
  * export default {
  *   druxt: {
  *     query: {
+ *       bypassCache: ({ $store }) => $store.$auth.loggedIn,
  *       bundleFilter: false,
- *       fields: ['title']
+ *       fields: [],
  *       resourceTypes: ['node--article'],
  *     },
- *   }
+ *   },
  * }
+ *
+ * @example <caption>DruxtView component with settings</caption> @lang vue
+ * <template>
+ *   <DruxtView
+ *     display-id="block_1"
+ *     view-id="promoted_items
+ *     :settings="{
+ *       query: {
+ *         bypassCache: true,
+ *         bundleFilter: false,
+ *         fields: ['title']
+ *         resourceTypes: [],
+ *       }
+ *     }"
+ *   />
+ * </template>
  */
 
 /**

package/dist/druxt-views.esm.js

@@ -101,17 +101,36 @@ const DruxtViewsStore = ({ store }) => {
         if (!state.results[viewId][displayId][prefix])
           Vue.set(state.results[viewId][displayId], prefix, {});
         Vue.set(state.results[viewId][displayId][prefix], hash, results);
+      },
+      flushResults(state, { viewId, displayId, prefix, hash }) {
+        if (!viewId)
+          Vue.set(state, "results", {});
+        else if (viewId && !displayId && !prefix && !hash)
+          Vue.set(state.results, viewId, {});
+        else if (viewId && displayId && !prefix && !hash)
+          Vue.set(state.results[viewId], displayId, {});
+        else if (viewId && displayId && prefix && !hash)
+          Vue.set(state.results[viewId][displayId], prefix, {});
+        else if (viewId && displayId && (prefix || prefix === void 0) && hash)
+          Vue.set(state.results[viewId][displayId][prefix], hash, {});
       }
     },
     actions: {
-      async getResults({ commit, state }, { viewId, displayId, query, prefix }) {
+      async getResults({ commit, state }, { viewId, displayId, query, prefix, bypassCache = false }) {
         const hash = query ? md5(this.$druxt.buildQueryUrl("", query)) : "_default";
+        let cache;
         if (typeof (((state.results[viewId] || {})[displayId] || {})[prefix] || {})[hash] !== "undefined") {
-          return state.results[viewId][displayId][prefix][hash];
+          cache = state.results[viewId][displayId][prefix][hash];
+          if (!bypassCache)
+            return cache;
+        }
+        try {
+          const results = await this.$druxt.getResource(`views--${viewId}`, displayId, query, prefix);
+          commit("addResults", { results, viewId, displayId, prefix, hash });
+          return results;
+        } catch (e) {
+          return cache ? cache : false;
         }
-        const results = await this.$druxt.getResource(`views--${viewId}`, displayId, query, prefix);
-        commit("addResults", { results, viewId, displayId, prefix, hash });
-        return results;
       }
     }
   };

package/dist/druxt-views.ssr.js

@@ -111,17 +111,36 @@ const DruxtViewsStore = ({ store }) => {
         if (!state.results[viewId][displayId][prefix])
           Vue__default["default"].set(state.results[viewId][displayId], prefix, {});
         Vue__default["default"].set(state.results[viewId][displayId][prefix], hash, results);
+      },
+      flushResults(state, { viewId, displayId, prefix, hash }) {
+        if (!viewId)
+          Vue__default["default"].set(state, "results", {});
+        else if (viewId && !displayId && !prefix && !hash)
+          Vue__default["default"].set(state.results, viewId, {});
+        else if (viewId && displayId && !prefix && !hash)
+          Vue__default["default"].set(state.results[viewId], displayId, {});
+        else if (viewId && displayId && prefix && !hash)
+          Vue__default["default"].set(state.results[viewId][displayId], prefix, {});
+        else if (viewId && displayId && (prefix || prefix === void 0) && hash)
+          Vue__default["default"].set(state.results[viewId][displayId][prefix], hash, {});
       }
     },
     actions: {
-      async getResults({ commit, state }, { viewId, displayId, query, prefix }) {
+      async getResults({ commit, state }, { viewId, displayId, query, prefix, bypassCache = false }) {
         const hash = query ? md5__default["default"](this.$druxt.buildQueryUrl("", query)) : "_default";
+        let cache;
         if (typeof (((state.results[viewId] || {})[displayId] || {})[prefix] || {})[hash] !== "undefined") {
-          return state.results[viewId][displayId][prefix][hash];
+          cache = state.results[viewId][displayId][prefix][hash];
+          if (!bypassCache)
+            return cache;
+        }
+        try {
+          const results = await this.$druxt.getResource(`views--${viewId}`, displayId, query, prefix);
+          commit("addResults", { results, viewId, displayId, prefix, hash });
+          return results;
+        } catch (e) {
+          return cache ? cache : false;
         }
-        const results = await this.$druxt.getResource(`views--${viewId}`, displayId, query, prefix);
-        commit("addResults", { results, viewId, displayId, prefix, hash });
-        return results;
       }
     }
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "druxt-views",
-  "version": "0.21.0",
+  "version": "0.22.1",
   "description": "Drupal Views components for Druxt with support for filters, pagination and sorting.",
   "keywords": [
     "cms",
@@ -41,17 +41,17 @@
     "templates"
   ],
   "dependencies": {
-    "axios": "^0.27.2",
-    "deepmerge": "^4.2.2",
-    "drupal-jsonapi-params": "^2.1.0",
-    "druxt": "^0.21.0",
-    "druxt-blocks": "^0.17.0",
-    "druxt-entity": "^0.27.0",
-    "druxt-router": "^0.29.0",
+    "axios": "0.27.2",
+    "deepmerge": "^4.3.1",
+    "drupal-jsonapi-params": "^2.2.0",
+    "druxt": "^0.22.0",
+    "druxt-blocks": "^0.17.2",
+    "druxt-entity": "^0.28.0",
+    "druxt-router": "^0.29.1",
     "md5": "^2.3.0"
   },
   "optionalDependencies": {
-    "vue": "^2.7.10",
+    "vue": "^2.7.14",
     "vuex": "^3.6.2"
   },
   "publishConfig": {