gatsby-source-notionso

A Gatsby source plugin for sourcing data into your Gatsby application using Notion.so as a backend.

There is not yet an official API to retrieve data for your pages, so this plugin reverse engineered the current API to get access to the content of a page.

You can find a detailed description about this plugin at: http://www.gatsbyplugins.com

Screenshot

Demo site

A demo site is available at: http://www.gatsbyplugins.com

This demo site contain detailed information about how to use the plugin.

Installation

$ npm install --save gatsby-source-notionso

or

$ yarn add gatsby-source-notionso

Options

export interface NotionsoPluginOptions extends PluginOptions {
  rootPageUrl: string; // the notion page URL of the root page
  name: string; // name of your data set to identify the data for the instance of this plugin
  tokenv2?: string; // not used yet (the page needs to be public)
  debug?: boolean; // set to true to enable debugging information
}

The plugin will load the page identified by the rootPageUrl but this page will not be rendered: the root page is supposed to contain references to all the pages you want to retrieve data for.

How to use?

In your gatsby-config.js file:

  plugins: [
    {
      resolve: 'gatsby-source-notionso',
      options: {
        name: "<name of your data set>",
        rootPageUrl: "<your page url>",
        debug: false,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `${__dirname}/src/pages`,
      },
    },
  ],

How to query

Get all posts

If the name of your data set is blog, the following request will allow you to retrieve your data.

query {
  allNotionPageBlog(
    filter: { isDraft: { eq: false } }
    sort: { fields: [indexPage], order: DESC }
  ) {
    edges {
      node {
        title
        slug
        excerpt
        pageIcon
      }
    }
  }
}

References

gatsby source plugin development

• Pixabay Image Source Plugin Tutorial
• Customizing the GraphQL Schema

Notion API

• How I reverse engineered Notion API

Various Notion API implementations:

• in Go
• in Python
• in Kotlin