From f88f01d285e231c3ee82354c6a52573ea8cb88e0 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 21 Jun 2018 22:32:56 +0200
Subject: [PATCH] isolate some graphql queries

---
 src/components/Layout.jsx                 |  3 --
 src/components/atoms/Head.jsx             |  4 +-
 src/components/atoms/Typekit.js           | 34 ++++++++++---
 src/components/molecules/Availability.jsx | 59 +++++++++++++++--------
 src/components/organisms/Header.jsx       |  5 +-
 5 files changed, 67 insertions(+), 38 deletions(-)

diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx
index 9275875..21b6078 100644
--- a/src/components/Layout.jsx
+++ b/src/components/Layout.jsx
@@ -61,12 +61,9 @@ const TemplateWrapper = ({ children, location }) => {
             }
             availability {
               status
-              available
-              unavailable
             }
             gpg
             addressbook
-            typekitID
           }
 
           # the package.json file
diff --git a/src/components/atoms/Head.jsx b/src/components/atoms/Head.jsx
index 13ddad9..517f9c6 100644
--- a/src/components/atoms/Head.jsx
+++ b/src/components/atoms/Head.jsx
@@ -5,7 +5,7 @@ import SEO from './SEO'
 import Typekit from './Typekit'
 
 const Head = ({ meta }) => {
-  const { title, tagline, typekitID } = meta
+  const { title, tagline } = meta
 
   return (
     <Fragment>
@@ -16,7 +16,7 @@ const Head = ({ meta }) => {
         <meta name="apple-mobile-web-app-title" content={title.toLowerCase()} />
       </Helmet>
 
-      {typekitID && <Typekit id={typekitID} />}
+      <Typekit />
 
       <SEO meta={meta} />
     </Fragment>
diff --git a/src/components/atoms/Typekit.js b/src/components/atoms/Typekit.js
index a0b5d70..9d4c691 100644
--- a/src/components/atoms/Typekit.js
+++ b/src/components/atoms/Typekit.js
@@ -1,13 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { StaticQuery, graphql } from 'gatsby'
 import Helmet from 'react-helmet'
 
-const TypekitScript = props => (
+const TypekitScript = typekitID => (
   <script>
     {`
         (function(d) {
             var config = {
-                kitId: '${props.id}',
+                kitId: '${typekitID}',
                 scriptTimeout: 3000,
                 async: true
             },
@@ -17,13 +18,30 @@ const TypekitScript = props => (
   </script>
 )
 
-const Typekit = props => (
-  <Helmet>
-    <link rel="dns-prefetch" href="https://use.typekit.net/" />
-    <link rel="dns-prefetch" href="https://p.typekit.net/" />
+const Typekit = () => (
+  <StaticQuery
+    query={graphql`
+      query TypekitQuery {
+        dataYaml {
+          typekitID
+        }
+      }
+    `}
+    render={data => {
+      const { typekitID } = data.dataYaml
 
-    {TypekitScript(props)}
-  </Helmet>
+      return (
+        typekitID && (
+          <Helmet>
+            <link rel="dns-prefetch" href="https://use.typekit.net/" />
+            <link rel="dns-prefetch" href="https://p.typekit.net/" />
+
+            {TypekitScript(typekitID)}
+          </Helmet>
+        )
+      )
+    }}
+  />
 )
 
 export default Typekit
diff --git a/src/components/molecules/Availability.jsx b/src/components/molecules/Availability.jsx
index e71b367..d5f3e75 100644
--- a/src/components/molecules/Availability.jsx
+++ b/src/components/molecules/Availability.jsx
@@ -1,5 +1,6 @@
 import React, { Fragment, PureComponent } from 'react'
 import PropTypes from 'prop-types'
+import { StaticQuery, graphql } from 'gatsby'
 import { MoveIn } from '../atoms/Animations'
 import styles from './Availability.module.scss'
 
@@ -9,35 +10,51 @@ class Availability extends PureComponent {
   }
 
   render() {
-    const { availability } = this.props.meta
-    const { status, available, unavailable } = availability
-
     return (
-      <Fragment>
-        {!this.props.hide && (
-          <MoveIn>
-            <aside
-              className={
+      <StaticQuery
+        query={graphql`
+          query AvailabilityQuery {
+            dataYaml {
+              availability {
                 status
-                  ? `${styles.availability} ${styles.available}`
-                  : `${styles.availability} ${styles.unavailable}`
+                available
+                unavailable
               }
-            >
-              <p
-                dangerouslySetInnerHTML={{
-                  __html: status ? available : unavailable
-                }}
-              />
-            </aside>
-          </MoveIn>
-        )}
-      </Fragment>
+            }
+          }
+        `}
+        render={data => {
+          const { availability } = data.dataYaml
+          const { status, available, unavailable } = availability
+
+          return (
+            <Fragment>
+              {!this.props.hide && (
+                <MoveIn>
+                  <aside
+                    className={
+                      status
+                        ? `${styles.availability} ${styles.available}`
+                        : `${styles.availability} ${styles.unavailable}`
+                    }
+                  >
+                    <p
+                      dangerouslySetInnerHTML={{
+                        __html: status ? available : unavailable
+                      }}
+                    />
+                  </aside>
+                </MoveIn>
+              )}
+            </Fragment>
+          )
+        }}
+      />
     )
   }
 }
 
 Availability.propTypes = {
-  meta: PropTypes.object,
   hide: PropTypes.bool
 }
 
diff --git a/src/components/organisms/Header.jsx b/src/components/organisms/Header.jsx
index 361820b..4c718f3 100644
--- a/src/components/organisms/Header.jsx
+++ b/src/components/organisms/Header.jsx
@@ -46,10 +46,7 @@ class Header extends PureComponent {
 
         <Networks meta={meta} hide={!isHomepage} />
 
-        <Availability
-          meta={meta}
-          hide={!isHomepage && !meta.availability.status}
-        />
+        <Availability hide={!isHomepage && !meta.availability.status} />
       </header>
     )
   }