[v2] improve how we load GraphQL query results in development/production (aka Ludicrous Mode)

packages/gatsby/cache-dir/json-store.js

@@ -10,40 +10,61 @@ class JSONStore extends React.Component {
     super(props)
     this.state = {
       data: {},
-      receivedData: false,
     }
     try {
       this.socket = window.io()
     } catch (err) {
       console.error(`Could not connect to socket.io on dev server.`)
     }
+    this.setPageData = this.setPageData.bind(this)
+    this.getPageData = this.getPageData.bind(this)
   }
 
   componentDidMount() {
-    this.socket.on(`queryResult`, data => {
-      this.setState({
-        data,
-        receivedData: true,
-      })
+    this.socket.on(`queryResult`, this.setPageData)
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    if (nextProps !== this.props) return true
+
+    // if json for nextState is not available
+    const nextJsonId = get(nextProps.pageResources, `page.jsonName`)
+    if (!nextState.data[nextJsonId]) return false
+
+    // if nextState json is the same as current state json
+    const sameDataPath =
+      get(nextState, `data[${nextJsonId}].dataPath`) ===
+      get(this, `state.data[${nextJsonId}].dataPath`)
+
+    if (sameDataPath) return false
+
+    return true
+  }
+
+  setPageData(newData) {
+    this.setState({
+      data: { [newData.path]: newData },
     })
   }
 
   getPageData(path) {
-    const ob = this.state.data[path]
-    if (!ob) {
-      console.log(`Missing JSON: ${path}`)
-      return {}
-    }
-    return JSON.parse(ob)
+    const res = this.state.data[path]
+
+    // always check for fresh data
+    this.socket.emit(`getPageData`, path)
+
+    if (!res || !res.data) return false
+    return JSON.parse(res.data)
   }
 
   render() {
-    if (!this.state.receivedData) return ``
     const { isPage, pages, pageResources } = this.props
     const propsWithoutPages = omit(this.props, `pages`)
+
     if (isPage) {
       const jsonId = get(pageResources, `page.jsonName`)
       const pageData = this.getPageData(jsonId)
+      if (pageData === false) return ``
       return createElement(ComponentRenderer, {
         key: `normal-page`,
         ...propsWithoutPages,

packages/gatsby/src/commands/develop.js

@@ -22,7 +22,7 @@ const formatWebpackMessages = require(`react-dev-utils/formatWebpackMessages`)
 const chalk = require(`chalk`)
 const address = require(`address`)
 const sourceNodes = require(`../utils/source-nodes`)
-const ws = require(`../utils/websocket`)
+const websocketManager = require(`../utils/websocket-manager`)
 
 // const isInteractive = process.stdout.isTTY
 
@@ -196,14 +196,9 @@ async function startServer(program) {
   /**
    * Set up the HTTP server and socket.io.
    **/
-
   const server = require(`http`).Server(app)
-  ws.init(server)
-  const io = ws.instance()
-  io.on(`connection`, socket => {
-    socket.join(`clients`)
-    socket.emit(`queryResult`, ws.flushResults())
-  })
+  websocketManager.init({ server, directory: program.directory })
+  const socket = websocketManager.getSocket()
 
   const listener = server.listen(program.port, program.host, err => {
     if (err) {
@@ -228,7 +223,7 @@ async function startServer(program) {
 
   chokidar.watch(watchGlobs).on(`change`, async () => {
     await createIndexHtml()
-    io.to(`clients`).emit(`reload`)
+    socket.to(`clients`).emit(`reload`)
   })
 
   return [compiler, listener]

packages/gatsby/src/internal-plugins/query-runner/pages-writer.js

@@ -10,7 +10,7 @@ const getLayoutById = layouts => id => layouts.find(l => l.id === id)
 // Write out pages information.
 const writePages = async () => {
   bootstrapFinished = true
-  let { program, pages, layouts } = store.getState()
+  let { program, jsonDataPaths, pages, layouts } = store.getState()
   // Write out pages.json
   const pagesData = pages.reduce(
     (mem, { path, matchPath, componentChunkName, layout, jsonName }) => {
@@ -40,9 +40,10 @@ const writePages = async () => {
       componentChunkName: p.componentChunkName,
       component: p.component,
     })
+
     if (p.layout) {
       let layout = getLayoutById(layouts)(p.layout)
-
+      const layoutDataPath = jsonDataPaths[layout.jsonName]
       if (!layout) {
         throw new Error(
           `Could not find layout '${
@@ -53,34 +54,34 @@ const writePages = async () => {
 
       if (!_.includes(pageLayouts, layout)) {
         pageLayouts.push(layout)
-        if (layout.dataPath) {
+        if (typeof layoutDataPath !== `undefined`) {
           json.push({
             jsonName: layout.jsonName,
-            dataPath: layout.dataPath,
+            layoutDataPath,
           })
         }
 
         const wrapperComponent = `
         import React from "react"
         import Component from "${layout.component}"
-        ${layout.dataPath &&
+        ${layoutDataPath &&
           `import data from "${joinPath(
             program.directory,
             `public`,
             `static`,
             `d`,
-            `${layout.dataPath}.json`
+            `${layoutDataPath}.json`
           )}"`}
-        
-      
-        export default (props) => <Component {...props}${layout.dataPath &&
+
+
+        export default (props) => <Component {...props}${layoutDataPath &&
           ` {...data}`} />
         `
         fs.writeFileSync(layout.componentWrapperPath, wrapperComponent)
       }
     }
-    if (p.dataPath) {
-      json.push({ jsonName: p.jsonName, dataPath: p.dataPath })
+    if (p.jsonName && jsonDataPaths[p.jsonName]) {
+      json.push({ jsonName: p.jsonName, dataPath: jsonDataPaths[p.jsonName] })
     }
   })
 
@@ -124,18 +125,7 @@ const preferDefault = m => m && m.default || m
     .join(`,\n`)}
 }\n\n`
 
-  const staticDataPaths = JSON.stringify(
-    _.reduce(
-      json,
-      (acc, j) => {
-        acc[j.jsonName] = j.dataPath
-        return acc
-      },
-      {}
-    ),
-    null,
-    2
-  )
+  const staticDataPaths = JSON.stringify(jsonDataPaths)
 
   asyncRequires += `exports.json = ${staticDataPaths}\n\n`
 

packages/gatsby/src/internal-plugins/query-runner/query-runner.js

@@ -2,7 +2,7 @@ import { graphql as graphqlFunction } from "graphql"
 const fs = require(`fs-extra`)
 const report = require(`gatsby-cli/lib/reporter`)
 const md5 = require(`md5`)
-const ws = require(`../../utils/websocket`)
+const websocketManager = require(`../../utils/websocket-manager`)
 
 const path = require(`path`)
 const { store } = require(`../../redux`)
@@ -63,54 +63,39 @@ module.exports = async (pageOrLayout, component) => {
 
   if (resultHashes[pageOrLayout.jsonName] !== resultHash) {
     resultHashes[pageOrLayout.jsonName] = resultHash
-    const programType = program._[0]
 
-    // In production, write file to public/static/d/ folder.
-    if (programType === `build`) {
-      const dataPath = `${generatePathChunkName(
-        pageOrLayout.jsonName
-      )}-${resultHash}`
-
-      const resultPath = path.join(
-        program.directory,
-        `public`,
-        `static`,
-        `d`,
-        `${dataPath}.json`
-      )
-      await fs.writeFile(resultPath, resultJSON)
-
-      if (!pageOrLayout.path) {
-        store.dispatch({
-          type: `SET_LAYOUT_DATA_PATH`,
-          payload: {
-            id: pageOrLayout.id,
-            dataPath,
-          },
-        })
-      } else {
-        store.dispatch({
-          type: `SET_PAGE_DATA_PATH`,
-          payload: {
-            path: pageOrLayout.path,
-            dataPath,
-          },
-        })
-      }
+    // Always write file to public/static/d/ folder.
+    const dataPath = `${generatePathChunkName(
+      pageOrLayout.jsonName
+    )}-${resultHash}`
 
-      return
-    }
+    const programType = program._[0]
 
-    // In development queue up results until a client is available
-    // push subsequent results to client
     if (programType === `develop`) {
-      const result = {}
-      result[pageOrLayout.jsonName] = resultJSON
-      ws.pushResult(result)
-      const sockets = ws.instance()
-      if (sockets) {
-        sockets.emit(`queryResult`, result)
+      const data = {
+        dataPath,
+        data: resultJSON,
+        path: pageOrLayout.jsonName,
       }
+      websocketManager.emitData({ data })
     }
+
+    const resultPath = path.join(
+      program.directory,
+      `public`,
+      `static`,
+      `d`,
+      `${dataPath}.json`
+    )
+    await fs.writeFile(resultPath, resultJSON)
+
+    store.dispatch({
+      type: `SET_JSON_DATA_PATH`,
+      payload: {
+        [pageOrLayout.jsonName]: dataPath,
+      },
+    })
+
+    return
   }
 }

packages/gatsby/src/redux/index.js

@@ -49,6 +49,7 @@ const saveState = _.debounce(state => {
     `nodes`,
     `status`,
     `componentDataDependencies`,
+    `jsonDataPaths`,
   ])
   fs.writeFile(
     `${process.cwd()}/.cache/redux-state.json`,

packages/gatsby/src/redux/reducers/index.js

@@ -17,4 +17,5 @@ module.exports = {
   webpack: require(`./webpack`),
   redirects: require(`./redirects`),
   babelrc: require(`./babelrc`),
+  jsonDataPaths: require(`./json-data-paths`),
 }

packages/gatsby/src/redux/reducers/json-data-paths.js

@@ -0,0 +1,17 @@
+// const omit = require(`lodash/omit`)
+
+module.exports = (state = {}, action) => {
+  switch (action.type) {
+    // case `DELETE_ALL_JSON_DATA_PATHS`:
+    //   return {}
+    case `SET_JSON_DATA_PATH`:
+      return {
+        ...state,
+        ...action.payload,
+      }
+    // case `DELETE_JSON_DATA_PATH`:
+    //   return omit(state, action.payload)
+    default:
+      return state
+  }
+}

packages/gatsby/src/redux/reducers/layouts.js

@@ -34,19 +34,7 @@ module.exports = (state = [], action) => {
         return [...state.concat(action.payload)]
       }
     }
-    case `SET_LAYOUT_DATA_PATH`: {
-      const index = _.findIndex(state, l => l.id === action.payload.id)
-      if (index !== -1) {
-        return [
-          ...state
-            .slice(0, index)
-            .concat({ ...state[index], dataPath: action.payload.dataPath })
-            .concat(state.slice(index + 1)),
-        ]
-      }
 
-      return state
-    }
     case `DELETE_LAYOUT`:
       return state.filter(l => l.id !== action.payload.id)
     default:

packages/gatsby/src/redux/reducers/pages.js

@@ -33,19 +33,7 @@ module.exports = (state = [], action) => {
         return [...state.concat(action.payload)]
       }
     }
-    case `SET_PAGE_DATA_PATH`: {
-      const index = _.findIndex(state, p => p.path === action.payload.path)
-      if (index !== -1) {
-        return [
-          ...state
-            .slice(0, index)
-            .concat({ ...state[index], dataPath: action.payload.dataPath })
-            .concat(state.slice(index + 1)),
-        ]
-      }
 
-      return state
-    }
     case `DELETE_PAGE`:
       return state.filter(p => p.path !== action.payload.path)
     default: