New Launch

Take a deep dive into the fastest Gatsby, yet: Gatsby 5!

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

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.


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


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:

Edit this page on GitHub
© 2022 Gatsby, Inc.