Deep Dive

“The fastest auto dealership site in the world” How relentless optimization 8xed conversions

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.