Gatsby source plugin for working with official Notion API.

Heres a Postman collection to play around with the API if youre interested: https://www.postman.com/notionhq/workspace/notion-s-public-api-workspace/overview

This is a source plugin for pulling content into Gatsby from official public Notion API (currently in beta). With this plugin, you will be able to query your Notion pages in Gatsby using GraphQL.

Notion API Reference

An example

Heres my blog running on gatsby-source-notion-api

or

Before using this plugin, make sure you

Then add this to your gatsby-config.json :

token [string][required]

Integration token.

databaseId [string][required]

The identifier of the database you want to get pages from. The integration identified by provided token must have access to the database with given id.

propsToFrontmatter [boolean][defaults to true]

Put Notion page props to Markdown frontmatter. If you set this to false, you will need to query notion to get page props.

lowerTitleLevel [boolean][defaults to true]

Push headings one level down. # becomes ##, ## becomes ###, ### becomes ####. Notion is limited to only 3 levels of heading. You can create ####, #####, etc. - they will not be reflected in Notion, but they will work properly in the Markdown output. Is true by default.

You can query for pages with notion or grab all of them with allNotion . The raw content of the page is available under raw property.

Alternatively, you can use MarkdownRemark or MDX directly:

Unique page identifier. This is not a Notion page identifier. You can get the Notion page id under raw.id .

Parend Node.

Blocks that belong to the page.

Page title joined into one string.

Properties of the page. An object with keys representing database columns (snake-cased), and the following value:

Notion column id

Readable name of the column (without snake case).

Value of the column for the page. Might have different structure depending on the type.

Notion type of the column.

Boolean. Is true if the pages was marked removed but not removed permanently.

Date of page creation.

Date of the last page update.

Untouched contents of whatever Notion API returned.

Markdown contents of the page. Limited by blocks currently supported by Notion API. Unsupported blocks turn into HTML comments specifying that Notion marked this block as non-supported.

Since theres not semantic HTML analog for column lists and columns, these Notion blocks are transformed to <ColumnList> and <Column> components in the markdown. To customize these components, you can write custom components for these and include them in your MDXProvider .

If you want to turn images attached through the Files property into file nodes that you can use with gatsby-image, you need to attach remote file nodes to the Files property. In the example below, the propsToFrontmatter is set to true and the Hero Image Files property is used for images: