All Projects → taessina → gatsby-source-firestore

taessina / gatsby-source-firestore

Licence: other
Gatsby source plugin for building websites using the Firestore as a data source.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to gatsby-source-firestore

gatsby-graphcms-example
Example of Gatsby source plugin for GraphCMS
Stars: ✭ 32 (+6.67%)
Mutual labels:  gatsby, gatsby-plugin, gatsby-source
gatsby-source-behance
Gatsby source plugin for loading information from Behance
Stars: ✭ 17 (-43.33%)
Mutual labels:  gatsby, gatsby-plugin, gatsby-source
gatsby-source-stripe
Gatsby source plugin for building websites using Stripe as a data source
Stars: ✭ 71 (+136.67%)
Mutual labels:  gatsby, gatsby-plugin, gatsby-source
gatsby-remark-images-anywhere
Handle images with relative, absolute & remote path for gatsby-transformer-remark & gatsby-plugin-mdx
Stars: ✭ 22 (-26.67%)
Mutual labels:  gatsby, gatsby-plugin
gatsby-plugin-open-graph-images
🖼 Open-Graph Images derived and generated from React Components
Stars: ✭ 16 (-46.67%)
Mutual labels:  gatsby, gatsby-plugin
gatsby-theme-dox
Documentation made easy with Gatsby. 🎉
Stars: ✭ 29 (-3.33%)
Mutual labels:  gatsby, gatsby-plugin
gatsby-plugin-asset-path
Move all of your JS and CSS build files, as well as the static folder into a subdirectory of your choice
Stars: ✭ 14 (-53.33%)
Mutual labels:  gatsby, gatsby-plugin
gatsby-plugin-prettier-build
prettify gatsby build output
Stars: ✭ 30 (+0%)
Mutual labels:  gatsby, gatsby-plugin
gatsby-source-printful
Printful store data for your Gatsby projects
Stars: ✭ 19 (-36.67%)
Mutual labels:  gatsby, gatsby-plugin
gatsby-source-directus7
Source plugin for pulling data into GatsbyJS from Directus CMS (https://directus.io)
Stars: ✭ 17 (-43.33%)
Mutual labels:  gatsby, gatsby-plugin
gatsby-attila-theme-ghost
A Gatsby theme plugin for creating blogs from headless Ghost CMS.
Stars: ✭ 16 (-46.67%)
Mutual labels:  gatsby, gatsby-plugin
gatsby-theme-jam-example
An example submission for the Gatsby Theme Jam.
Stars: ✭ 89 (+196.67%)
Mutual labels:  gatsby, gatsby-plugin
gatsby-remark-classes
Automatically add class attributes to markdown elements
Stars: ✭ 12 (-60%)
Mutual labels:  gatsby, gatsby-plugin
gatsby-plugin-apollo-client
📡Inject a Shopify Apollo Client into the browser.
Stars: ✭ 20 (-33.33%)
Mutual labels:  gatsby, gatsby-plugin
Gatsby Theme Firebase
🔥 A Gatsby Theme for adding Firebase to your application.
Stars: ✭ 96 (+220%)
Mutual labels:  gatsby, firestore
chandrikadeb7.github.io
Personal portfolio website hosted using GitHub Pages - Version 2
Stars: ✭ 99 (+230%)
Mutual labels:  gatsby, gatsby-plugin
gatsby-plugin-robots-txt
Gatsby plugin that automatically creates robots.txt for your site
Stars: ✭ 105 (+250%)
Mutual labels:  gatsby, gatsby-plugin
gatsby-theme-nehalem
A Gatsby blog theme.
Stars: ✭ 168 (+460%)
Mutual labels:  gatsby, gatsby-plugin
gatsby-plugin-tailwindcss
Plug Tailwind CSS to your Gatsby website
Stars: ✭ 46 (+53.33%)
Mutual labels:  gatsby, gatsby-plugin
gatsby-i18n
Gatsby plugin that provides i18n support
Stars: ✭ 25 (-16.67%)
Mutual labels:  gatsby, gatsby-plugin

gatsby-source-firestore

npm version

Gatsby source plugin for building websites using Firebase Firestore as a data source

Usage

  1. Generate and download a Firebase Admin SDK private key by accessing the Firebase Project Console > Settings > Service Accounts

  2. Rename and put the downloaded .json crendtial file somewhere in the GatsbyJS project (e.g. ./credentials.json)

  3. Add gatsby-source-firestore as a dependency by running using npm or yarn:

    npm i gatsby-source-firestore
    # or
    yarn add gatsby-source-firestore
  4. Configure settings at gatsby-config.js, for example:

    module.exports = {
       plugins: [
         {
           resolve: `gatsby-source-firestore`,
           options: {
             // credential or appConfig
             credential: require(`./credentials.json`),
             appConfig: {
               apiKey: "api-key",
               authDomain: "project-id.firebaseapp.com",
               databaseURL: "https://project-id.firebaseio.com",
               projectId: "project-id",
               storageBucket: "project-id.appspot.com",
               messagingSenderId: "sender-id",
               appID: "app-id",
    
             },
             types: [
               {
                 type: `Book`,
                 collection: `books`,
                 map: doc => ({
                   title: doc.title,
                   isbn: doc.isbn,
                   author___NODE: doc.author.id,
                 }),
               },
               {
                 type: `Author`,
                 collection: `authors`,
                 map: doc => ({
                   name: doc.name,
                   country: doc.country,
                   books___NODE: doc.books.map(book => book.id),
                 }),
               },
             ],
           },
         },
       ],
     }

    Note that you will need to have books and authors in Firestore matching this schema before Gatsby can query correctly, e.g books__NODE on author needs to be an array with books as a key of reference types to book documents.

  5. Test GraphQL query:

    {
      allBooks {
        edges {
          node {
            title
            isbn
            author {
              name
            }
          }
        }
      }
    }

Configurations

Key Description
credential Credential configurations from downloaded private key
types Array of types, which require the following keys (type, collection, map)
types.type The type of the collection, which will be used in GraphQL queries, e.g. when type = Book, the GraphQL types are named book and allBook
types.collection The name of the collections in Firestore. Nested collections are not tested
types.map A function to map your data in Firestore to Gatsby nodes, utilize the undocumented ___NODE to link between nodes

Disclaimer

This project is created solely to suit our requirements, no maintenance or warranty are provided. Feel free to send in pull requests.

Acknowledgement

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].