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.
Video hosted on egghead.io.
Here is an example of a
Header component using
StaticQuery, you can colocate a component with its data. It is no longer required to, say, pass data down from
There’s also a React hooks version of StaticQuery: check out the documentation on
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: