graphql query cleanup

2024-12-22 17:23:22 +01:00 · 2019-11-11 21:46:14 +01:00 · 2019-11-11 21:46:14 +01:00 · d9fa36608e
commit d9fa36608e
parent 3ff8e67fac
9 changed files with 92 additions and 185 deletions
--- a/src/components/Layout.jsx
+++ b/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
--- a/src/components/atoms/SEO.jsx
+++ b/src/components/atoms/SEO.jsx
@ -1,60 +1,35 @@
-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 }) => (
+  <Helmet
+    defaultTitle={`${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`}
+    titleTemplate={`%s // ${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`}
+    title={title}
+  >
+    <html lang="en" />

-const MetaTags = ({ title, description, url, image, meta }) => {
-  return (
-    <Helmet
-      defaultTitle={`${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`}
-      titleTemplate={`%s // ${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`}
-      title={title}
-    >
-      <html lang="en" />
+    {/* General tags */}
+    <meta name="description" content={description} />
+    <meta name="image" content={`${meta.url}${image}`} />
+    <link rel="canonical" href={url} />

-      {/* General tags */}
-      <meta name="description" content={description} />
-      <meta name="image" content={`${meta.url}${image}`} />
-      <link rel="canonical" href={url} />
+    {/* OpenGraph tags */}
+    <meta property="og:url" content={url} />
+    <meta property="og:title" content={title} />
+    <meta property="og:description" content={description} />
+    <meta property="og:image" content={`${meta.url}${image}`} />

-      {/* OpenGraph tags */}
-      <meta property="og:url" content={url} />
-      <meta property="og:title" content={title} />
-      <meta property="og:description" content={description} />
-      <meta property="og:image" content={`${meta.url}${image}`} />
-
-      {/* Twitter Card tags */}
-      <meta name="twitter:card" content="summary_large_image" />
-      <meta name="twitter:creator" content={meta.social.Twitter} />
-      <meta name="twitter:title" content={title} />
-      <meta name="twitter:description" content={description} />
-      <meta name="twitter:image" content={`${meta.url}${image}`} />
-    </Helmet>
-  )
-}
+    {/* Twitter Card tags */}
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:creator" content={meta.social.Twitter} />
+    <meta name="twitter:title" content={title} />
+    <meta name="twitter:description" content={description} />
+    <meta name="twitter:image" content={`${meta.url}${image}`} />
+  </Helmet>
+)

 MetaTags.propTypes = {
  title: PropTypes.string,
@ -64,37 +39,26 @@ MetaTags.propTypes = {
  meta: PropTypes.object
 }

-export default class SEO extends PureComponent {
-  static propTypes = {
-    project: PropTypes.object
-  }
-
-  render() {
-    return (
-      <StaticQuery
-        query={query}
-        render={data => {
-          const { project } = this.props
-          const meta = data.metaYaml
-          const title = (project && project.title) || null
-          const description =
-            (project && project.fields.excerpt) || meta.description
-          const image =
-            (project && project.img.childImageSharp.twitterImage.src) ||
-            meta.img.childImageSharp.resize.src
-          const url = (project && `${meta.url}${project.slug}`) || meta.url
-
-          return (
-            <MetaTags
-              title={title}
-              description={description}
-              url={url}
-              image={image}
-              meta={meta}
-            />
-          )
-        }}
-      />
-    )
-  }
+SEO.propTypes = {
+  project: PropTypes.object
+}
+
+export default function SEO({ project }) {
+  const meta = useMeta()
+  const title = (project && project.title) || null
+  const description = (project && project.fields.excerpt) || meta.description
+  const image =
+    (project && project.img.childImageSharp.twitterImage.src) ||
+    meta.img.childImageSharp.resize.src
+  const url = (project && `${meta.url}${project.slug}`) || meta.url
+
+  return (
+    <MetaTags
+      title={title}
+      description={description}
+      url={url}
+      image={image}
+      meta={meta}
+    />
+  )
 }
--- a/src/components/atoms/Typekit.jsx
+++ b/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,33 +17,18 @@ 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 ? (
+    <Helmet>
+      <link rel="preconnect" href="https://typekit.com" />
+      <link rel="preconnect" href="https://use.typekit.net" />
+      <link rel="preconnect" href="https://p.typekit.net" />

-      return (
-        typekitID && (
-          <Helmet>
-            <link rel="preconnect" href="https://typekit.com" />
-            <link rel="preconnect" href="https://use.typekit.net" />
-            <link rel="preconnect" href="https://p.typekit.net" />
-
-            {TypekitScript(typekitID)}
-          </Helmet>
-        )
-      )
-    }}
-  />
-)
+      {TypekitScript(typekitID)}
+    </Helmet>
+  ) : null
+}

 export default Typekit
--- a/src/components/atoms/Vcard.jsx
+++ b/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()
--- a/src/components/molecules/LogoUnit.jsx
+++ b/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 (
--- a/src/components/organisms/Footer.jsx
+++ b/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} />
--- a/src/components/organisms/Header.jsx
+++ b/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>
  )
 }
--- a/src/hooks/use-meta.js
+++ b/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
--- a/src/pages/tests/index.test.jsx
+++ b/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', () => {