Upgrading Gatsby to v3 broke my site

Since the launch of Gatsby v3 I had the plan to upgrade my site. But the process wasn't simple.

As someone who have been digging deep in the features of Gatsby build configuration as well as the Gatsby Image component to structure my site. Upgrading to v3 required some refactoring on my code.

Content Collection with SourceName plugin

I value the possibility of having separate collections markdown content: pages, articles, cases and notes all live in their own folder in my repository. On top of that I have double content folders, one for my English site (thko.net) and another for my Danish site (thko.dk).

Previosly I have been using the plugin: https://github.com/elboman/gatsby-remark-source-name to be able to query content with a filter depending on the source (content collection). However in v3 this is no longer possible. Albeit, you don't need the plugin either anymore, as the current built in features of Gatsby v3 supply the possibility for it using the onCreateNode method call.

exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions;
  if (node.internal.type === "MarkdownRemark") {
    const fileNode = getNode(node.parent);
    createNodeField({
      node,
      name: "sourceName",
      value: fileNode.sourceInstanceName,
    });
  }
};

Gatsby image component

The new Gatsby image component is awesome - it is as simply as that. I found that it has all the feature I used to utilize with the old Gatsby image component. And even better the documentation and usage is easier to follow on the new component.