@dotdev/gatsby-source-navigation

Community Plugin

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

Usage

Get Firebase config from Firebase project.

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

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.

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

@dotdev/gatsby-source-navigation

Usage

Configurations

Acknowledgement