gridsome-source-firestore v1.2.0

Gridsome source Firestore

Gridsome Source Plugin to load data from Firebase's Firestore

• Reference fields of collections included get automatically attached as Graphql References

• Image urls on fields within documents are downloaded and optimized by Gridsome.

• Load collections and their sub-collections and access them via _parent and the belongsTo property

• Live data updates from Firestore while you develop! debug: true

Example Demo

BREAKING CHANGES

View the changelog for any possible changes from previous versions.

Install

npm install gridsome-source-firestore

Setup

Until Firestore receives support for handling custom service accounts, the only way is to download the Firebase AdminSDK service account credentials for your project. This does give the plugin full access to your Firebase.

In order to build your site from another server, you'll also these credentials but: BE VERY CAREFUL HOW YOU TRANSPORT THEM! DO NOT PUSH THEM TO GITHUB OR ANY OTHER CODE REPOSITORY!

Set up Firebase AdminSDK service credentials

1. Navigate to the settings/serviceaccounts/adminsdk of your firebase project.
2. Make sure Firebase Admin SDK is selected, and click `Generate new private key
3. Download the key and save it to the root of your project.
4. For the saftey of everyone included this line in your .gitignore file: *-firebase-adminsdk-*.json

Usage

Within plugins in the gridsome-config.js file, you'll add the collections and fields you want to use.

// gridsome-config.js

const { db } = require('gridsome-source-firestore')

module.exports = {
  plugins: [
    {
      use: 'gridsome-source-firestore',
      options: {
        credentials: require('./my-project-firebase-adminsdk-qw2123.json'), // Replace with your credentials file you downloaded.
        debug: true, // Default false, should be true to enable live data updates
        ignoreImages: false, // Default false
        imageDirectory: 'fg_images', // Default /fg_images
        collections: [
          {
            // name: Topics, // Uncomment and use only when needed.
            ref: (db) => {
              return db.collection('topics')
            },
            slug: (doc, slugify) => {
              return `/topics/${slugify(doc.data.title)}`
            },
            children: [
              {
                ref: (db, parentDoc) => {
                  return parentDoc.ref.collection('posts')
                },
                slug: (doc, slugify) => {
                  return `/${slugify(doc.data.title)}`
                },
              }
            ]
          }
        ]
      }
    }
  ]
}

Definition

Collections: Array<Collection>

Collection: Object

Examples

Document

Is an object sent on each callback with the following structure:

Page Queries

query {
  allFireTopics {
    edges {
      node {
        title
        image (width: 800, height: 450)
        route
      }
    }
  }

  allFireTopicsPosts {
    edges {
      node {
        title
        body
        author {
          fullname
          image (width: 200, height: 200)
        }
        route
        image (width: 800, height: 450)
        topic: _parent {
          title
        }
      }
    }
  }
}

_parent exists on every child if the parent isn't skipped.