@dotdev/gatsby-source-navigation

@dotdev/gatsby-source-navigation

Gatsby source plugin for sourcing custom navigation solution. Currently uses Firebase Firestore as a data source.

Usage

1. Get Firebase config from Firebase project.

2. Add @dotdev/gatsby-source-navigation as a dependency by running using npm or yarn:

   npm i @dotdev/gatsby-source-navigation
   # or
   yarn add @dotdev/gatsby-source-navigation
   

3. Configure settings at gatsby-config.js, for example:

   module.exports = {
      plugins: [
        {
          resolve: `@dotdev/gatsby-source-navigation`,
          options: {
            // Note that this can be simplified by importing the config as an object, 
            // thereby abstracting the dependency on Firebase.
            // This example merely shows what is required.
            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: "Navigation",
                collection: "navigation",
                map: doc => ({
                  active: doc.active,
                  type: doc.type,
                  items: doc.items, // Will return all sub navigation levels as well
                }),
              },
            ],
          },
        },
      ],
    }
   

   Note that you will need to have navigation in Firestore matching this schema before Gatsby can query correctly.

4. Test GraphQL query:

{
  allNavigation {
    edges {
      node {
        active
        type
        items {
          items {
            items {
              label
              order
              url
            }
            label
            order
            url
          }
          order
          label
          url
        }
      }
    }
  }
}

Configurations

Key	Description
appConfig	App config required to initialise Firebase
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

Acknowledgement

• taessina/gatsby-source-firestore
• ryanflorence/gatsby-source-firebase