Querying Data in Components using StaticQuery

Please note: As of Gatsby 5 the <StaticQuery /> component is deprecated. Use the useStaticQuery hook instead. <StaticQuery /> will be removed in Gatsby 6.

How to use StaticQuery in components

Video hosted on egghead.io.

Basic example

Here is an example of a Header component using StaticQuery:

By using StaticQuery, you can colocate a component with its data. It is no longer required to, say, pass data down from Layout to Header.

useStaticQuery

There’s also a React hooks version of StaticQuery: check out the documentation on useStaticQuery

Typechecking

With the above pattern, you lose the ability to typecheck with PropTypes. To regain typechecking while achieving the same result, you can change the component to: