gatsby logo react logo

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
 * ref: React Hooks
const useSiteMetadata = () => {
  const { site } = useStaticQuery(
      query SiteMetaData {
        site {
          siteMetadata {
            author {

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.