Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

Gatsby Source Notion Article

CI codecovAll Contributors

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.


# 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.

                                  |--------- 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


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 {

Get an article from your notion database

  notionArticles {


Check our example project of the Gatsby plugin implementation.

// Quick example
const Component = {
  const data = useStaticQuery(graphql`
    query Notion {
      notionArticles {

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


If you’ve ever wanted to contribute to open source, and a great cause, now is your chance!

See the contributing docs for more information.

Feel free to open a discussion if you have any question or suggestion in regards to this plugin.


Thanks goes to these wonderful people

David Dias

💻 📖 🚇 ⚠️

(emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!


See MIT Licence, 2021 David Dias

© 2023 Gatsby, Inc.