Merge pull request #1732 from pkarw/develop

Develop

Author: pkarw

README.md

@@ -140,6 +140,8 @@ You can find some tutorials and explainations on our [YouTube channel](https://w
 * [Feature list](https://github.com/DivanteLtd/vue-storefront/blob/master/doc/Feature%20list.md)
 * [Vue Storefront modules](https://github.com/DivanteLtd/vue-storefront/blob/master/doc/api-modules/about-modules.md)
 * [TypeScript Action Plan](https://github.com/DivanteLtd/vue-storefront/blob/master/doc/TypeScript%20Action%20Plan.md)
+* [GraphQL Action Plan](https://github.com/DivanteLtd/vue-storefront/blob/develop/doc/GraphQL%20Action%20Plan.md)
+* [SSR Cache](https://github.com/DivanteLtd/vue-storefront/blob/develop/doc/SSR%20Cache.md)
 
 ### Vue Storefront core and themes
 * [Working with themes](https://github.com/DivanteLtd/vue-storefront/blob/master/doc/themes/Working%20with%20themes.md)

config/default.json

@@ -6,7 +6,9 @@
       "api": "api",
       "useOutputCacheTagging": false,
       "useOutputCache": false,
-      "outputCacheDefaultTtl": 86400
+      "outputCacheDefaultTtl": 86400,
+      "availableCacheTags": ["product", "category", "home", "checkout", "page-not-found", "compare", "my-account", "P", "C"],
+      "invalidateCacheKey": "aeSu7aip"
     },
     "redis": {
       "host": "localhost",

core/package.json

@@ -11,6 +11,7 @@
     "@vue-storefront/store": "^1.3.0",
     "app-root-path": "^2.0.1",
     "bodybuilder": "2.2.13",
+    "commander": "^2.18.0",
     "config": "^1.30.0",
     "d3-dsv": "^1.0.8",
     "detect-installed": "^2.0.4",

core/pages/Checkout.js

@@ -358,5 +358,11 @@ export default {
       title: this.$route.meta.title || i18n.t('Checkout'),
       meta: this.$route.meta.description ? [{ vmid: 'description', description: this.$route.meta.description }] : []
     }
+  },
+  asyncData ({ store, route }) { // this is for SSR purposes to prefetch data
+    return new Promise((resolve, reject) => {
+      store.state.requestContext.outputCacheTags.add(`checkout`)
+      resolve()
+    })
   }
 }

core/pages/Compare.js

@@ -41,5 +41,11 @@ export default {
       title: this.$route.meta.title || this.$props.title || i18n.t('Compare Products'),
       meta: this.$route.meta.description ? [{ vmid: 'description', description: this.$route.meta.description }] : []
     }
+  },
+  asyncData ({ store, route }) { // this is for SSR purposes to prefetch data
+    return new Promise((resolve, reject) => {
+      store.state.requestContext.outputCacheTags.add(`compare`)
+      resolve()
+    })
   }
 }

core/pages/MyAccount.js

@@ -66,5 +66,11 @@ export default {
       title: this.$route.meta.title || i18n.t('My Account'),
       meta: this.$route.meta.description ? [{ vmid: 'description', description: this.$route.meta.description }] : []
     }
+  },
+  asyncData ({ store, route }) { // this is for SSR purposes to prefetch data
+    return new Promise((resolve, reject) => {
+      store.state.requestContext.outputCacheTags.add(`my-account`)
+      resolve()
+    })
   }
 }

core/pages/PageNotFound.js

@@ -11,6 +11,7 @@ export default {
   asyncData ({ store, route }) { // this is for SSR purposes to prefetch data
     return new Promise((resolve, reject) => {
       console.log('Entering asyncData for PageNotFound ' + new Date())
+      store.state.requestContext.outputCacheTags.add(`page-not-found`)
       let ourBestsellersQuery = prepareQuery({ queryConfig: 'bestSellers' })
       store.dispatch('category/list', {}).then(categories => {
         store.dispatch('product/list', {

core/scripts/cache.js

@@ -0,0 +1,52 @@
+const program = require('commander')
+const config = require('config')
+const TagCache = require('redis-tag-cache').default
+
+let cache
+if (config.server.useOutputCache) {
+  cache = new TagCache({
+    redis: config.redis,
+    defaultTimeout: config.server.outputCacheDefaultTtl // Expire records after a day (even if they weren't invalidated)
+  })
+  console.log('Redis cache set', config.redis)
+} else {
+  console.error('Output cache is disabled in the config')
+}
+
+program
+  .command('clear')
+  .option('-t|--tag <tag>', 'tag name, available tags: ' + config.server.availableCacheTags.join(', '), '*')
+  .action((cmd) => { // TODO: add parallel processing
+    if (!cmd.tag) {
+      console.error('error: tag must be specified')
+      process.exit(1)
+    } else {
+      console.log(`Clear cache request for [${cmd.tag}]`)
+      let tags = []
+      if (cmd.tag === '*') {
+        tags = config.server.availableCacheTags
+      } else {
+        tags = cmd.tag.split(',')
+      }
+      const subPromises = []
+      tags.forEach(tag => {
+        if (config.server.availableCacheTags.indexOf(tag) >= 0 || config.server.availableCacheTags.find(t => {
+          return tag.indexOf(t) === 0
+        })) {
+          subPromises.push(cache.invalidate(tag).then(() => {
+            console.log(`Tags invalidated successfully for [${tag}]`)
+          }))
+        } else {
+          console.error(`Invalid tag name ${tag}`)
+        }
+      })
+      Promise.all(subPromises).then(r => {
+        console.log(`All tags invalidated successfully [${cmd.tag}]`)
+        process.exit(0)
+      }).catch(error => {
+        console.error(error)
+      })
+    }
+  })
+
+program.parse(process.argv)

core/scripts/server.js

@@ -63,26 +63,40 @@ app.use('/service-worker.js', serve('dist/service-worker.js', {
 }))
 
 app.get('/invalidate', (req, res) => {
-  if (req.query.tag) { // clear cache pages for specific query tag
+  if (req.query.tag && req.query.key) { // clear cache pages for specific query tag
+    if (req.query.key !== config.server.invalidateCacheKey) {
+      console.error('Invalid cache invalidation key')
+      res.end('Invalid cache invalidation key')
+      return
+    }
     console.log(`Clear cache request for [${req.query.tag}]`)
     let tags = []
     if (req.query.tag === '*') {
-      tags = ['product', 'category', 'home']
+      tags = config.server.availableCacheTags
     } else {
       tags = req.query.tag.split(',')
     }
     const subPromises = []
     tags.forEach(tag => {
-      subPromises.push(cache.invalidate(tag).then(() => {
-        console.log(`Tags invalidated successfully for [${tag}]`)
-      }))
+      if (config.server.availableCacheTags.indexOf(tag) >= 0 || config.server.availableCacheTags.find(t => {
+        return tag.indexOf(t) === 0
+      })) {
+        subPromises.push(cache.invalidate(tag).then(() => {
+          console.log(`Tags invalidated successfully for [${tag}]`)
+        }))
+      } else {
+        console.error(`Invalid tag name ${tag}`)
+      }
     })
     Promise.all(subPromises).then(r => {
       res.end(`Tags invalidated successfully [${req.query.tag}]`)
     }).catch(error => {
       res.end(error)
       console.error(error)
     })
+  } else {
+    res.end('GET Parameters key and tag are required')
+    console.error('Invalid parameters for Clear cache request')
   }
 })
 

doc/SSR Cache.md

@@ -48,9 +48,53 @@ Example call to clear all product, category and home pages:
 **WARNING:**
 We strongly recommend You to NOT USE Output cache in the development mode. By using it You won't be able to refresh the UI changes after modyfing the Vue components etc.
 
-**Cache invalidation:** Recent version of [mage2vuestorefront](https://github.com/DivanteLtd/mage2vuestorefront) do support output cache invalidation. Output cache is being tagged with the product and categories id (products and categories used on specific page). Mage2vuestorefront can invalidate cache of product and category pages if You set the following ENV variables:
+## CLI cache clear
+
+You can manualy clear Redis cache for specific tags by running the following command:
 
 ```bash
-export VS_INVALIDATE_CACHE_URL=http://localhost:3000/invalidate?tag=
+npm run cache clear
+npm run cache clear -- --tag=product,category
+npm run cache clear -- --tag=P198
+npm run cache clear -- --tag=*
+```
+
+Available tag keys are set in the `config.server.availableCacheTags` (by default: `"product", "category", "home", "checkout", "page-not-found", "compare", "my-account", "P", "C"`)
+
+**Dynamic cache invalidation:** Recent version of [mage2vuestorefront](https://github.com/DivanteLtd/mage2vuestorefront) do support output cache invalidation. Output cache is being tagged with the product and categories id (products and categories used on specific page). Mage2vuestorefront can invalidate cache of product and category pages if You set the following ENV variables:
+
+```bash
+export VS_INVALIDATE_CACHE_URL=http://localhost:3000/invalidate?key=SECRETKEY&tag=
 export VS_INVALIDATE_CACHE=1
 ```
+
+**SECURITY NOTE:** Please note that `key=SECRETKEY` should be equal to `vue-storefront/config/local.json` value of `server.invalidateCacheKey`
+
+## Adding new types / cache tags
+
+If You're adding new type of page (`core/pages`) and `config.server.useOutputCache=true` - You should also extend the `config.server.availableCacheTags` of new general purpose tag that will be connected with the URLs connected with this new page.
+
+After doing so, please add the `asyncData` method to Your page code assigning the right tag (please take a look at `core/pages/Home.js` for instance):
+
+```js
+  asyncData ({ store, route }) { // this is for SSR purposes to prefetch data
+    return new Promise((resolve, reject) => {
+      store.state.requestContext.outputCacheTags.add(`home`)
+      console.log('Entering asyncData for Home root ' + new Date())
+      EventBus.$emitFilter('home-after-load', { store: store, route: route }).then((results) => {
+        return resolve()
+      }).catch((err) => {
+        console.error(err)
+        reject(err)
+      })
+    })
+  },
+```
+
+This line:
+
+```js
+      store.state.requestContext.outputCacheTags.add(`home`)
+```
+
+... is in charge of assigning the specific tag with current HTTP request output.