feat(gatsby): add useStaticQuery hook (#11588)

e2e-tests/development-runtime/cypress/integration/functionality/static-queries.js

@@ -0,0 +1,49 @@
+beforeEach(() => {
+  cy.visit(`/static-query/`).waitForAPIorTimeout(`onRouteUpdate`)
+})
+
+describe(`StaticQuery behavior`, () => {
+  it(`works with inline query`, () => {
+    cy.getTestElement(`inline`)
+      .invoke(`text`)
+      .should(`not.contain`, `Loading`)
+  })
+
+  it(`works with variable query`, () => {
+    cy.getTestElement(`variable`)
+      .invoke(`text`)
+      .should(`not.contain`, `Loading`)
+  })
+
+  it(`works with exported variable query`, () => {
+    cy.getTestElement(`exported`)
+      .invoke(`text`)
+      .should(`not.contain`, `Loading`)
+  })
+
+  describe(`useStaticQuery`, () => {
+    it(`works with inline query`, () => {
+      cy.getTestElement(`use-static-query-inline`)
+        .invoke(`text`)
+        .should(`not.contain`, `Error`)
+    })
+
+    it(`works with variable query`, () => {
+      cy.getTestElement(`use-static-query-variable`)
+        .invoke(`text`)
+        .should(`not.contain`, `Error`)
+    })
+
+    it(`works with exported variable query`, () => {
+      cy.getTestElement(`use-static-query-exported`)
+        .invoke(`text`)
+        .should(`not.contain`, `Error`)
+    })
+
+    it(`works with destructuring`, () => {
+      cy.getTestElement(`use-static-query-destructuring`)
+        .find(`li`)
+        .should(`have.length.gte`, 1)
+    })
+  })
+})

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

@@ -0,0 +1,41 @@
+const author = `@gatsbyjs`
+
+beforeEach(() => {
+  cy.visit(`/static-query/`).waitForAPIorTimeout(`onRouteUpdate`)
+})
+
+describe(`hot-reloading static queries`, () => {
+  it(`displays placeholder content on launch`, () => {
+    cy.getTestElement(`hot`)
+      .invoke(`text`)
+      .should(`not.contain`, author)
+  })
+
+  it(`can update a StaticQuery element`, () => {
+    cy.exec(
+      `npm run update -- --file src/components/static-query/hot.js --replacements "# %AUTHOR%:author" --exact`
+    )
+
+    cy.getTestElement(`hot`)
+      .invoke(`text`)
+      .should(`contain`, author)
+  })
+
+  describe(`useStaticQuery`, () => {
+    it(`displays placeholder content on launch`, () => {
+      cy.getTestElement(`use-static-query-hot`)
+        .invoke(`text`)
+        .should(`not.contain`, author)
+    })
+
+    it(`can update a useStaticQuery element`, () => {
+      cy.exec(
+        `npm run update -- --file src/components/static-query/use-static-query/hot.js --replacements "# %AUTHOR%:author" --exact`
+      )
+
+      cy.getTestElement(`use-static-query-hot`)
+        .invoke(`text`)
+        .should(`contain`, author)
+    })
+  })
+})

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

@@ -3,6 +3,9 @@ module.exports = {
     title: `Gatsby Default Starter`,
     description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
     author: `@gatsbyjs`,
+    social: {
+      twitter: `kylemathews`,
+    },
   },
   plugins: [
     `gatsby-plugin-react-helmet`,

e2e-tests/development-runtime/src/components/seo.js

@@ -40,7 +40,7 @@ function SEO({ description, lang, meta, keywords, title }) {
               },
               {
                 name: `twitter:creator`,
-                content: data.site.siteMetadata.author,
+                content: data.site.siteMetadata.social.twitter,
               },
               {
                 name: `twitter:title`,
@@ -89,7 +89,9 @@ const detailsQuery = graphql`
       siteMetadata {
         title
         description
-        author
+        social {
+          twitter
+        }
       }
     }
   }

e2e-tests/development-runtime/src/components/static-query/exported-variable-query.js

@@ -0,0 +1,23 @@
+import React from "react"
+import { StaticQuery, graphql } from "gatsby"
+
+function ExportedVariable(props) {
+  return (
+    <StaticQuery
+      query={nameQuery}
+      render={data => <p {...props}>{data.site.siteMetadata.author.name}</p>}
+    />
+  )
+}
+
+export const nameQuery = graphql`
+  {
+    site {
+      siteMetadata {
+        author
+      }
+    }
+  }
+`
+
+export default ExportedVariable

e2e-tests/development-runtime/src/components/static-query/hot.js

@@ -0,0 +1,26 @@
+import React from "react"
+import { StaticQuery, graphql } from "gatsby"
+
+function SupaHotFire(props) {
+  return (
+    <StaticQuery
+      query={graphql`
+        query {
+          site {
+            siteMetadata {
+              # %AUTHOR%
+              title
+            }
+          }
+        }
+      `}
+      render={data => (
+        <p {...props}>
+          {data.site.siteMetadata.title}: {data.site.siteMetadata.author}
+        </p>
+      )}
+    />
+  )
+}
+
+export default SupaHotFire

e2e-tests/development-runtime/src/components/static-query/index.js

@@ -0,0 +1,4 @@
+export { default as ExportedVariable } from "./exported-variable-query"
+export { default as Inline } from "./inline-query"
+export { default as Variable } from "./variable-query"
+export { default as Hot } from "./hot"

e2e-tests/development-runtime/src/components/static-query/inline-query.js

@@ -0,0 +1,19 @@
+import React from "react"
+import { StaticQuery, graphql } from "gatsby"
+
+function InlineQuery(props) {
+  return (
+    <StaticQuery
+      query={graphql`
+        query {
+          sitePage(path: { eq: "/static-query/" }) {
+            internalComponentName
+          }
+        }
+      `}
+      render={data => <p {...props}>{data.sitePage.internalComponentName}</p>}
+    />
+  )
+}
+
+export default InlineQuery

e2e-tests/development-runtime/src/components/static-query/use-static-query/destructuring.js

@@ -0,0 +1,37 @@
+import React from "react"
+import { useStaticQuery, graphql } from "gatsby"
+
+function DestructuringQuery(props) {
+  let { allSitePlugin } = useStaticQuery(variableQuery)
+
+  if (!allSitePlugin) return `Error`
+
+  const plugins = allSitePlugin.edges
+    .map(({ node }) => node)
+    .filter(node => !node.pluginFilepath.includes(`gatsby/dist`))
+  return (
+    <ul {...props}>
+      {plugins.map(plugin => (
+        <li key={plugin.name}>
+          {plugin.name}: {plugin.version}
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+const variableQuery = graphql`
+  {
+    allSitePlugin {
+      edges {
+        node {
+          name
+          version
+          pluginFilepath
+        }
+      }
+    }
+  }
+`
+
+export default DestructuringQuery

e2e-tests/development-runtime/src/components/static-query/use-static-query/exported-variable-query.js

@@ -0,0 +1,22 @@
+import React from "react"
+import { useStaticQuery, graphql } from "gatsby"
+
+function ExportedVariableQuery(props) {
+  const data = useStaticQuery(exportedVariableQuery)
+
+  if (data) {
+    return <p {...props}>{data.sitePage.path}</p>
+  }
+
+  return `Error`
+}
+
+export const exportedVariableQuery = graphql`
+  query {
+    sitePage(path: { eq: "/static-query/" }) {
+      path
+    }
+  }
+`
+
+export default ExportedVariableQuery

e2e-tests/development-runtime/src/components/static-query/use-static-query/hot.js

@@ -0,0 +1,27 @@
+import React from "react"
+import { useStaticQuery, graphql } from "gatsby"
+
+function SupaHotFire(props) {
+  const data = useStaticQuery(graphql`
+    {
+      site {
+        siteMetadata {
+          # %AUTHOR%
+          title
+        }
+      }
+    }
+  `)
+
+  if (data) {
+    return (
+      <p {...props}>
+        {data.site.siteMetadata.title}: {data.site.siteMetadata.author}
+      </p>
+    )
+  }
+
+  return `Error`
+}
+
+export default SupaHotFire

e2e-tests/development-runtime/src/components/static-query/use-static-query/index.js

@@ -0,0 +1,5 @@
+export { default as Inline } from "./inline-query"
+export { default as Variable } from "./variable-query"
+export { default as ExportedVariable } from "./exported-variable-query"
+export { default as Destructuring } from "./destructuring"
+export { default as Hot } from "./hot"

e2e-tests/development-runtime/src/components/static-query/use-static-query/inline-query.js

@@ -0,0 +1,21 @@
+import React from "react"
+import { useStaticQuery, graphql } from "gatsby"
+
+function InlineQuery(props) {
+  const data = useStaticQuery(graphql`
+    query {
+      sitePage(path: { eq: "/static-query/" }) {
+        pluginCreator {
+          name
+        }
+      }
+    }
+  `)
+  if (data) {
+    return <p {...props}>{data.sitePage.pluginCreator.name}</p>
+  }
+
+  return `Error`
+}
+
+export default InlineQuery

e2e-tests/development-runtime/src/components/static-query/use-static-query/variable-query.js

@@ -0,0 +1,24 @@
+import React from "react"
+import { useStaticQuery, graphql } from "gatsby"
+
+function VariableQuery(props) {
+  const data = useStaticQuery(variableQuery)
+
+  if (data) {
+    return <p {...props}>{data.sitePage.pluginCreator.version}</p>
+  }
+
+  return `Error`
+}
+
+const variableQuery = graphql`
+  query {
+    sitePage(path: { eq: "/static-query/" }) {
+      pluginCreator {
+        version
+      }
+    }
+  }
+`
+
+export default VariableQuery

e2e-tests/development-runtime/src/components/static-query/variable-query.js

@@ -0,0 +1,28 @@
+import React from "react"
+import { StaticQuery, graphql } from "gatsby"
+
+function Variable(props) {
+  return (
+    <StaticQuery
+      query={reactHelmetPluginQuery}
+      render={data => (
+        <div>
+          <p {...props}>
+            {data.sitePlugin.name}: {data.sitePlugin.version}
+          </p>
+        </div>
+      )}
+    />
+  )
+}
+
+const reactHelmetPluginQuery = graphql`
+  query ReactHelmetPluginQuery {
+    sitePlugin(name: { eq: "gatsby-plugin-react-helmet" }) {
+      name
+      version
+    }
+  }
+`
+
+export default Variable