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,14 +18,31 @@ const TypekitScript = props => (
   </script>
 )
 
-const Typekit = props => (
+const Typekit = () => (
+  <StaticQuery
+    query={graphql`
+      query TypekitQuery {
+        dataYaml {
+          typekitID
+        }
+      }
+    `}
+    render={data => {
+      const { typekitID } = data.dataYaml
+
+      return (
+        typekitID && (
           <Helmet>
             <link rel="dns-prefetch" href="https://use.typekit.net/" />
             <link rel="dns-prefetch" href="https://p.typekit.net/" />
 
-    {TypekitScript(props)}
+            {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,7 +10,21 @@ class Availability extends PureComponent {
   }
 
   render() {
-    const { availability } = this.props.meta
+    return (
+      <StaticQuery
+        query={graphql`
+          query AvailabilityQuery {
+            dataYaml {
+              availability {
+                status
+                available
+                unavailable
+              }
+            }
+          }
+        `}
+        render={data => {
+          const { availability } = data.dataYaml
           const { status, available, unavailable } = availability
 
           return (
@@ -33,11 +48,13 @@ class Availability extends PureComponent {
               )}
             </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
-          meta={meta}
-          hide={!isHomepage && !meta.availability.status}
-        />
+        <Availability hide={!isHomepage && !meta.availability.status} />
       </header>
     )
   }