gatsby-source-fireimage

Community Plugin

Sourcing Data From Google Firestore

This is a simple plugin to transform firestore collection into gatsby pages. It is most suitable for pages that don’t need rich text and many images, for example product pages for book store.

install

npm install gatsby-source-fireimage

gatsby config

//gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: "gatsby-source-fireimage",
      options: {
        credential: require("<path-to-your-firebase-admin-credential>"),
        appConfig: {
          databaseURL: "<firebase-databaseUrl>",
        },
        //your collection name, books for example
        collection: "books",
      },
    },
  ],
};

You can find how to get admin credential here, Firebase Admin.

This plugin will also create an image node if your firebase collection has imgurl property that point to the image url. This is useful if you want to use gatsby-image (you should use it for images).

//example for books collection in firestore
{
    title: "This is book title",
    description: "A book worth reading",
    //if imgurl exist, image will be created
    //make sure it is pointed to correct url
    imgurl: "https://via.placeholder.com/300/09f/fff.png"
}

In the graphiql, the name generated is fireimage. And the image under it (if any) is imgSrc.