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:
Start building today on Netlify!