@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