Ekunola Ezekiel

Posted on Nov 4, 2019 • Updated on May 28, 2020 • Originally published at blog.ezekielekunola.com

My first experience with Gatsby

#webdev #javascript #gatsby #graphql

I recently built my portfolio website using Gatsby and I want to talk about my experience using Gatsby, what I enjoyed and the challenges I faced.

What is Gatsby

Gatsby is a free and open-source framework based on React that helps developers build blazing-fast websites and apps. Gatsby can be used to build static sites that are PWA, high performant and follows the web standard. Read more about Gatsby here.

What I enjoyed

Performance: Gatsby makes fast applications. Gatsby follows Google's PRPL (Push, Render, Pre-Cache, Lazy-load) standards for building apps that work well even during unreliable network connections. Find out more about why Gatsby is fast here.
It's React: I had experience working with React already, so it was very easy for me to work with Gatsby as I was able to understand what was going on.
Good Documentation: Gatsby has good documentation, so it was easy for me to learn how to use packages and plugins like gatsby-image, gatsby-source-filesystem, gatsby-plugin-react-helmet and so on when developing.
It uses GraphQL: Gatsby uses GraphQL for managing data, and can be used for creating/generating pages, querying data and so on. I had always wanted to learn how to use GraphQL, Gatsby allowed me to do that. I learned how to use GraphQL when querying data on Gatsby. Learn more about why Gatsby uses Graphql here.
Good Community: Gatsby has a good community and learning resources, and starters to help you get started quickly, and I also got to find solutions to challenges I had quickly.
Get started easily: You can easily get started with Gatsby, as Gatsby has lots of starters that can get you easily started.
Plugins: Gatsby has a plugin system that makes it easy to extend the functionality of Gatsby e.g Responsive image support, Typescript support. Find out more here.

Challenges I faced

When developing my portfolio, I mostly got the error TypeError: Cannot read property 'internal' of undefined when starting the application. To solve this error, I had to delete the .cache directory at the root of the project and restart the application by running gatsby develop on the terminal.
I also ran into issues when using the GraphQL playground, I changed my Graphql query in the code but was not reflecting on the Graphql playground until I had to refresh the playground.

I also ran into some other issues like querying for an image with a relative path and sizing an image with Gatsby Image, which i solved by googling, checking documentation and StackOverflow.