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

Part of a series on Gatsby v2

\n

You're familiar with Gatsby. You realise there's much awesomeness in v2. You want some of that now. You need it now.

\n
\n

tl;dr - Install react, react-dom, gatsby@next and probably react-helmet.

\n
\n

What's in v2?

\n

Why is v2 awesome? A handful of reasons. You can check out the v2 project for a good overview. A few of our personal highlights include:

\n\n

Better data loading

\n

You've read about why Gatsby chokes on large sites? Now's a good time. We'll wait. You can come right back via the \"back\" button.

\n

Gatsby needs a list of every page on your site. Then where the data for that page can be found. It's a static file. The file name includes a cache busting hash. We need to know the filename. There's no way to guess. This list has 1 entry for every page. 100k pages means 100k entries.

\n

In Gatsby v1 the entire list is put into the HTML of every page. That means if you have a lot of pages, your HTML files will be huge. It's a problem. It makes Gatsby v1 impractical for sites with more than ~1k pages.

\n

This is fixed in Gatsby v2. First, the list is much, much smaller. Second, it's no longer part of the HTML. It's loaded after the page has rendered. These changes are huge. Gatsby v2 will easily support sites with 5k pages. Maybe even 50k or 100k pages.

\n

GraphQL everywhere

\n

You know that Gatsby only allows GraphQL queries in two places. In layouts and page components. Layouts are disappearing in v2. You can use GraphQL in any component instead.

\n
\n

This is currently a work in progress. It might change by the final release of v2.

\n
\n

No more layouts. So what now? Now you wrap your components in other components. You can create any kind of \"layout\" hierarchy you want. Awesome. How do we get data into those components? Via the new StaticQuery.

\n

What is StaticQuery? It's a new component. It's a bit like Provider from redux. You give it a GraphQL query. It fetches that data and delivers it to your component.

\n

How does it work? That's still not finalised. But checkout Gatsby's first RFC for more details.

\n

Modern builds

\n

You write modern javascript. Then babel and webpack \"transpile\" it. Now your sites work in old browsers. Wooho!

\n

The transpiled code is bigger. It includes lots of \"polyfills\". These are special helpers for old browsers which don't have some modern features.

\n

Modern javascript today. Awesome. But now all modern browsers are also fetching polyfills. They don't need them. They could download smaller bits of code instead.

\n

That's the goal of modern builds. Give modern browsers a smaller build. Keep the bigger builds for old browsers.

\n

Another performance optimisation from Gatsby. This is just an idea right now. It hasn't been built yet. You can read the discussion about it here.

\n

Tech changes

\n

So v2 will be awesome. You want it now. Great. But there's no migration guide yet. Darn.

\n

Here's a short list of some of the bigger changes from v1 to v2. This list is definitely not exhaustive. v2 is constantly evolving. This list will get you started until the v2 migration guide comes out.

\n\n

Try v2 now

\n

You're convinced. You want to try it now. Awesome.

\n

First, do this in a branch. It might not work.

\n
git checkout -b gatsby-v2
\n

Install

\n

First, install the react and react-dom. They are now peer dependencies. They must go into your package.json.

\n
yarn add react react-dom
\n

Great. Are you using helmet? Probably. If you are, install it. Same as above.

\n
yarn add react-helmet
\n

Now install Gatsby v2. It's easy.

\n
yarn add gatsby@next
\n

You've installed Gatsby v2. Congratulations. Unfortunately, it probably doesn't work yet. Try anyway, just for fun!

\n
gatsby develop
\n

Errors? You probably need to update some other Gatsby packges. It's hard to know exactly which ones. Are you using the filesystem source plugin? Probably. Update it.

\n
yarn add gatsby-source-filesystem@next
\n

Errors

\n

You might have errors at this point. Try to figure out which package they're coming from. Try upgrading that package.

\n
\n

Be careful. Some packages have @next versions which are actually old. You can check on the \"Versions\" tab on npm. For example gatsby-plugin-react-helmet today (11 Apr 2018). The latest tag is version 2.0.10. While the next tag is 2.0.6-2 which is 10 days older.

\n
\n

This process might take a little trial and error. It's worth it. Remember to make frequent git commits!

\n

PostCSS / SaSS

\n

There's something new about PostCSS in v2. We haven't fully figured it out. It's not yet documented. We had success by removing the gatsby-plugin-postcss-sass package and instead using the gatsby-plugin-sass package.

\n
yarn remove gatsby-plugin-postcss-sass\nyarn add gatsby-plugin-sass@next
\n
\n

Warning: gatsby-plugin-sass is an example of a plugin whose @next tag is out of date.

\n
\n

Help

\n

You're messing with advanced level Gatsby fu here. You might have issues. Google is your friend. Check StackOverflow. Join the #gatsby channel on Reactiflux Discord (Discord is a bit like slack).

\n

But most of all. Persevere. Good luck.

","excerpt":"Part of a series on Gatsby v2 You're familiar with Gatsby. You realise there's much awesomeness in v2. You want some of that now. You need…","timeToRead":5,"frontmatter":{"date":"April 10, 2018","path":"/getting-started-with-gatsby-v2","title":"Getting started with 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":"c8ef7f7d-dffc-5aae-b6a0-0084762b39f0","frontmatter":{"title":"Gatsby v2","path":"/gatsby-v2","tags":["v2","beta"]}}},{"node":{"id":"43eb2d0b-dabd-5c3d-8f96-41eeffd1c003","frontmatter":{"title":"How do layouts work in Gatsby v2","path":"/how-do-layouts-work-in-gatsby-v2","tags":["v2"]}}},{"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":{"edges":[{"node":{"id":"5ef26261-6645-5529-b649-2cf2d56ff251","name":"skube","date":1526127923,"fields":{"messageHtml":"

So if gatsby-plugin-sass is an example of a plugin whose @next tag is out of date, should one just:\nyarn add gatsby-plugin-sass (instead of appending @next)?

"}}}]},"allRatingsJson":{"totalCount":1,"edges":[{"node":{"id":"98c1f194-5e96-5ca1-9684-30b7e4459e35","rating":"5"}}]}},"pageContext":{"tags":["v2"]}}