Part of a series on Gatsby v2
\nYou've heard about StaticQuery as part of Gatsby v2. GraphQL everywhere. Sounds great, but how does it work?
\n\ntl;dr - Wrap any component in
\nStaticQueryand pass two propsqueryandrender. These queries do not get any data about the current page, they're static for the entire build.
StaticQuery?In Gatsby v1 there was only 2 places you could use GraphQL. Layouts and pages. Layouts have disappeared in Gatsby v2. Pages still use GraphQL.
\nImagine you want to pass the title from you gatsby-config.js file into a component. In Gatsby v1 you would have to get that data via the layout or the page. With StaticQuery, you can get that data anywhere.
Or put another way, StaticQuery lets you write GraphQL queries which are parsed once during the build process. Think of it like this:
StaticQuery instances are parsed, their queries run, and the data bound to their componentsStaticQuery?Short answer, anywhere. You just import and it works. A few examples where StaticQuery would be useful:
Enough theory, time to dive into some code. Here's the example from the StaticQuery docs:
import React from \"react\"\nimport { StaticQuery, graphql } from \"gatsby\"\n\nconst Header = () => (\n <StaticQuery\n query={graphql`\n query {\n site {\n siteMetadata {\n title\n }\n }\n }\n `}\n render={data => (\n <header>\n <h1>{data.site.siteMetadata.title}</h1>\n </header>\n )}\n />\n)\n\nexport default HeaderLet's unpack that a bit.
\nStaticQuery from gatsby. It's a named export.<StaticQuery just like any other React componentquery and renderThe query prop takes a graphql template string
graphql must be imported from gatsby in Gatsby v2The render prop takes a function
datadata argument is filled with the result of the GraphQL queryh1 tag containing data.site.siteMetadata.title\n\nNOTE: The
\ndataargument passed to therenderfunction is notprops, it is only the data. It's more likeprops.data, and it should not be destructured like({ data }) => ....
If you haven't seen it before, the siteMetadata object is filled from gatsby-config.js. It's a convenient way to pass config values into your Gatsby site without hard coding them.