Build Gatsby Websites Using Firestore Data (Without Plugin)

Get Firestore data to build your Gatsby static website with flexibility.

David Dal Busco
The Startup

--

Photo by Melanie Magdalena on Unsplash

It is possible to populate Gatsby websites using Cloud Firestore with existing plugins and CMS but, you might be looking to implement such solution by yourself, without dependencies, to get the full control on the process.

This was my goal when I recently developed the new website of DeckDeckGo, more precisely when I was looking to present users’ published decks in the dedicated page “Discover”.

In this article I will show you, step by step, how to collect Firestore data to build Gatsby static websites. In addition, as your data might content link to image, I will also show you how to optimize these.

Meta

The current post was originally published in January 2021. It was developed using Gatsby v2 and, its source code is available on GitHub.

Introduction

The feature we are about to develop, takes place at build time. We are going to fetch data saved in a database, Firestore, to generate a static website with Gatsby. This process can be summarized in the following steps:

  1. Collect the Firestore data

--

--