make cache file writing sync and hashed by query (#346)

* make file writing sync

* got it working for real

* unit tests

* comment and console clean up

* format route variable

* console debug logging for netlify

* fix console statement

* more logging

* return promise and set

* revert to connectedCallback in page template

* clean up console and comments

packages/cli/src/data/cache.js

@@ -23,14 +23,14 @@ module.exports = async (req, context) => {
       /* Take the same query from request, and repeat the query for our server side cache */
       const { query, variables } = req.body;
 
-      let { data } = await client.query({
+      const { data } = await client.query({
         query: gql`${query}`,
         variables
       });
 
       if (data) {
         const cache = JSON.stringify(client.extract());
-        const md5 = crypto.createHash('md5').update(cache).digest('hex');
+        const md5 = crypto.createHash('md5').update(query + JSON.stringify(variables)).digest('hex');
 
         /* Get the requests entire (full) route and rootRoute to use as reference for designated cache directory */
         const { origin, referer } = req.headers;
@@ -39,8 +39,10 @@ module.exports = async (req, context) => {
         const targetDir = path.join(context.publicDir, rootRoute);
         const targetFile = path.join(targetDir, `${md5}-cache.json`);
 
-        await fs.mkdirs(targetDir, { recursive: true });
-        await fs.writeFile(path.join(targetFile), cache, 'utf8');
+        if (!fs.existsSync(targetFile)) {
+          fs.mkdirsSync(targetDir, { recursive: true });
+          fs.writeFileSync(path.join(targetFile), cache, 'utf8');
+        }
       }
       resolve();
     } catch (err) {

packages/cli/test/cases/build.data.graph/build.data.graph.spec.js

@@ -69,10 +69,30 @@ describe('Build Greenwood With: ', function() {
         expect(await glob.promise(path.join(this.context.publicDir, './index.*.bundle.js'))).to.have.lengthOf(1);
       });
 
-      it('should output one cache.json file', async function() {
+      it('should output one (unified) cache.json file', async function() {
         expect(await glob.promise(path.join(this.context.publicDir, './cache.json'))).to.have.lengthOf(1);
       });
 
+      it('should output one (unified) cache.json file that is defined', function() {
+        const cacheContents = require(path.join(this.context.publicDir, 'cache.json'));
+
+        expect(cacheContents).to.not.be.undefined;
+      });
+
+      it('should output three (partial) *-cache.json files, one per query made', async function() {
+        expect(await glob.promise(path.join(this.context.publicDir, './*-cache.json'))).to.have.lengthOf(3);
+      });
+
+      it('should output three (partial) *-cache.json files that are all defined', async function() {
+        const cacheFiles = await glob.promise(path.join(this.context.publicDir, './*-cache.json'));
+
+        cacheFiles.forEach(file => {
+          const cache = require(file);
+
+          expect(cache).to.not.be.undefined;
+        });
+      });
+
       it('should have one window.__APOLLO_STATE__ <script> with (approximated) expected state', () => {
         const scriptTags = dom.window.document.querySelectorAll('head > script');
         const apolloScriptTags = Array.prototype.slice.call(scriptTags).filter(script => {
@@ -110,16 +130,30 @@ describe('Build Greenwood With: ', function() {
         expect(fs.existsSync(path.join(this.context.publicDir, 'blog', 'first-post', 'index.html'))).to.be.true;
       });
 
-      it('should output one cache.json file', async function() {
+      it('should output one (unified) cache.json file', async function() {
         expect(await glob.promise(path.join(this.context.publicDir, 'blog', 'cache.json'))).to.have.lengthOf(1);
       });
 
-      it('should output one cache.json file to be defined', function() {
+      it('should output one (unified) cache.json file that is defined', function() {
         const cacheContents = require(path.join(this.context.publicDir, 'blog', 'cache.json'));
 
         expect(cacheContents).to.not.be.undefined;
       });
 
+      it('should output four ("partial") *-cache.json files, one per query made', async function() {
+        expect(await glob.promise(path.join(this.context.publicDir, 'blog', './*-cache.json'))).to.have.lengthOf(4);
+      });
+
+      it('should output four (partial) *-cache.json files that are defined', async function() {
+        const cacheFiles = await glob.promise(path.join(this.context.publicDir, 'blog', './*-cache.json'));
+
+        cacheFiles.forEach(file => {
+          const cache = require(file);
+
+          expect(cache).to.not.be.undefined;
+        });
+      });
+
       it('should have one window.__APOLLO_STATE__ <script> with (approximated) expected state', () => {
         const scriptTags = dom.window.document.querySelectorAll('head > script');
         const apolloScriptTags = Array.prototype.slice.call(scriptTags).filter(script => {

www/components/shelf/shelf.js

@@ -17,29 +17,14 @@ class Shelf extends LitElement {
 
   constructor() {
     super();
+    this.page = '';
     this.selectedIndex = '';
     this.shelfList = [];
-    this.page = '';
   }
 
   async connectedCallback() {
     super.connectedCallback();
-    if (this.page !== '' && this.page !== '/') {
-      const response = await client.query({
-        query: MenuQuery,
-        variables: {
-          name: 'side',
-          route: window.location.pathname,
-          order: 'index_asc'
-        }
-      });
-
-      this.shelfList = response.data.menu.children;
-      this.requestUpdate();
-    }
-
     this.collapseAll();
-    this.expandRoute(window.location.pathname);
   }
 
   goTo(path) {
@@ -48,7 +33,6 @@ class Shelf extends LitElement {
   }
 
   expandRoute(path) {
-    // find list item containing current window.location.pathname
     let routeShelfListIndex = this.shelfList.findIndex(list => {
       let expRoute = new RegExp(`^${path}$`);
       return expRoute.test(list.item.link);
@@ -57,8 +41,6 @@ class Shelf extends LitElement {
     if (routeShelfListIndex > -1) {
       this.shelfList[routeShelfListIndex].selected = true;
       this.selectedIndex = routeShelfListIndex;
-      // force re-render
-      this.requestUpdate();
     }
   }
 
@@ -99,6 +81,27 @@ class Shelf extends LitElement {
     this.requestUpdate();
   }
 
+  async fetchShelfData() {
+    return await client.query({
+      query: MenuQuery,
+      variables: {
+        name: 'side',
+        route: `/${this.page}/`,
+        order: 'index_asc'
+      }
+    });
+  }
+
+  async updated(changedProperties) {
+    if (changedProperties.has('page') && this.page !== '' && this.page !== '/') {
+      const response = await this.fetchShelfData();
+      this.shelfList = response.data.menu.children;
+
+      this.expandRoute(window.location.pathname);
+      this.requestUpdate();
+    }
+  }
+
   renderList() {
     /* eslint-disable indent */
     const renderListItems = (list, selected) => {

www/templates/page-template.js

@@ -25,7 +25,8 @@ class PageTemplate extends LitElement {
     this.route = '';
   }
 
-  updated() {
+  connectedCallback() {
+    super.connectedCallback();
     this.route = window.location.pathname;
   }