feat(gatsby): Load static query results in Gatsby runtime (#25723)

* Load static query results in Gatsby runtime * Update snapshots * Add in flight check and caching * Revert loader.loadPageSync behaviour * Use optional chaining * Use memoized get across loader * Refactor loader and clean up * Remove console.log * Add a separate in flight map per page * Add back assertion for Promise in loader * Make fetchPageDataJson a class function * Ensure static queries work in wrapRootElement * Disable gatsby-ssr wrapRootElement * Fix static query result fetch calls when using __PATH_PREFIX__ * Add back gatsby-ssr * Add preload headers for static query results * Return undefined when page is broken in loader * Set error state in pageDb * Fix tests
gatsbyjs · Jul 20, 2020 · b00c3df · b00c3df
1 parent 829098d
commit b00c3df
Show file tree

Hide file tree

Showing 13 changed files with 277 additions and 132 deletions.
diff --git a/e2e-tests/production-runtime/package.json b/e2e-tests/production-runtime/package.json
@@ -5,7 +5,7 @@
   "author": "Kyle Mathews <[email protected]>",
   "dependencies": {
     "cypress": "3.4.1",
-    "gatsby": "^2.0.118",
+    "gatsby": "^2.22.9",
     "gatsby-plugin-manifest": "^2.0.17",
     "gatsby-plugin-offline": "^3.0.0",
     "gatsby-plugin-react-helmet": "^3.0.6",

diff --git a/packages/babel-plugin-remove-graphql-queries/src/index.js b/packages/babel-plugin-remove-graphql-queries/src/index.js
@@ -188,7 +188,8 @@ export default function ({ types: t }) {
         const nestedJSXVistor = {
           JSXIdentifier(path2) {
             if (
-              [`production`, `test`].includes(process.env.NODE_ENV) &&
+              (process.env.NODE_ENV === `test` ||
+                state.opts.stage === `build-html`) &&
               path2.isJSXIdentifier({ name: `StaticQuery` }) &&
               path2.referencesImport(`gatsby`) &&
               path2.parent.type !== `JSXClosingElement`
@@ -227,7 +228,8 @@ export default function ({ types: t }) {
         const nestedHookVisitor = {
           CallExpression(path2) {
             if (
-              [`production`, `test`].includes(process.env.NODE_ENV) &&
+              (process.env.NODE_ENV === `test` ||
+                state.opts.stage === `build-html`) &&
               isUseStaticQuery(path2)
             ) {
               const identifier = t.identifier(`staticQueryData`)

diff --git a/packages/gatsby/cache-dir/__tests__/__snapshots__/dev-loader.js.snap b/packages/gatsby/cache-dir/__tests__/__snapshots__/dev-loader.js.snap
@@ -10,7 +10,9 @@ Object {
     "componentChunkName": "chunk",
     "matchPath": undefined,
     "path": "/mypage/",
+    "staticQueryHashes": Array [],
     "webpackCompilationHash": "123",
   },
+  "staticQueryResults": Object {},
 }
 `;
diff --git a/packages/gatsby/cache-dir/__tests__/__snapshots__/loader.js.snap b/packages/gatsby/cache-dir/__tests__/__snapshots__/loader.js.snap
@@ -10,7 +10,9 @@ Object {
     "componentChunkName": "chunk",
     "matchPath": undefined,
     "path": "/mypage/",
+    "staticQueryHashes": Array [],
     "webpackCompilationHash": "123",
   },
+  "staticQueryResults": Object {},
 }
 `;
diff --git a/packages/gatsby/cache-dir/__tests__/dev-loader.js b/packages/gatsby/cache-dir/__tests__/dev-loader.js
@@ -318,6 +318,7 @@ describe(`Dev loader`, () => {
         result: {
           pageContext: `something something`,
         },
+        staticQueryHashes: [],
       }
       devLoader.loadPageDataJson = jest.fn(() =>
         Promise.resolve({
@@ -328,7 +329,12 @@ describe(`Dev loader`, () => {
 
       const expectation = await devLoader.loadPage(`/mypage/`)
       expect(expectation).toMatchSnapshot()
-      expect(Object.keys(expectation)).toEqual([`component`, `json`, `page`])
+      expect(Object.keys(expectation)).toEqual([
+        `component`,
+        `json`,
+        `page`,
+        `staticQueryResults`,
+      ])
       expect(devLoader.pageDb.get(`/mypage`)).toEqual(
         expect.objectContaining({
           payload: expectation,
@@ -377,6 +383,7 @@ describe(`Dev loader`, () => {
       const pageData = {
         path: `/mypage/`,
         componentChunkName: `chunk`,
+        staticQueryHashes: [],
       }
       devLoader.loadPageDataJson = jest.fn(() =>
         Promise.resolve({
@@ -399,6 +406,7 @@ describe(`Dev loader`, () => {
       const pageData = {
         path: `/mypage/`,
         componentChunkName: `chunk`,
+        staticQueryHashes: [],
       }
       devLoader.loadPageDataJson = jest.fn(() =>
         Promise.resolve({
@@ -441,6 +449,7 @@ describe(`Dev loader`, () => {
         Promise.resolve({
           payload: {
             componentChunkName: `chunk`,
+            staticQueryHashes: [],
           },
           status: `success`,
         })

diff --git a/packages/gatsby/cache-dir/__tests__/loader.js b/packages/gatsby/cache-dir/__tests__/loader.js
@@ -297,6 +297,7 @@ describe(`Production loader`, () => {
         result: {
           pageContext: `something something`,
         },
+        staticQueryHashes: [],
       }
       prodLoader.loadPageDataJson = jest.fn(() =>
         Promise.resolve({
@@ -305,9 +306,16 @@ describe(`Production loader`, () => {
         })
       )
 
-      const expectation = await prodLoader.loadPage(`/mypage/`)
+      const expectation = await prodLoader.loadPage(`/mypage`)
+
       expect(expectation).toMatchSnapshot()
-      expect(Object.keys(expectation)).toEqual([`component`, `json`, `page`])
+      expect(Object.keys(expectation)).toEqual([
+        `component`,
+        `json`,
+        `page`,
+        `staticQueryResults`,
+      ])
+
       expect(prodLoader.pageDb.get(`/mypage`)).toEqual(
         expect.objectContaining({
           payload: expectation,
@@ -356,6 +364,7 @@ describe(`Production loader`, () => {
       const pageData = {
         path: `/mypage/`,
         componentChunkName: `chunk`,
+        staticQueryHashes: [],
       }
       prodLoader.loadPageDataJson = jest.fn(() =>
         Promise.resolve({
@@ -378,6 +387,7 @@ describe(`Production loader`, () => {
       const pageData = {
         path: `/mypage/`,
         componentChunkName: `chunk`,
+        staticQueryHashes: [],
       }
       prodLoader.loadPageDataJson = jest.fn(() =>
         Promise.resolve({
@@ -416,6 +426,7 @@ describe(`Production loader`, () => {
         Promise.resolve({
           payload: {
             componentChunkName: `chunk`,
+            staticQueryHashes: [],
           },
           status: `success`,
         })
@@ -435,6 +446,7 @@ describe(`Production loader`, () => {
         Promise.resolve({
           payload: {
             componentChunkName: `chunk`,
+            staticQueryHashes: [],
           },
           status: `success`,
         })

diff --git a/packages/gatsby/cache-dir/__tests__/static-entry.js b/packages/gatsby/cache-dir/__tests__/static-entry.js
@@ -41,6 +41,7 @@ const MOCK_FILE_INFO = {
     componentChunkName: `page-component---src-pages-test-js`,
     path: `/about/`,
     webpackCompilationHash: `1234567890abcdef1234`,
+    staticQueryHashes: [],
   }),
   [join(process.cwd(), `/public/page-data/app-data.json`)]: JSON.stringify({
     webpackCompilationHash: `1234567890abcdef1234`,

diff --git a/packages/gatsby/cache-dir/gatsby-browser-entry.js b/packages/gatsby/cache-dir/gatsby-browser-entry.js
@@ -71,7 +71,7 @@ useStaticQuery(graphql\`${query}\`);
 `)
   }
 
-  if (context[query] && context[query].data) {
+  if (context?.[query]?.data) {
     return context[query].data
   } else {
     throw new Error(