Build Gatsby Websites Using Firestore Data (Without Plugin)

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

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
2. Inject these in the GraphQL data source of Gastby
3. Optimize the images
4. Use the information to generate the site

Sample Data

To ease this tutorial and, to have a common point of reference, let’s define our goal to be the display of a list of dogs.

These are going to be fetched from a Firestore collection called dogs.

[
  {
    "breed": "Beagle",
    "img_url": 
         "https://images.dog.ceo/breeds/beagle/n02088364_16065.jpg"
  }
]

Data and images are provided by the free and wonderful Dog API.

Firestore

Most of the other tutorials and posts I found regarding our subject, seems to use the Admin…