isolate some graphql queries

src/components/Layout.jsx

@@ -61,12 +61,9 @@ const TemplateWrapper = ({ children, location }) => {
             }
             availability {
               status
-              available
-              unavailable
             }
             gpg
             addressbook
-            typekitID
           }
 
           # the package.json file

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>

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 => (
+const Typekit = () => (
-  <Helmet>
+  <StaticQuery
-    <link rel="dns-prefetch" href="https://use.typekit.net/" />
+    query={graphql`
-    <link rel="dns-prefetch" href="https://p.typekit.net/" />
+      query TypekitQuery {
+        dataYaml {
+          typekitID
+        }
+      }
+    `}
+    render={data => {
+      const { typekitID } = data.dataYaml
 
-    {TypekitScript(props)}
+      return (
-  </Helmet>
+        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

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>
+      <StaticQuery
-        {!this.props.hide && (
+        query={graphql`
-          <MoveIn>
+          query AvailabilityQuery {
-            <aside
+            dataYaml {
-              className={
+              availability {
                 status
-                  ? `${styles.availability} ${styles.available}`
+                available
-                  : `${styles.availability} ${styles.unavailable}`
+                unavailable
               }
-            >
+            }
-              <p
+          }
-                dangerouslySetInnerHTML={{
+        `}
-                  __html: status ? available : unavailable
+        render={data => {
-                }}
+          const { availability } = data.dataYaml
-              />
+          const { status, available, unavailable } = availability
-            </aside>
+
-          </MoveIn>
+          return (
-        )}
+            <Fragment>
-      </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
 }
 

src/components/organisms/Header.jsx

@@ -46,10 +46,7 @@ class Header extends PureComponent {
 
         <Networks meta={meta} hide={!isHomepage} />
 
-        <Availability
+        <Availability hide={!isHomepage && !meta.availability.status} />
-          meta={meta}
-          hide={!isHomepage && !meta.availability.status}
-        />
       </header>
     )
   }