gatsby logo

The site is now running Gatsby v5 🎉

Gatsby v5 pull request on github

New Features #

Gatsby 5 introduces the Slices API and Partial Hydration (Beta). Slices unlock up to 90% reduction in build duration for content changes in highly shared components, Partial Hydration allows you to ship only the necessary JavaScript to the browser.

Gatsby v5 Release Notes

Dependency Changes #

Migration from v4 #

Migrating from v4 to v5 guide

There seem to be a few breaking changes to v5 but the only one this site seemed to be effected by was the graphql changes.

Update Gatsby #

Updating gatsby & related plugins should be pretty simple.

You may still get warnings about plugins being incompatible with gatsby version 5.x but most should work ok.

warn Plugin gatsby-plugin-xxx is not compatible with your gatsby version 5.0.1 - It requires
gatsby@~2.x.x || ~3.x.x || ~4.x.x

Node 18 #

nodejs logo

Make sure build in netlify.toml is using node 18


Updating GraphQL Queries #

graphql logo

There is a codemod tool for auto conversion but this didn't seem to work.

SyntaxError: missing ) after argument list

GraphQL schema: Changes to sort and aggregation fields As per the RFC: Change to sort and aggregation fields API the sort argument and aggregation’s field argument were changed from enums to nested input objects.

Update graphql queries which use sort

example diff: src/templates/index-template.tsx

      limit: $postsLimit
      skip: $postsOffset
      filter: { frontmatter: { template: { ne: "page" }, draft: { ne: true } } }
-      sort: { order: DESC, fields: [frontmatter___date] }
+      sort: { frontmatter: { date: DESC } }
    ) {
      edges {
        node {

As you can see from the diff the changes are relatively simple.

Source Code #

You can find the full pull request for Gatsby v5 update on github.

Gatsby v5 pull request on github

The source for the site is available on github.