graphql query cleanup

src/components/Layout.jsx

@@ -1,27 +1,19 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import posed, { PoseGroup } from 'react-pose'
-import { graphql, useStaticQuery } from 'gatsby'
 import { fadeIn } from './atoms/Transitions'
 import Typekit from './atoms/Typekit'
 import HostnameCheck from './atoms/HostnameCheck'
 import Header from './organisms/Header'
 import Footer from './organisms/Footer'
 import styles from './Layout.module.scss'
+import { useMeta } from '../hooks/use-meta'
 
 // if (process.env.NODE_ENV !== 'production') {
 //   const { whyDidYouUpdate } = require('why-did-you-update')
 //   whyDidYouUpdate(React)
 // }
 
-const query = graphql`
-  query {
-    metaYaml {
-      allowedHosts
-    }
-  }
-`
-
 Layout.propTypes = {
   children: PropTypes.any.isRequired,
   location: PropTypes.shape({
@@ -30,7 +22,7 @@ Layout.propTypes = {
 }
 
 export default function Layout({ children, location }) {
-  const { metaYaml } = useStaticQuery(query)
+  const { allowedHosts } = useMeta()
   const timeout = 200
   const RoutesContainer = posed.div(fadeIn)
   const isHomepage =
@@ -40,7 +32,7 @@ export default function Layout({ children, location }) {
   return (
     <>
       <Typekit />
-      <HostnameCheck allowedHosts={metaYaml.allowedHosts} />
+      <HostnameCheck allowedHosts={allowedHosts} />
 
       <PoseGroup animateOnMount={true}>
         <RoutesContainer

src/components/atoms/SEO.jsx

@@ -1,33 +1,9 @@
-import React, { PureComponent } from 'react'
+import React from 'react'
 import Helmet from 'react-helmet'
 import PropTypes from 'prop-types'
-import { StaticQuery, graphql } from 'gatsby'
+import { useMeta } from '../../hooks/use-meta'
 
-const query = graphql`
-  query {
-    metaYaml {
-      title
-      tagline
-      description
-      url
-      img {
-        childImageSharp {
-          resize(width: 980) {
-            src
-          }
-        }
-      }
-      social {
-        Twitter
-      }
-      gpg
-      addressbook
-    }
-  }
-`
-
-const MetaTags = ({ title, description, url, image, meta }) => {
-  return (
+const MetaTags = ({ title, description, url, image, meta }) => (
   <Helmet
     defaultTitle={`${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`}
     titleTemplate={`%s // ${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`}
@@ -53,8 +29,7 @@ const MetaTags = ({ title, description, url, image, meta }) => {
     <meta name="twitter:description" content={description} />
     <meta name="twitter:image" content={`${meta.url}${image}`} />
   </Helmet>
-  )
-}
+)
 
 MetaTags.propTypes = {
   title: PropTypes.string,
@@ -64,21 +39,14 @@ MetaTags.propTypes = {
   meta: PropTypes.object
 }
 
-export default class SEO extends PureComponent {
-  static propTypes = {
+SEO.propTypes = {
   project: PropTypes.object
-  }
+}
 
-  render() {
-    return (
-      <StaticQuery
-        query={query}
-        render={data => {
-          const { project } = this.props
-          const meta = data.metaYaml
+export default function SEO({ project }) {
+  const meta = useMeta()
   const title = (project && project.title) || null
-          const description =
-            (project && project.fields.excerpt) || meta.description
+  const description = (project && project.fields.excerpt) || meta.description
   const image =
     (project && project.img.childImageSharp.twitterImage.src) ||
     meta.img.childImageSharp.resize.src
@@ -93,8 +61,4 @@ export default class SEO extends PureComponent {
       meta={meta}
     />
   )
-        }}
-      />
-    )
-  }
 }

src/components/atoms/Typekit.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { StaticQuery, graphql } from 'gatsby'
 import Helmet from 'react-helmet'
+import { useMeta } from '../../hooks/use-meta'
 
 const TypekitScript = typekitID => (
   <script>
@@ -17,22 +17,10 @@ const TypekitScript = typekitID => (
   </script>
 )
 
-const query = graphql`
-  query {
-    metaYaml {
-      typekitID
-    }
-  }
-`
+const Typekit = () => {
+  const { typekitID } = useMeta()
 
-const Typekit = () => (
-  <StaticQuery
-    query={query}
-    render={data => {
-      const { typekitID } = data.metaYaml
-
-      return (
-        typekitID && (
+  return typekitID ? (
     <Helmet>
       <link rel="preconnect" href="https://typekit.com" />
       <link rel="preconnect" href="https://use.typekit.net" />
@@ -40,10 +28,7 @@ const Typekit = () => (
 
       {TypekitScript(typekitID)}
     </Helmet>
-        )
-      )
-    }}
-  />
-)
+  ) : null
+}
 
 export default Typekit

src/components/atoms/Vcard.jsx

@@ -1,38 +1,10 @@
 import React from 'react'
-import { graphql, useStaticQuery } from 'gatsby'
 import saveAs from 'file-saver'
 import vCard from 'vcf'
-
-const query = graphql`
-  query {
-    metaYaml {
-      title
-      tagline
-      description
-      url
-      email
-      avatar {
-        childImageSharp {
-          resize {
-            src
-          }
-        }
-      }
-      social {
-        Email
-        Blog
-        Twitter
-        GitHub
-        Dribbble
-      }
-      gpg
-      addressbook
-    }
-  }
-`
+import { useMeta } from '../../hooks/use-meta'
 
 export default function Vcard() {
-  const { metaYaml } = useStaticQuery(query)
+  const metaYaml = useMeta()
 
   const handleAddressbookClick = e => {
     e.preventDefault()

src/components/molecules/LogoUnit.jsx

@@ -1,27 +1,18 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Link, graphql, useStaticQuery } from 'gatsby'
+import { Link } from 'gatsby'
 import posed from 'react-pose'
+import { useMeta } from '../../hooks/use-meta'
 import { moveInBottom } from '../atoms/Transitions'
 import { ReactComponent as Logo } from '../../images/logo.svg'
 import styles from './LogoUnit.module.scss'
 
-const query = graphql`
-  query {
-    metaYaml {
-      title
-      tagline
-    }
-  }
-`
-
 LogoUnit.propTypes = {
   minimal: PropTypes.bool
 }
 
 export default function LogoUnit({ minimal }) {
-  const data = useStaticQuery(query)
-  const { title, tagline } = data.metaYaml
+  const { title, tagline } = useMeta()
   const Animation = posed.div(moveInBottom)
 
   return (

src/components/organisms/Footer.jsx

@@ -5,6 +5,7 @@ import Vcard from '../atoms/Vcard'
 import LogoUnit from '../molecules/LogoUnit'
 import Networks from '../molecules/Networks'
 import styles from './Footer.module.scss'
+import { useMeta } from '../../hooks/use-meta'
 
 const query = graphql`
   query {
@@ -12,12 +13,6 @@ const query = graphql`
     portfolioJson {
       bugs
     }
-
-    metaYaml {
-      title
-      url
-      gpg
-    }
   }
 `
 
@@ -52,7 +47,8 @@ FooterMarkup.propTypes = {
 }
 
 export default function Footer() {
-  const { metaYaml, portfolioJson } = useStaticQuery(query)
+  const metaYaml = useMeta()
+  const { portfolioJson } = useStaticQuery(query)
   const year = new Date().getFullYear()
 
   return <FooterMarkup year={year} pkg={portfolioJson} meta={metaYaml} />

src/components/organisms/Header.jsx

@@ -1,35 +1,25 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { graphql, useStaticQuery } from 'gatsby'
 import Networks from '../molecules/Networks'
 import Availability from '../molecules/Availability'
 import ThemeSwitch from '../molecules/ThemeSwitch'
 import LogoUnit from '../molecules/LogoUnit'
 import styles from './Header.module.scss'
-
-const query = graphql`
-  query {
-    metaYaml {
-      availability {
-        status
-      }
-    }
-  }
-`
+import { useMeta } from '../../hooks/use-meta'
 
 Header.propTypes = {
   minimal: PropTypes.bool
 }
 
 export default function Header({ minimal }) {
-  const { metaYaml } = useStaticQuery(query)
+  const { availability } = useMeta()
 
   return (
     <header className={minimal ? styles.minimal : styles.header}>
       <ThemeSwitch />
       <LogoUnit minimal={minimal} />
       <Networks hide={minimal} />
-      <Availability hide={minimal && !metaYaml.availability.status} />
+      <Availability hide={minimal && !availability.status} />
     </header>
   )
 }

src/hooks/use-meta.js

@@ -8,6 +8,20 @@ const query = graphql`
       description
       url
       email
+      img {
+        childImageSharp {
+          resize(width: 980) {
+            src
+          }
+        }
+      }
+      avatar {
+        childImageSharp {
+          resize {
+            src
+          }
+        }
+      }
       social {
         Email
         Blog

src/pages/__tests__/index.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import { StaticQuery } from 'gatsby'
+import { StaticQuery, useStaticQuery } from 'gatsby'
 import Home from '../index'
 import meta from '../../../jest/__fixtures__/meta.json'
 import projects from '../../../jest/__fixtures__/projects.json'
@@ -8,6 +8,9 @@ import projectImageFiles from '../../../jest/__fixtures__/projectImageFiles.json
 
 beforeEach(() => {
   StaticQuery.mockImplementation(({ render }) => render({ ...meta }))
+  useStaticQuery.mockImplementation(() => {
+    return { ...meta }
+  })
 })
 
 describe('Home', () => {