Skip to main content
Community Plugin
View plugin on GitHub
See starters using this

gatsby-source-c8db

Source plugin for pulling data into Gatsby from C8DB collections.

How to use

// In your gatsby-config.js

module.exports = {
  plugins: [
    /*
     * Gatsby's data processing layer begins with “source” plugins. Here we
     * setup the site to pull data from the "pets" collection in a
     * C8 fedration
     */
    {
      resolve: "gatsby-source-c8db",
      options: {
        config: "https://try.macrometa.io",
        auth: {
          email: "<my-email>",
          password: "<my-password>"
        },
        geoFabric: "<my-geofabric>",
        collection: "pets",
      }
    },
  ],
}

Multiple Collections

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-c8db`,
      options: {
        config: "https://try.macrometa.io",
        auth: {
          email: "<my-email>",
          password: "<my-password>"
        },
        geoFabric: "<my-geofabric>",
        collection: ["pets", "wild"],
      }
    },
  ],
}

Plugin Options

  • config: The config to pass to connect to the federation. If config is a string, it will be interpreted as config.url. A complete list of the config options can be found here.
  • auth: The credentials to login to the federtion. It will be an object with email and password keys.
  • geoFabric: The geo-fabric to be used for the logged-in user.
  • collection: The collection name within C8DB. It can also be an array for multiple collections.
  • map: Setup “mappings” for fields in your collections. You can tell Gatsby that a certain field is a given media type and with the correct transformer plugins installed, your data will be transformed automatically.

Mapping mediatype feature

Gatsby supports transformer plugins that know how to transform one data type to another e.g. markdown to html. In the plugin options you can setup “mappings” for fields in your collections. You can tell Gatsby that a certain field is a given media type and with the correct transformer plugins installed, your data will be transformed automatically.

Let’s say we have a markdown field named petName in our C8DB collection pets. We want to author our content in markdown but want to transform the markdown to HTML for including in our React components.

To do this, we modify the plugin configuration in gatsby-config.js like follows:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-c8db`,
      options: {
        config: "https://try.macrometa.io",
        auth: {
          email: "<my-email>",
          password: "<my-password>"
        },
        geoFabric: "<my-geofabric>",
        collection: ["pets", "wild"],
        map: {
            pets: { petName: "text/markdown" }
        }
      }
    },
  ],
}

The GraphQL query to get the transformed markdown would look something like this.

query MyQuery {
  allC8Document {
    edges {
      node {
        collectionName
        petName {
          petName
          childMarkdownRemark {
            html
          }
        }
      }
    }
  }
}