fix(gatsby): correctly replace exported queries for StaticQuery (#11545)

e2e-tests/production-runtime/cypress/integration/static-query/extraction.js

@@ -0,0 +1,9 @@
+beforeEach(() => {
+  cy.visit(`/`).waitForAPIorTimeout(`onRouteUpdate`)
+})
+
+it(`replaces StaticQuery`, () => {
+  cy.getTestElement(`bio`)
+    .invoke(`text`)
+    .should(`not.contain`, `Loading`)
+})

e2e-tests/production-runtime/gatsby-config.js

@@ -1,6 +1,10 @@
 module.exports = {
   siteMetadata: {
     title: `Gatsby Default Starter`,
+    author: {
+      name: `Kyle Mathews`,
+      bio: `lives and works in San Francisco building useful things`,
+    },
   },
   plugins: [
     `gatsby-plugin-react-helmet`,

e2e-tests/production-runtime/package.json

@@ -22,12 +22,13 @@
     "build:offline": "TEST_PLUGIN_OFFLINE=y gatsby build",
     "develop": "gatsby develop",
     "format": "prettier --write '**/*.js'",
+    "serve": "gatsby serve",
+    "start": "npm run develop",
     "test": "CYPRESS_SUPPORT=y npm run build && npm run start-server-and-test && npm run test-env-vars",
     "test:offline": "CYPRESS_SUPPORT=y npm run build:offline && yarn start-server-and-test:offline && npm run test-env-vars",
     "test-env-vars": " node __tests__/env-vars.js",
     "start-server-and-test": "start-server-and-test serve http://localhost:9000 cy:run",
     "start-server-and-test:offline": "start-server-and-test serve http://localhost:9000 cy:run:offline",
-    "serve": "gatsby serve",
     "cy:open": "cypress open",
     "cy:open:offline": "npm run cy:open -- --env TEST_PLUGIN_OFFLINE=y",
     "cy:run": "npm run cy:run:normal && npm run cy:run:slow",

e2e-tests/production-runtime/src/components/bio.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import { StaticQuery, graphql } from 'gatsby'
+
+function Bio() {
+  return (
+    <StaticQuery
+      query={bioQuery}
+      render={data => (
+        <div>
+          <p data-testid="bio">
+            A site by {data.site.siteMetadata.author.name} who{` `}
+            {data.site.siteMetadata.author.bio}
+          </p>
+        </div>
+      )}
+    />
+  )
+}
+
+export const bioQuery = graphql`
+  {
+    site {
+      siteMetadata {
+        author {
+          bio
+          name
+        }
+      }
+    }
+  }
+`
+
+export default Bio

e2e-tests/production-runtime/src/pages/index.js

@@ -1,12 +1,14 @@
 import React from 'react'
 import { Link } from 'gatsby'
 
+import Bio from '../components/bio'
 import Layout from '../components/layout'
 import InstrumentPage from '../utils/instrument-page'
 
 const IndexPage = ({ pageContext }) => (
   <Layout>
     <h1>Hi people</h1>
+    <Bio />
     <pre data-testid="dom-marker">{pageContext.DOMMarker || `index`}</pre>
     <ul>
       <li>

packages/babel-plugin-remove-graphql-queries/src/__tests__/__snapshots__/index.js.snap

@@ -103,3 +103,15 @@ exports[`handles require 1`] = `"export const query = \\"3687030656\\";"`;
 exports[`handles require alias 1`] = `"export const query = \\"3687030656\\";"`;
 
 exports[`handles require namespace 1`] = `"export const query = \\"3687030656\\";"`;
+
+exports[`transforms exported variable queries in <StaticQuery> 1`] = `
+"import staticQueryData from \\"public/static/d/2626356014.json\\";
+import React from 'react';
+import { StaticQuery } from 'gatsby';
+export const query = \\"2626356014\\";
+export default (() => React.createElement(StaticQuery, {
+  query: query,
+  render: data => React.createElement(\\"div\\", null, data.site.siteMetadata.title),
+  data: staticQueryData
+}));"
+`;

packages/babel-plugin-remove-graphql-queries/src/__tests__/index.js

@@ -39,6 +39,22 @@ it(`Transforms queries defined in own variable in <StaticQuery>`, () => {
   `)
 })
 
+it(`transforms exported variable queries in <StaticQuery>`, () => {
+  matchesSnapshot(`
+  import React from 'react'
+  import { graphql, StaticQuery } from 'gatsby'
+
+  export const query = graphql\`{site { siteMetadata { title }}}\`
+
+  export default () => (
+    <StaticQuery
+      query={query}
+      render={data => <div>{data.site.siteMetadata.title}</div>}
+    />
+  )
+  `)
+})
+
 it(`Transforms queries in page components`, () => {
   matchesSnapshot(`
   import { graphql } from 'gatsby'

packages/babel-plugin-remove-graphql-queries/src/index.js

@@ -67,6 +67,13 @@ function removeImport(tag) {
   const identifier = isExpression ? tag.get(`object`) : tag
   const importPath = getTagImport(identifier)
 
+  const removeVariableDeclaration = statement => {
+    let declaration = statement.findParent(p => p.isVariableDeclaration())
+    if (declaration) {
+      declaration.remove()
+    }
+  }
+
   if (!importPath) return
 
   const parent = importPath.parentPath
@@ -76,12 +83,12 @@ function removeImport(tag) {
     else importPath.remove()
   }
   if (importPath.isObjectProperty()) {
-    if (parent.node.properties.length === 1)
-      importPath.findParent(p => p.isVariableDeclaration())?.remove()
-    else importPath.remove()
+    if (parent.node.properties.length === 1) {
+      removeVariableDeclaration(importPath)
+    } else importPath.remove()
   }
   if (importPath.isIdentifier()) {
-    importPath.findParent(p => p.isVariableDeclaration())?.remove()
+    removeVariableDeclaration(importPath)
   }
 }
 
@@ -183,14 +190,21 @@ export default function({ types: t }) {
           // Replace the query with the hash of the query.
           templatePath.replaceWith(t.StringLiteral(queryHash))
 
+          // traverse upwards until we find top-level JSXOpeningElement or Program
+          // this handles exported queries and variable queries
+          let parent = templatePath
+          while (
+            parent &&
+            ![`Program`, `JSXOpeningElement`].includes(parent.node.type)
+          ) {
+            parent = parent.parentPath
+          }
+
           // modify StaticQuery elements and import data only if query is inside StaticQuery
-          templatePath.parentPath.parentPath.parentPath.traverse(
-            nestedJSXVistor,
-            {
-              queryHash,
-              query,
-            }
-          )
+          parent.traverse(nestedJSXVistor, {
+            queryHash,
+            query,
+          })
 
           return null
         }