React Hooks In Gatsby

Using hooks in react gives so many options.

When creating this blog I wondered if anyone within the gatsby community had already implemented any specific react hooks.

It didn't take long before I found this post on the Gatsby Blog "Introducing useStaticQuery".

Following the blog post & example in the Gatsby docs I soon had a hook for referencing site config variables.

import { useStaticQuery, graphql } from 'gatsby'
/**
 * These hooks are re-usable small queries for components using useStaticQuery.
 *
 * Hooks are a new addition in React 16.8. They let you use state
 * and other React features without writing a class
 *
 * ref: useStaticQuery
 * https://www.gatsbyjs.org/blog/2019-02-20-introducing-use-static-query/
 *
 * ref: React Hooks
 * https://reactjs.org/docs/hooks-intro.html
 *
 */
const useSiteMetadata = () => {
  const { site } = useStaticQuery(
    graphql`
      query SiteMetaData {
        site {
          siteMetadata {
            author {
              name

Referencing the hook in components is then relatively easy.

const { copyright, menu } = useSiteMetadata();

<div className="copyright">{copyright}</div>

Other uses for useStaticQuery include tag lists & menu items.