How to create custom hooks in Gatsby
Tags: javascript, gatsby
Published: 2021-01-24 00:50:13

---
title: How to create custom hooks in Gatsby
published: true
date: 2021-01-20 00:00:00 UTC
tags: javascript, gatsby
canonical_url: https://www.mariokandut.com/how-to-create-custom-hooks-in-gatsby/
---

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#how-to-use-usestaticquery-hooks)How to use useStaticQuery hooks

Gatsby v.2.1.0 introduced a new feature that provides the ability to use a React Hook to query with GraphQL at build time - **useStaticQuery**.

It allows your **React components** to retrieve data via a **GraphQL query** that will be parsed, evaluated, and injected into the component.

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#basic-example)Basic Example

This example is taken from the official [Gatsby Docs](https://www.gatsbyjs.com/docs/how-to/querying-data/use-static-query/#basic-example). It shows an example of a `Header` component using the `useStaticQuery` hook.

```
import React from 'react';
import { useStaticQuery, graphql } from 'gatsby';
export default function Header() {
  const data = useStaticQuery(graphql`
    query HeaderQuery {
      site {
        siteMetadata {
          title
          siteUrl
          logo
        }
      }
    }
  `);
  return (
    <header>
      <h1>{data.site.siteMetadata.title}</h1>
    </header>
  );
}
```

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#composing-custom-usestaticquery-hooks)Composing custom useStaticQuery hooks

The compelling feature of React hooks is that you can easily compose and re-use wherever you need this specific functionality. This feature is also possible with hooks in Gatsby and you get the ability to compose and re-use these blocks of functionality.`useStaticQuery` is a hook. Hence, we can compose and re-use blocks of functionality. 😎

Let's make a composition from the useSiteMetadata example above.

Create a folder and a file for the hook:

```
md hooks
cd hooks
touch use-site-metadata.js
```

Create the custom hook:

```
import { useStaticQuery, graphql } from 'gatsby';
export const useSiteMetadata = () => {
  const { site } = useStaticQuery(
    graphql`
      query SiteMetaData {
        site {
          siteMetadata {
            title
            siteUrl
            logo
          }
        }
      }
    `,
  );
  return site.siteMetadata;
};
```

Then just import your newly created hook:

```
import React from 'react';
import { useSiteMetadata } from '../hooks/use-site-metadata';
export default function Home() {
  const { title, siteUrl } = useSiteMetadata();
  return <h1>welcome to {title}</h1>;
}
```

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#limitations)Limitations

- useStaticQuery **does not accept variables** (hence the name “static”)
- Only a single instance of useStaticQuery can be used in a file. The reason for that is how queries in Gatsby currently work.

Thanks for reading and if you have any **questions** , use the **comment** function or **send me a message** **[@mariokandut](https://www.twitter.com/mariokandut)**.