fix(gatsby-script): Make load callback work when both load and error …

…callbacks defined (#35760) (#35787) Co-authored-by: Ty Hopp <tyhopp@users.noreply.github.com>
gatsbyjs · May 31, 2022 · ae95d66 · ae95d66
1 parent 9f5c107
commit ae95d66
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 6 deletions.
diff --git a/...sts/development-runtime/cypress/integration/gatsby-script/gatsby-script-both-callbacks.js b/...sts/development-runtime/cypress/integration/gatsby-script/gatsby-script-both-callbacks.js
@@ -0,0 +1,13 @@
+describe(`both onLoad and onError callbacks are declared`, () => {
+  beforeEach(() => {
+    cy.visit(`/gatsby-script-both-callbacks/`).waitForRouteChange()
+  })
+
+  it(`should execute the onLoad callback`, () => {
+    cy.get(`[data-on-load-result=both-callbacks]`).should(`have.length`, 1)
+  })
+
+  it(`should execute the onError callback`, () => {
+    cy.get(`[data-on-error-result=both-callbacks]`).should(`have.length`, 1)
+  })
+})
diff --git a/e2e-tests/development-runtime/src/pages/gatsby-script-both-callbacks.js b/e2e-tests/development-runtime/src/pages/gatsby-script-both-callbacks.js
@@ -0,0 +1,30 @@
+import React from "react"
+import { Script } from "gatsby"
+import { scripts } from "../../gatsby-script-scripts"
+import { onLoad, onError } from "../utils/gatsby-script-callbacks"
+
+const BothCallbacksPage = () => {
+  return (
+    <main>
+      <h1>Script component e2e test</h1>
+
+      <Script
+        src={scripts.marked}
+        onLoad={() => {
+          onLoad(`both-callbacks`)
+        }}
+        onError={() => {}}
+      />
+
+      <Script
+        src="/non-existent-script.js"
+        onLoad={() => {}}
+        onError={() => {
+          onError(`both-callbacks`)
+        }}
+      />
+    </main>
+  )
+}
+
+export default BothCallbacksPage
diff --git a/e2e-tests/development-runtime/src/pages/gatsby-script-duplicate-scripts.js b/e2e-tests/development-runtime/src/pages/gatsby-script-duplicate-scripts.js
@@ -3,7 +3,7 @@ import { Script } from "gatsby"
 import { scripts } from "../../gatsby-script-scripts"
 import { onLoad, onError } from "../utils/gatsby-script-callbacks"
 
-const DuplicateScripts = () => {
+const DuplicateScriptsPage = () => {
   const [onLoadScriptLoaded, setOnLoadScriptLoaded] = useState(false)
   const [onErrorScriptLoaded, setOnErrorScriptLoaded] = useState(false)
   const [secondOnLoadScriptLoaded, setSecondOnLoadScriptLoaded] = useState(
@@ -98,4 +98,4 @@ const DuplicateScripts = () => {
   )
 }
 
-export default DuplicateScripts
+export default DuplicateScriptsPage
diff --git a/e2e-tests/production-runtime/cypress/integration/gatsby-script-both-callbacks.js b/e2e-tests/production-runtime/cypress/integration/gatsby-script-both-callbacks.js
@@ -0,0 +1,13 @@
+describe(`both onLoad and onError callbacks are declared`, () => {
+  beforeEach(() => {
+    cy.visit(`/gatsby-script-both-callbacks/`).waitForRouteChange()
+  })
+
+  it(`should execute the onLoad callback`, () => {
+    cy.get(`[data-on-load-result=both-callbacks]`).should(`have.length`, 1)
+  })
+
+  it(`should execute the onError callback`, () => {
+    cy.get(`[data-on-error-result=both-callbacks]`).should(`have.length`, 1)
+  })
+})
diff --git a/e2e-tests/production-runtime/src/pages/gatsby-script-both-callbacks.js b/e2e-tests/production-runtime/src/pages/gatsby-script-both-callbacks.js
@@ -0,0 +1,30 @@
+import React from "react"
+import { Script } from "gatsby"
+import { scripts } from "../../gatsby-script-scripts"
+import { onLoad, onError } from "../utils/gatsby-script-callbacks"
+
+const BothCallbacksPage = () => {
+  return (
+    <main>
+      <h1>Script component e2e test</h1>
+
+      <Script
+        src={scripts.marked}
+        onLoad={() => {
+          onLoad(`both-callbacks`)
+        }}
+        onError={() => {}}
+      />
+
+      <Script
+        src="/non-existent-script.js"
+        onLoad={() => {}}
+        onError={() => {
+          onError(`both-callbacks`)
+        }}
+      />
+    </main>
+  )
+}
+
+export default BothCallbacksPage
diff --git a/e2e-tests/production-runtime/src/pages/gatsby-script-duplicate-scripts.js b/e2e-tests/production-runtime/src/pages/gatsby-script-duplicate-scripts.js
@@ -3,7 +3,7 @@ import { Script } from "gatsby"
 import { scripts } from "../../gatsby-script-scripts"
 import { onLoad, onError } from "../utils/gatsby-script-callbacks"
 
-const DuplicateScripts = () => {
+const DuplicateScriptsPage = () => {
   const [onLoadScriptLoaded, setOnLoadScriptLoaded] = useState(false)
   const [onErrorScriptLoaded, setOnErrorScriptLoaded] = useState(false)
 
@@ -58,4 +58,4 @@ const DuplicateScripts = () => {
   )
 }
 
-export default DuplicateScripts
+export default DuplicateScriptsPage
diff --git a/packages/gatsby-script/src/gatsby-script.tsx b/packages/gatsby-script/src/gatsby-script.tsx
@@ -153,17 +153,17 @@ function injectScript(props: ScriptProps): IInjectedScriptDetails | null {
      * If a duplicate script is already loaded/errored, we replay load/error callbacks with the original event.
      * If it's not yet loaded/errored, keep track of callbacks so we can call load/error callbacks for each when the event occurs.
      */
-    const cachedCallbacks = scriptCallbackCache.get(scriptKey) || {}
-
     for (const name of callbackNames) {
       if (currentCallbacks?.[name]) {
+        const cachedCallbacks = scriptCallbackCache.get(scriptKey) || {}
         const { callbacks = [] } = cachedCallbacks?.[name] || {}
         callbacks.push(currentCallbacks?.[name])
 
         if (cachedCallbacks?.[name]?.event) {
           currentCallbacks?.[name]?.(cachedCallbacks?.[name]?.event)
         } else {
           scriptCallbackCache.set(scriptKey, {
+            ...cachedCallbacks,
             [name]: {
               callbacks,
             },