Tales of updating to Gatsby 2.0

I haven’t been doing much maintenance to this website since I migrated to GatsbyJS, but recently Gatsby has announced its 2nd major release. This is a big step forward for this amazing static site generator and I didn’t want to wait much to use it’s cool new capabilities.

Migrating to v2 would have been much more difficult if it wasn’t for the migration guide. Following the guide I’ve been able to successfully update my site in around 3 hours, and that’s because I had some trouble with the new StaticQuery API. I still don’t fully understand what’s the indented behaviour.

Let’s recap.

It took me one hour and a half to migrate all the code following the guide, I didn’t run it once so my confidence of it working was below zero.

npm run develop

Surprisingly the only errors I had were due to changes on the import style of the react-icons library.

- import PlayIcon from 'react-icons/lib/fa/youtube-play';
+ import { FaYoutube } from 'react-icons/fa';

After this changes the Javascript code was compiling successfully, but started seeing some errors around GraphQL

That’s when I started going around in circles trying to understand what’s the purpose on when to use the new StaticQuery API. I had to rollback many changes because I was using it in wrong places, I assume.

First of all, I shouldn’t have used it in queries that have parameters, the word static should have give me that clue 😂.

I watched this Egg Head video and it helped a bit. It looks like I should still use the previous graphql API in pages, and limit the use of the StaticQuery in components that are reused across the site, like headers or footers. That makes the components independent avoiding the need to query things on the outside and pass them in as props.

The issue is that I still was expecting to be able to use the new API in my SummaryPost component because it’s used in many different places, but that doesn’t fly.

If I think about it, there is no way that can work. First of all, it needs parameters. Each summary would need to know the post ID before hand, but that ID comes from the result of an index query. Looks to me like a cycle that can’t be broken. In the other hand, the query that goes on the page, the one that retrieves the list of posts to render, needs something to query for each post, an ID maybe? Maybe the ID that could be injected in the StaticQuery? I’m not sure, but I don’t see how this would work right now. So I will stick with fragment for this use case.

I’m just left with a bunch of warnings, looks like Gatsby 2 comes with some eslint rules which I really appreciate. I just need to find a way to disable the jsx-a11y/accessible-emoji 🤫.

That’s it!

As you can see the migration is quite straightforward even if you don’t know what you’re doing 😅 If you have more experience with React and GraphQL you should have way less problems than me.

One thing I would have appreciated in the guide was a little more info about the StaticQuery, the point is pretty much at the beginning and if you don’t know how it works, like me, you will spend the majority of time migrating the queries that you will have to rollback later.

I will take a look again at my queries when I have more energy, I need to understand how things are supposed to work.