Introduction: Migrating Gatsby Site to Typescript

For the past year, I’ve been working on a few medium-large scale Gatsby projects. While Gatsby itself and the surrounding ecosystem have been amazing, with every new change request or feature for a project, it felt like the system was becoming more and more fragile.

Gatsby itself is a JavaScript framework, which is based on React. React, in turn, has a huge ecosystem and community around it. It’s easy to fine-tune your project with trending libraries and packages. Then, there are various data sources, each having their integration challenges and fragile content. Add to the mix multiple developers with different background, and you can easily blow up your project introducing accidental complexity.

Is Gatsby really enterprise ready? - I was asking myself.

Fortunately, I was about to launch this blog powered by Gatsby and just before going live, I decided to convert it to TypeScript. The intention was curiosity and challenge rather than objective reasoning. I had already worked on a few TypeScript + React + Redux projects before, and I thought Gatsby + TypeScript must be an easy one.

Having converted this blog, I concluded two things:

1. TypeScript + Gatsby is the future of enterprise headless CMS
2. The common ground of Gatsby + TypeScript is yet to be established

I suggest we briefly go over them. Shall we?

THE FUTURE OF ENTERPRISE HEADLESS CMS

Let’s take a look why corporates usually choose expensive traditional CMS systems today:

1. They often need to outsource accountability - someone else needs to be responsible to reduce organizational complexity (much like in programming). This suggests why agencies exist.
2. Technical benefits such as customization, personalization, performance, development speed and quality.

It just so happens that the listed benefits perfectly play with headless CMS and Gatsby! Well… Except maybe the last two: speed of development and quality.

As I mentioned in the beginning, it’s quite easy to make Gatsby site complex as it grows - and with complexity come bugs, and with bugs come slow iterations.

It’s easy to make Gatsby site complex as it grows - and with complexity come bugs, and with bugs come slow iterations.

Now, let’s check how TypeScript can help.

TypeScript introduces strict type checking. Type checking catches most of your runtime errors early during development. Runtime errors cause build errors. How much time have you wasted this year waiting for the build only to get an error: TypeError: Cannot read property 'split' of undefined ? Don’t even ask me..

TypeScript can safe guard your components from unreliable content coming from the CMS, given you enable strict mode. There is a plugin that automatically generates interfaces for your GraphQL queries. Those interfaces have nullable properties by default - because you never know what can come from the CMS. And TS compiler’s strict mode simply won’t let you compile the code unless you provide default prop values. This in turn makes your components more robust.

As the application becomes data-intensive, there are dozens of props and state values flying around. You never know what the prop can actually be - you must either go up the component stream and check the graphql query or console.log it. With TypeScript, all you need is to hover on the prop to see its type and possibly the structure. TypeScript helps you understand your website’s data flow better.

Working with multiple developers becomes easier as every one now follows strict type-checking and maintains inherent quality.

But what do the benefits above really mean for your overall project success? Overall, TypeScript helps you sustain the quality and development speed as your application grows.

TypeScript helps you sustain the quality and development speed as your application grows.

‍

Read the full transcript on Ilyas' personal blog.

Prototype is one of the leading companies for web design in Dubai. Get in touch for a free consultation today.