{"data":{"markdownRemark":{"html":"

Part of a series on Gatsby v2

\n

You're ready to upgrade to Gatsby v2. You've read that layouts have disappeared. What do you replace them with?

\n
\n

tl;dr - No more \"special\" layouts, just use normal React components.

\n
\n

In Gatsby v1, layouts were treated specially. They could use GraphQL queries. They were given a special children prop which was a function. Whacky but true. None of this is necessary in Gatsby v2.

\n

What is a layout?

\n

A layout is more conceptual than anything. Typically, a layout might contain the structure of your site. For example, a component which loads the header, sidebar, and main body of the page.

\n

You can do this with a standard, totally normal React component. A very simple example might look like:

\n
const Layout = (props) => {\n  return (\n    <Container>\n      <Header />\n      <PageBody>\n        <Content>\n          {props.children}\n        </Content>\n        <Sidebar />\n      </PageBody>\n    </Container>\n  );\n};
\n

This does not require any special magic. You use it very simply like so:

\n
const Page = (props) => {\n  return (\n    <Layout>\n      ...\n    </Layout>\n  )\n};
\n

It's just regular React.

\n

Static data

\n

In Gatsby v1 you could inject data into layouts with GraphQL. In Gatsby v2 you can inject data into any React component via StaticQuery. Read all about StaticQuery here.

\n

Dynamic data

\n

If you want to inject data based on the current page, that is also possible. That data can only be fetched in the page specific GraphQL query. Then you pass it into the layout just like any other component.

\n

A simple example:

\n
const Page = (props) => {\n  return (\n    <Layout pageTitle={props.data.post.title}>\n      ...\n    </Layout>\n  )\n}
\n

With this approach you can pass data as far down your components as you want to. Given that Gatsby v2 has updated to React v16, you can also use the new context API. This can be a helpful way of passing data down to deeply nested components.

\n

Layouts

\n

Hopefully this article explains how layouts work in Gatsby v2. Any questions, hit us up in the comments.

","excerpt":"Part of a series on Gatsby v2 You're ready to upgrade to Gatsby v2. You've read that layouts have disappeared. What do you replace them…","timeToRead":2,"frontmatter":{"date":"July 19, 2018","path":"/how-do-layouts-work-in-gatsby-v2","title":"How do layouts work in Gatsby v2"}},"relatedPosts":{"edges":[{"node":{"id":"88e68246-cc05-58c4-9cb0-9fa48bc65259","frontmatter":{"title":"Gatsby v2 refactoring cheat sheet","path":"/gatsby-v2-refactoring-cheat-sheet","tags":["v2","cheat sheet"]}}},{"node":{"id":"1aef1790-d364-5a28-ade8-d6196727902c","frontmatter":{"title":"Getting started with Gatsby v2","path":"/getting-started-with-gatsby-v2","tags":["v2"]}}},{"node":{"id":"c8ef7f7d-dffc-5aae-b6a0-0084762b39f0","frontmatter":{"title":"Gatsby v2","path":"/gatsby-v2","tags":["v2","beta"]}}},{"node":{"id":"53048efa-8e60-5988-8f54-73bf441a1ab2","frontmatter":{"title":"Should I rebuild my site for Gatsby v2?","path":"/should-i-rebuild-my-site-for-gatsby-v2","tags":["v2"]}}},{"node":{"id":"36c6d2e1-eff2-5062-aee4-518ccb6f4ea8","frontmatter":{"title":"StaticQuery in Gatsby v2","path":"/staticquery-in-gatsby-v2","tags":["v2"]}}},{"node":{"id":"3a89bcb1-591a-5b78-bb39-6a8488d0ce69","frontmatter":{"title":"What's new in Gatsby v2","path":"/whats-new-in-gatsby-v2","tags":["v2","beta"]}}},{"node":{"id":"9a16f7fc-6fa5-5328-816c-35542c1c38ec","frontmatter":{"title":"When should I upgrade to Gatsby v2?","path":"/when-should-i-upgrade-to-gatsby-v2","tags":["v2"]}}},{"node":{"id":"979a29c5-06ed-5582-b0be-4c37f26b65d4","frontmatter":{"title":"Enable absolute imports for Gatsby v2","path":"/enable-absolute-imports-for-gatsby-v2","tags":["v2"]}}},{"node":{"id":"5eb98a7e-3fd2-5edf-a9f8-44f5e25da39d","frontmatter":{"title":"GatsbyJS source plugin for eventbrite.com","path":"/gatsby-source-eventbrite","tags":["v2","source","eventbrite"]}}},{"node":{"id":"374bf18f-0f86-54c8-bdb1-f051527d8210","frontmatter":{"title":"WordPress starter for GatsbyJS","path":"/gatsby-starter-wordpress","tags":["v2","starter","wordpress"]}}},{"node":{"id":"737d2352-faae-5e91-b298-07399aaf3b1c","frontmatter":{"title":"Starter project for GatsbyJS","path":"/gatsby-central-starter","tags":["v2","starter"]}}}]},"allCommentsJson":null,"allRatingsJson":{"totalCount":2,"edges":[{"node":{"id":"a1d2c406-1ba6-569a-a41a-bed80e476fee","rating":"5"}},{"node":{"id":"b38498e7-bbd5-528b-9f4e-f2d767da2703","rating":"1"}}]}},"pageContext":{"tags":["v2"]}}