Don't dump all query results out to the client

Instead only push results out if the data is for a path that's currently
being viewed in a client.

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

@@ -10,43 +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.setJsonData = this.setJsonData.bind(this)
+    this.setPageData = this.setPageData.bind(this)
+    this.getPageData = this.getPageData.bind(this)
   }
 
   componentDidMount() {
-    this.socket.on(`queryResult`, this.setJsonData)
+    this.socket.on(`queryResult`, this.setPageData)
   }
 
-  setJsonData(newData) {
+  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: { ...this.state.data, ...newData },
-      receivedData: true,
+      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

@@ -23,7 +23,6 @@ const chalk = require(`chalk`)
 const address = require(`address`)
 const sourceNodes = require(`../utils/source-nodes`)
 const websocketManager = require(`../utils/websocket-manager`)
-const path = require(`path`)
 
 // const isInteractive = process.stdout.isTTY
 
@@ -44,26 +43,6 @@ rlInterface.on(`SIGINT`, () => {
   process.exit()
 })
 
-// Read query results from cached json files
-const getCachedQueryResults = ({ pages, jsonDataPaths, directory }) => {
-  let data = {}
-
-  pages.forEach(page => {
-    const dataPath = jsonDataPaths[page.jsonName]
-    if (typeof dataPath === `undefined`) return
-    const filePath = path.join(
-      directory,
-      `public`,
-      `static`,
-      `d`,
-      `${dataPath}.json`
-    )
-    data[page.jsonName] = fs.readFileSync(filePath, `utf-8`)
-  })
-
-  return data
-}
-
 async function startServer(program) {
   const directory = program.directory
   const directoryPath = withBasePath(directory)
@@ -218,18 +197,8 @@ async function startServer(program) {
    * Set up the HTTP server and socket.io.
    **/
   const server = require(`http`).Server(app)
-  const state = store.getState()
-  const cachedQueryResults = getCachedQueryResults({
-    pages: state.pages,
-    jsonDataPaths: state.jsonDataPaths,
-    directory: program.directory,
-  })
-  websocketManager.pushResults(cachedQueryResults)
-  websocketManager.init(server)
-  const socket = websocketManager.instance()
-  socket.on(`connection`, s => {
-    s.join(`clients`)
-  })
+  websocketManager.init({ server, directory: program.directory })
+  const socket = websocketManager.getSocket()
 
   const listener = server.listen(program.port, program.host, err => {
     if (err) {

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

@@ -63,25 +63,23 @@ module.exports = async (pageOrLayout, component) => {
 
   if (resultHashes[pageOrLayout.jsonName] !== resultHash) {
     resultHashes[pageOrLayout.jsonName] = resultHash
-    const programType = program._[0]
-
-    if (programType === `develop`) {
-      const result = { [pageOrLayout.jsonName]: resultJSON }
-      const socket = websocketManager.instance()
-      if (socket) {
-        // push result straight to client
-        socket.emit(`queryResult`, result)
-      } else {
-        // queue results up until socket is available
-        websocketManager.pushResults(result)
-      }
-    }
 
     // Always write file to public/static/d/ folder.
     const dataPath = `${generatePathChunkName(
       pageOrLayout.jsonName
     )}-${resultHash}`
 
+    const programType = program._[0]
+
+    if (programType === `develop`) {
+      const data = {
+        dataPath,
+        data: resultJSON,
+        path: pageOrLayout.jsonName,
+      }
+      websocketManager.emitData({ data })
+    }
+
     const resultPath = path.join(
       program.directory,
       `public`,

packages/gatsby/src/utils/websocket-manager.js

@@ -1,17 +1,80 @@
-let websocket
-let isInitialised = false
-let results = {}
-
-module.exports = {
-  init: server => {
-    websocket = require(`socket.io`)(server)
-    websocket.on(`connection`, s => {
-      s.emit(`queryResult`, results)
+const path = require(`path`)
+const { store } = require(`../redux`)
+const fs = require(`fs`)
+
+const getCachedPageData = (jsonName, directory) => {
+  const jsonDataPaths = store.getState().jsonDataPaths
+  const dataPath = jsonDataPaths[jsonName]
+  if (typeof dataPath === `undefined`) return undefined
+  const filePath = path.join(
+    directory,
+    `public`,
+    `static`,
+    `d`,
+    `${dataPath}.json`
+  )
+  const data = fs.readFileSync(filePath, `utf-8`)
+  return {
+    data,
+    dataPath,
+    path: jsonName,
+  }
+}
+
+class WebsocketManager {
+  constructor() {
+    this.isInitialised = false
+    this.results = {}
+    this.activePaths = new Map()
+    this.websocket
+    this.programDir
+
+    this.init = this.init.bind(this)
+    this.getSocket = this.getSocket.bind(this)
+    this.getPageData = this.getPageData.bind(this)
+    this.emitData = this.emitData.bind(this)
+  }
+
+  init({ server, directory }) {
+    this.programDir = directory
+    this.websocket = require(`socket.io`)(server)
+
+    this.websocket.on(`connection`, s => {
+      const clientId = s.id
+      s.join(`clients`)
+      s.on(`getPageData`, path => {
+        this.getPageData(path, clientId)
+      })
+      s.on(`disconnect`, s => {
+        this.activePaths.delete(clientId)
+      })
     })
-    isInitialised = true
-  },
-  instance: () => isInitialised && websocket,
-  pushResults: result => {
-    Object.assign(results, result)
-  },
+
+    this.isInitialised = true
+  }
+
+  getSocket() {
+    return this.isInitialised && this.websocket
+  }
+
+  getPageData(path, clientId) {
+    // track the active path for each connected client
+    this.activePaths.set(clientId, path)
+    const data = getCachedPageData(path, this.programDir)
+    this.emitData({ data, forceEmit: true })
+  }
+
+  emitData({ data, forceEmit = false }) {
+    const isActivePath =
+      data.path && Array.from(this.activePaths.values()).includes(data.path)
+
+    // push results if this path is active on a client
+    if (isActivePath || forceEmit) {
+      this.websocket.emit(`queryResult`, data)
+    }
+  }
 }
+
+const manager = new WebsocketManager()
+
+module.exports = manager