{"componentChunkName":"component---src-templates-tags-js","path":"/tags/blog/","result":{"data":{"allMarkdownRemark":{"totalCount":1,"edges":[{"node":{"id":"93944f27-7c2e-5b93-85a8-cafc1058cf7c","html":"

So, I’ve decided to write again and since I haven’t had time for quite a while, my blog was still using Gatsby v2. At first it didn’t seem like a big change, but little did I know what was I getting myself into.

\n\n

The why

\n

After almost three years, I decided it’s time I write again, however, when I opened my VSCode and run the local environment, it gave me lots of warnings that some packages were not maintained anymore. After a little digging I found out Gatsby is at v5 now while I was still using v2.

\n

I thought to myself it shouldn’t be that bad, let’s go and upgrade the blog before writing any posts to make sure it’s safe and sound. I guess something about writing code and craftmanship and the sense of me still being on top of what’s happened in the web world while I’ve been in the cloud (pun intended).

\n

Updating Node and packages

\n

First thing first, I needed to update my Node to the latest version since they dropped support for what I had. Then I upgraded the Gatsby CLI too:

\n\n \n Copy\n \n \n
npm install -g gatsby-cli
\n

After that you can run the outdated command to see what packages have new versions.

\n\n \n Copy\n \n \n
npm outdated
\n

If you’re brave enough like me, run the update command to update all of the packages:

\n\n \n Copy\n \n \n
npm update
\n

But you can run it for just one package as well. For me when it was done, I got like a million different errors all at once, but I was in for a fight, so I started by finding all the packages that were either deprecated or replaced by others such as gatsby-image and gatsby-remark-custom-blocks.

\n

Of course that took a really long time, but I managed to isolate each and resolve it either by commenting the usage or by replacing the package.

\n

Updating GraphQL queries

\n

The next thing that was broken was the fact that GraphQL queries are now two types, Page and Component queries and I had to make sure I used the new helper useStaticQuery from Gatsby instead of StaticQuery tag.

\n

Migration from gatsby-image

\n

The biggest change from plugin perspective was to move from gatsby-image to gatsby-image-plugin which meant there were some breaking changes that I had to fix. Full guide can be found here.

\n

Changes to the way we add SEO

\n

The next thing was using the Head API to add SEO to pages which was done differently before. Basically instead of adding a SEO component in each page you need to export a Head component:

\n `, `10195285483857619000`)\"\n >\n \n Copy\n \n \n
export const Head = () => <Seo title=\"404: Not Found\" />
\n

Styled component updates

\n

The next thing was to change any prop name you pass to styled component to prevent it to be passed down as an attribute to the HTML elements which caused a warning in the browser. The change was not big, just adding a $ to the beginning of the name fixed the issue, so from:

\n\r\n hasmargin &&\r\n \\`\r\n margin-right: 1rem;\r\n \r\n \\`}`, `67679996550663440000`)\"\n >\n \n Copy\n \n \n
${({ hasmargin }) =>\r\n    hasmargin &&\r\n    `\r\n      margin-right: 1rem;\r\n      \r\n  `}
\n

to:

\n\r\n \\$hasmargin &&\r\n \\`\r\n margin-right: 1rem;\r\n \r\n \\`}`, `48268089294279705000`)\"\n >\n \n Copy\n \n \n
${({ $hasmargin }) =>\r\n    $hasmargin &&\r\n    `\r\n      margin-right: 1rem;\r\n      \r\n  `}
\n

Summary

\n

All in all, the changes were not that bad, only time consuming, but I am so glad I got it done and now into writing more content. Stay tuned for some cool content friends 🤘🏽.

","timeToRead":2,"frontmatter":{"title":"So, I decided to upgrade my blog's engine!!!","unformattedDate":"2024-04-13T00:00:00.000Z","date":"Apr 13, 2024","path":"/gatsby-upgrade/","author":"Yaser Adel Mehraban","tags":["gatsby","blog"],"thumbnail":null}}}]}},"pageContext":{"tag":"blog"}},"staticQueryHashes":[],"slicesMap":{}}