fix(gatsby): wait for extracted query enqueuing before running queries (#27408)

* add failing e2e test

* fix(gatsby): wait for extracted query enqueuing before running it

Author: vladar

e2e-tests/development-runtime/cypress/integration/hot-reloading/page-queries.js

@@ -0,0 +1,19 @@
+const author = `@gatsbyjs`
+
+beforeEach(() => {
+  cy.visit(`/page-query/`).waitForRouteChange()
+})
+
+describe(`hot-reloading page queries`, () => {
+  it(`displays placeholder content on launch`, () => {
+    cy.getTestElement(`hot`).invoke(`text`).should(`not.contain`, author)
+  })
+
+  it(`can edit a page query`, () => {
+    cy.exec(
+      `npm run update -- --file src/pages/page-query.js --replacements "# %AUTHOR%:author" --exact`
+    )
+
+    cy.getTestElement(`hot`).invoke(`text`).should(`contain`, author)
+  })
+})

e2e-tests/development-runtime/src/pages/page-query.js

@@ -0,0 +1,23 @@
+import React from "react"
+import { graphql } from "gatsby"
+
+function PageQuery({ data }) {
+  return (
+    <p data-testid="hot">
+      {data.site.siteMetadata.title}: {data.site.siteMetadata.author}
+    </p>
+  )
+}
+
+export const query = graphql`
+  {
+    site {
+      siteMetadata {
+        # %AUTHOR%
+        title
+      }
+    }
+  }
+`
+
+export default PageQuery

packages/gatsby/src/state-machines/query-running/index.ts

@@ -7,6 +7,8 @@ import { queryActions } from "./actions"
  * This is a child state machine, spawned to perform the query running
  */
 
+const PAGE_QUERY_ENQUEUING_TIMEOUT = 50
+
 export const queryStates: MachineConfig<IQueryRunningContext, any, any> = {
   initial: `extractingQueries`,
   id: `queryRunningMachine`,
@@ -23,6 +25,25 @@ export const queryStates: MachineConfig<IQueryRunningContext, any, any> = {
         id: `extracting-queries`,
         src: `extractQueries`,
         onDone: {
+          target: `waitingPendingQueries`,
+        },
+      },
+    },
+    // This state exists solely because "extractQueries" finishes too early.
+    // It finishes before extracted queries are enqueued for execution.
+    // As a result calculateDirtyQueries doesn't see them and they are not executed.
+    //
+    // This happens because extracted queries are enqueued for execution with setTimeout(x, 0)
+    // wrapper in actions of redux/machines/page-component which fires after "extractQueries" finishes.
+    //
+    // see https://github.com/gatsbyjs/gatsby/issues/26580
+    //
+    // FIXME: this has to be fixed properly by not leaving "extractingQueries" state
+    //   until all extracted queries are enqueued for execution (but requires a refactor)
+    waitingPendingQueries: {
+      id: `waiting-pending-queries`,
+      after: {
+        [PAGE_QUERY_ENQUEUING_TIMEOUT]: {
           target: `writingRequires`,
           actions: `markSourceFilesClean`,
         },