Fix/reloading screen while refreshing

docs/docs/environment-variables.md

@@ -138,6 +138,10 @@ If set to true, this will expose a `/__refresh` webhook that is able to receive
 
 You can trigger this endpoint locally, for example, on Unix-based operating systems (like Ubuntu and MacOS) using `curl -X POST http://localhost:8000/__refresh`.
 
+- `ENABLE_GATSBY_RESTARTING_SCREEN_ON_REFRESH`
+
+If set to true, this will show the restarting screen when the refresh endpoint is hit, until the refresh finishes.
+
 ## Build Variables
 
 Gatsby uses additional environment variables in the build step to fine-tune the outcome of a build. You may find these helpful for more advanced configurations, such as using [CI/CD](https://en.wikipedia.org/wiki/CI/CD) to deploy a Gatsby site.

docs/docs/running-a-gatsby-preview-server.md

@@ -12,6 +12,7 @@ Roughly, you can follow these steps to enable your own preview server:
 
 - Run `gatsby develop` on a Node.js host like [Heroku](/docs/deploying-to-heroku/) with the [ENABLE_GATSBY_REFRESH_ENDPOINT environment variable](/docs/environment-variables/#reserved-environment-variables) enabled. This will configure the develop server to re-source data when it receives a `POST` request to `/__refresh`.
 - Then setup your CMS to ping this URL on the preview server whenever content is changed.
+- if you want to show a restarting screen when the refresh endpoint is hit until it finishes refreshing add the [ENABLE_GATSBY_RESTARTING_SCREEN_ON_REFRESH environment variable](/docs/environment-variables/#reserved-environment-variables)
 
 ## Using Gatsby Cloud Preview
 

e2e-tests/development-refresh-endpoint/cypress/integration/functionality/refresh-endpoint.js

@@ -1,22 +1,69 @@
-describe(`When the refresh endpoint is hit multiple times`, () => {
-
-  it(`should put new requests with unique body in a queue`, () => {
-    cy.request(`POST`, `/__refresh`).then(response => {
-      expect(response.body).to.be.equal(``)
-    })
-    cy.request(`POST`, `/__refresh`).then(response => {
-      expect(response.body).to.include(`queued`)
+describe(`When the refresh endpoint is hit`, () => {
+  afterEach(() => {
+    waitUntilRefreshFinishes()
+  })
+
+  describe(`and accessing any page while refreshing`, () => {
+    it(`the page shown should be restarting page for 404 page`, () => {
+      cy.request(`/non-existing`).then(response => {
+        expect(response.body).not.to.include(`<title>Restarting...</title>`)
+      })
+      cy.request(`POST`, `/__refresh`)
+      cy.request(`/non-existing`).then(response => {
+        expect(response.body).to.include(`<title>Restarting...</title>`)
+      })
     })
-    cy.request(`POST`, `/__refresh`).then(response => {
-      expect(response.body).to.include(`already queued`)
+
+    it(`the page shown should be restarting page for existing pages`, () => {
+      cy.request(`/page-2/`).then(response => {
+        expect(response.body).not.to.include(`<title>Restarting...</title>`)
+      })
+      cy.request(`POST`, `/__refresh`)
+      cy.request(`/page-2/`).then(response => {
+        expect(response.body).to.include(`<title>Restarting...</title>`)
+      })
     })
-    cy.request(`POST`, `/__refresh`, `otherBody`).then(response => {
-      expect(response.body).to.include(`queued`)
+  })
+
+  describe(`and it was not already refreshing`, () => {
+    it(`should return empty body`, () => {
+      cy.request(`POST`, `/__refresh`).then(response => {
+        expect(response.body).to.be.equal(``)
+      })
     })
-    cy.request(`POST`, `/__refresh`, `otherBody`).then(response => {
-      expect(response.body).to.include(`already queued`)
+  })
+  describe(`and it was already refreshing`, () => {
+    it(`should put new requests with unique body in a queue`, () => {
+      cy.request(`POST`, `/__refresh`).then(response => {
+        expect(response.body).to.be.equal(``)
+      })
+      cy.request(`POST`, `/__refresh`).then(response => {
+        expect(response.body).to.include(`queued`)
+      })
+      cy.request(`POST`, `/__refresh`).then(response => {
+        expect(response.body).to.include(`already queued`)
+      })
+      cy.request(`POST`, `/__refresh`, `otherBody`).then(response => {
+        expect(response.body).to.include(`queued`)
+      })
+      cy.request(`POST`, `/__refresh`, `otherBody`).then(response => {
+        expect(response.body).to.include(`already queued`)
+      })
     })
   })
-
 })
 
+function waitUntilRefreshFinishes() {
+  cy.waitUntil(
+    () =>
+      cy
+        .request(`/`)
+        .then(
+          response => !response.body.includes(`<title>Restarting...</title>`)
+        ),
+    {
+      timeout: 60000,
+      interval: 2000,
+    }
+  )
+}

e2e-tests/development-refresh-endpoint/cypress/support/commands.js

@@ -1 +1,2 @@
 import "@testing-library/cypress/add-commands"
+import "cypress-wait-until"

e2e-tests/development-refresh-endpoint/package.json

@@ -20,7 +20,7 @@
   "license": "MIT",
   "scripts": {
     "build": "gatsby build",
-    "develop": "cross-env CYPRESS_SUPPORT=y ENABLE_GATSBY_REFRESH_ENDPOINT=true gatsby develop",
+    "develop": "cross-env CYPRESS_SUPPORT=y ENABLE_GATSBY_RESTARTING_SCREEN_ON_REFRESH=true ENABLE_GATSBY_REFRESH_ENDPOINT=true gatsby develop",
     "serve": "gatsby serve",
     "start": "npm run develop",
     "format": "prettier --write \"src/**/*.js\"",
@@ -33,6 +33,7 @@
     "@testing-library/cypress": "^4.0.4",
     "cross-env": "^5.2.0",
     "cypress": "3.4.1",
+    "cypress-wait-until": "1.7.1",
     "fs-extra": "^7.0.1",
     "gatsby-cypress": "0.4.4",
     "is-ci": "^2.0.0",

packages/gatsby/cache-dir/app.js

@@ -38,6 +38,10 @@ apiRunnerAsync(`onClientEntry`).then(() => {
           `http://${window.location.hostname}:${services.developstatusserver.port}`
         )
 
+        parentSocket.on(`develop:refresh-started`, msg => {
+          window.location.reload()
+        })
+
         parentSocket.on(`develop:needs-restart`, msg => {
           if (
             window.confirm(

packages/gatsby/src/commands/develop.ts

@@ -204,6 +204,9 @@ module.exports = async (program: IProgram): Promise<void> => {
     if (msg.type === `REFRESH` && msg.action === `FINISHED`) {
       proxy.refreshEnded()
     }
+    if (msg.type === `REFRESH` && msg.action === `STARTED`) {
+      io.emit(`develop:refresh-started`)
+    }
   }
 
   io.on(`connection`, socket => {

packages/gatsby/src/internal-plugins/dev-404-page/raw_dev-404-page.js

@@ -2,6 +2,7 @@ import React from "react"
 import PropTypes from "prop-types"
 import { graphql, Link, navigate } from "gatsby"
 import queryString from "query-string"
+import io from "socket.io-client"
 
 class Dev404Page extends React.Component {
   static propTypes = {
@@ -77,6 +78,22 @@ class Dev404Page extends React.Component {
     }
   }
 
+  componentDidMount() {
+    fetch(`/___services`)
+      .then(res => res.json())
+      .then(services => {
+        if (services.developstatusserver) {
+          const parentSocket = io(
+            `http://${window.location.hostname}:${services.developstatusserver.port}`
+          )
+
+          parentSocket.on(`develop:refresh-started`, msg => {
+            window.location.reload()
+          })
+        }
+      })
+  }
+
   render() {
     const { pathname } = this.props.location
     let newFilePath

packages/gatsby/src/utils/develop-proxy.ts

@@ -120,7 +120,11 @@ export const startDevelopProxy = (input: {
       return
     }
 
+    const canShowRestartingScreenOnRefresh = !!process.env
+      .ENABLE_GATSBY_RESTARTING_SCREEN_ON_REFRESH
+
     if (
+      (isRefreshing && canShowRestartingScreenOnRefresh) ||
       shouldServeRestartingScreen ||
       req.url === `/___debug-restarting-screen`
     ) {