Gatsby-source-notion-article NPM

Gatsby Source Notion Article

A Gatsby source plugin for importing articles made in Notion into your Gatsby application using Notion API.

⚠️ The Notion API being still in beta, some limitations may exist. Feel free to open a discussion or ask for a new feature.

Install

# using npm
npm install gatsby-source-notion-article

# using yarn
yarn add gatsby-source-notion-article

How to configure

1. Create your integration

Create a new integration. It will give you access to a token that will be used in Gatsby Source Notion Article. Once it's created, copy your token and keep it for the next step.

2. Duplicate Notion database

Duplicate this article database template to ensure your articles follows the same format as this plugin. Don't forget to share this new database with the integration you just created.

3. Set your environment variables in a .env file

Create an .env file at the root of your Gatsby project. You can copy-paste the .env.example from this Github repository.

https://www.notion.so/myworkspace/a8aec43384f447ed84390e8e42c2e089?v=...
                                  |--------- Database ID --------|

NOTION_KEY=<your-notion-token>
NOTION_DATABASE_ID=<your-notion-database-id>

4. Add plugin to your gatsby config

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-notion-article`,
      options: {
        // Learn about environment variables: https://gatsby.dev/env-vars
        token: process.env.NOTION_KEY, // required
        databaseId: process.env.NOTION_DATABASE_ID, // required
        params: {
          page_size: 3, // optional, default is 100
          filter: {} // optional
          sort: {

          } // optional
        }
      }
    },
  ],
}

Options

Name	Type	Default	Description
`token`	string		required The `token` from Notion could be find on your integration
`databaseId`	string		required The `databaseId` is the alphanumerical value following the name of your workspace in the sharing URL.
`params`	object		The `params` object
`params.page_size`	number	100	How many articles you want Notion to query
`params.filter`	object		An object with filters passed to Notion
`params.sort`	object		An option with sort options passed to Notion
`debug`	boolean	false	Enable the debug mode for Notion
`unsupported`	boolean	false	Shows in the body a message if the block is not supported. This can be enable only in development mode.

Type of blocks currently supported

The Notion API being in beta, only some block elements are currently supported:

Headings (1, 2, 3)
Paragraphs
Bullet and numbered list
To do
Toggle
Child page

How to query

Get all articles from your notion database

{
  allNotionArticles {
    edges {
      node {
        id
        title
        body
        createdAt
        updatedAt
      }
    }
  }
}

Get an article from your notion database

{
  notionArticles {
    id
    title
    body
    createdAt
    updatedAt
  }
}

Examples

Check our example project of the Gatsby plugin implementation.

// Quick example
const Component = {
  const data = useStaticQuery(graphql`
    query Notion {
      notionArticles {
        body
      }
    }
  `);

  return (
    <div dangerouslySetInnerHTML={{ __html: data.notionArticles.body }} />
  );
};