Moving query for siteMetadata to Layout

src/components/Footer/index.js

@@ -1,20 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { StaticQuery, graphql } from 'gatsby';
 import { withNamespaces, Trans } from 'react-i18next';
 
 import style from './style.module.css';
 
-const query = graphql`
-  query FooterQuery {
-    site {
-      siteMetadata {
-        buildId
-      }
-    }
-  }
-`;
-
 export const Footer = ({ t, buildId }) => (
   <footer className={ style.footer }>
     <ul className={ style.list }>
@@ -43,8 +32,4 @@ Footer.propTypes = {
   buildId: PropTypes.string.isRequired
 };
 
-export default withNamespaces()(props => (
+export default withNamespaces()(Footer);
-  <StaticQuery query={ query } render={ ({ site: { siteMetadata } }) => (
-    <Footer { ...props } { ...siteMetadata } />
-  ) } />
-));

src/components/Header/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link, StaticQuery, graphql } from 'gatsby';
+import { Link } from 'gatsby';
 import { withNamespaces, Trans } from 'react-i18next';
 
 import GitlabIcon from 'react-feather/dist/icons/gitlab';
@@ -9,16 +9,6 @@ import LocaleSwitcher from 'components/LocaleSwitcher';
 
 import style from './style.module.css';
 
-const query = graphql`
-  query HeaderQuery {
-    site {
-      siteMetadata {
-        banner
-      }
-    }
-  }
-`;
-
 export const Header = ({ banner }) => (
   <header
     className={ style.header }
@@ -55,8 +45,4 @@ Header.propTypes = {
   ]).isRequired
 };
 
-export default withNamespaces()(props => (
+export default withNamespaces()(Header);
-  <StaticQuery query={ query } render={ ({ site: { siteMetadata } }) => (
-    <Header { ...props } { ...siteMetadata } />
-  ) } />
-));

src/components/Layout/__snapshots__/test.js.snap

@@ -3,7 +3,10 @@
 exports[`Layout rendering 1`] = `
 ShallowWrapper {
   Symbol(enzyme.__root__): [Circular],
-  Symbol(enzyme.__unrendered__): <Layout>
+  Symbol(enzyme.__unrendered__): <Layout
+    banner="Test Banner"
+    buildId="test-buildid"
+  >
     Example content
   </Layout>,
   Symbol(enzyme.__renderer__): Object {
@@ -20,11 +23,15 @@ ShallowWrapper {
     "nodeType": "class",
     "props": Object {
       "children": Array [
-        <LoadNamespace(Component) />,
+        <LoadNamespace(Header)
+          banner="Test Banner"
+        />,
         <SentryBoundary>
           Example content
         </SentryBoundary>,
-        <LoadNamespace(Component) />,
+        <LoadNamespace(Footer)
+          buildId="test-buildid"
+        />,
       ],
     },
     "ref": null,
@@ -33,7 +40,9 @@ ShallowWrapper {
         "instance": null,
         "key": undefined,
         "nodeType": "class",
-        "props": Object {},
+        "props": Object {
+          "banner": "Test Banner",
+        },
         "ref": null,
         "rendered": null,
         "type": [Function],
@@ -53,7 +62,9 @@ ShallowWrapper {
         "instance": null,
         "key": undefined,
         "nodeType": "class",
-        "props": Object {},
+        "props": Object {
+          "buildId": "test-buildid",
+        },
         "ref": null,
         "rendered": null,
         "type": [Function],
@@ -68,11 +79,15 @@ ShallowWrapper {
       "nodeType": "class",
       "props": Object {
         "children": Array [
-          <LoadNamespace(Component) />,
+          <LoadNamespace(Header)
+            banner="Test Banner"
+          />,
           <SentryBoundary>
             Example content
           </SentryBoundary>,
-          <LoadNamespace(Component) />,
+          <LoadNamespace(Footer)
+            buildId="test-buildid"
+          />,
         ],
       },
       "ref": null,
@@ -81,7 +96,9 @@ ShallowWrapper {
           "instance": null,
           "key": undefined,
           "nodeType": "class",
-          "props": Object {},
+          "props": Object {
+            "banner": "Test Banner",
+          },
           "ref": null,
           "rendered": null,
           "type": [Function],
@@ -101,7 +118,9 @@ ShallowWrapper {
           "instance": null,
           "key": undefined,
           "nodeType": "class",
-          "props": Object {},
+          "props": Object {
+            "buildId": "test-buildid",
+          },
           "ref": null,
           "rendered": null,
           "type": [Function],

src/components/Layout/index.js

@@ -1,23 +1,45 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { graphql, StaticQuery } from 'gatsby';
 
 import SentryBoundary from 'components/SentryBoundary';
 import Header from 'components/Header';
 import Footer from 'components/Footer';
 
-const Layout = ({ children }) => <SentryBoundary>
+const query = graphql`
-  <Header />
+  query LayoutQuery {
+    site {
+      siteMetadata {
+        banner
+        buildId
+      }
+    }
+  }
+`;
+
+export const Layout = ({ banner, buildId, children }) => <SentryBoundary>
+  <Header banner={ banner } />
   <SentryBoundary>
     { children }
   </SentryBoundary>
-  <Footer />
+  <Footer buildId={ buildId } />
 </SentryBoundary>;
 
 Layout.propTypes = {
+  banner: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.string
+  ]).isRequired,
+  buildId: PropTypes.string.isRequired,
   children: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.node),
     PropTypes.node
   ]).isRequired
 };
 
-export default Layout;
+// eslint-disable-next-line react/display-name
+export default props => (
+  <StaticQuery query={ query } render={ ({ site: { siteMetadata } }) => (
+    <Layout { ...props } { ...siteMetadata } />
+  ) } />
+);

src/components/Layout/test.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import Layout from 'components/Layout';
+import { Layout } from 'components/Layout';
 
 describe('Layout', () => {
   test('rendering', () => {
     const component = shallow(
-      <Layout>
+      <Layout banner="Test Banner" buildId="test-buildid">
         Example content
       </Layout>
     );