How can you use data from GraphQL queries in Gatsby layouts? You have data in Gatsby that you want to use inside templates. Is there a layout version of pageQuery?
\n\ntl;dr - Your query variable can be called anything. It must be exported. The query must be named. That name must be unique. Data arrives as
\nprops.data.
pageQuery is not specialEvery Gatsby example I saw called the query pageQuery. I thought that pageQuery was a \"magic\" name. I assumed it only worked in page components. I thought queries only worked in pages. I was wrong.
I dug into the Gatsby code. I ran some experiments. I eventually figured it out. You can call the query anything you want. It can be myQuery, componentQuery, fooBar or anything else.
My next thought was, does it need to be exported? Short answer, yes.
\nI tried removing the export. Gatsby would build, but no data was reaching my components. I wasted a few hours. I added back the export and my data was back. Great.
The export must be like this:
\nexport const queryVariable = graphql`QUERY`\n\nAside. Queries are parsed here. The parser looks for a named export, then a
\ngraphqltag. If you break that pattern, the query won't be found. For example you can't useexports.query = ....
You must give each query a unique name. The query name is not the same as the variable name.
\nexport const queryVariable = graphql`\n query QueryName {...}\n`The variable is called queryVariable but the query is called QueryName. You must ensure that every query has a name.
Every query name must be unique.
\nGatsby checks this during startup. If you make a mistake, it will complain. The error message should explain what you need to fix.
\nNOTE: If you duplicate layouts, remember to change the query name.
\nYou can use queries in templates or page components. They work exactly the same way in both cases. You define your query. Remember to export it. Then the results of the query will arrive at props.data.
You must wrap your query in the graphql template tag like this:
export const myQuery = graphql` query goes here `This uses a javascript feature called tagged template literals. You don't need to understand all the details of how it works. I've read the spec several times and I still don't get it. You just need to do it!
\nimport graphqlYou don't need to import graphql. It must be imported by Gatsby. I'm not sure, I haven't figured it out yet. But the graphql keyword \"just works\", so you can forget about it and move on!
You can put all this together like so.
\nexport const templateQuery = graphql`\n query DefaultTemplate {\n site {\n siteMetadata {\n title\n author\n }\n }\n }\n`Then inside your component's render() function you can do something like this:
<p>Post by {this.props.data.site.siteMetadata.title}</p>