\n\n[](https://codeclimate.com/github/orlowdev/gatsby-source-notion-api/maintainability)\n\n[](https://github.com/prettier/prettier)\n[](https://github.com/orlowdev/or-release)\n\nGatsby source plugin for working with official [Notion](https://notion.so) API.\n\nHere's a [Postman](https://www.postman.com/) collection to play around with the API if you're interested: [https://www.postman.com/notionhq/workspace/notion-s-public-api-workspace/overview](https://www.postman.com/notionhq/workspace/notion-s-public-api-workspace/overview)\n\n## 🚧 It's a work in progress\n\nThis is a source plugin for pulling content into Gatsby from official public Notion API (currently\nin beta). With this plugin, you will be able to query your Notion pages in Gatsby using GraphQL.\n\n[Notion API Reference](https://developers.notion.com/reference/intro)\n\n[An example](https://gatsby-source-notion-api-demo.netlify.app)\n\n\n## Features\n\n- Get your Notion pages in Gatsby via GraphQL\n- Convenient access to page properties\n- Page contents in Markdown!\n- Normalised page title\n- All blocks styling represented in Markdown:\n - **bold** (`**$VALUE**`)\n - _italic_ (`_$VALUE_`)\n - ~~strikethrough~~ (`~~$VALUE~~`)\n - underline (`$VALUE`)\n - `code` (`$VALUE`)\n - color 🤷 (`$VALUE`)\n- Access to raw data returned by Notion API\n- Support for `markdown-remark` and `mdx`\n\n## Install\n\n```sh\nyarn add @attentivu/gatsby-source-notion-api\n```\n\nor\n\n```sh\nnpm install --save @attentivu/gatsby-source-notion-api\n```\n\n## How to use\n\nBefore using this plugin, make sure you\n\n1. Created a Notion integration (sign in to Notion, go to `Settings & Memberships` → `Integrations`\n → `Develop your own integrations`,\n [short link to the Integrations creation section](https://www.notion.so/my-integrations)). It's\n OK to use an internal one. Don't forget to copy the token:\n \n2. Go to the database you want to have access to from Gatsby, and share it with the integration (`Share` → Select\n the integration in the `Invite` dropdown). Don't forget the database in the URL. It's a series of\n characters after the last slash and before the question mark.\n \n Here's a reference:\n https://www.notion.so/{USER}/**{DATABASE_ID}**?{someotherirrelevantstuff}\n\nThen add this to your `gatsby-config.json`:\n\n```javascript\nplugins: [\n\t{\n\t\tresolve: `gatsby-source-notion-api`,\n\t\toptions: {\n\t\t\ttoken: `$INTEGRATION_TOKEN`,\n\t\t\tdatabaseId: `$DATABASE_ID`,\n\t\t\tpropsToFrontmatter: true,\n\t\t\tlowerTitleLevel: true,\n\t\t},\n\t},\n\t// ...\n]\n```\n\n## Configuration options\n\n`token` [string][required]\n\nIntegration token.\n\n`databaseId` [string][required]\n\nThe identifier of the database you want to get pages from. The integration identified by provided\ntoken must have access to the database with given id.\n\n`propsToFrontmatter` [boolean][defaults to **true**]\n\nPut Notion page props to Markdown frontmatter. If you set this to **false**, you will need to query `notion` to get page props.\n\n`lowerTitleLevel` [boolean][defaults to **true**]\n\nPush 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.\n\n## How to query for nodes\n\nYou can query for pages with `notion` or grab all of them with `allNotion`. The raw content of the\npage is available under `raw` property.\n\n### Query for all nodes\n\n```graphql\nquery {\n\tallNotion {\n\t\tedges {\n\t\t\tnode {\n\t\t\t\tid\n\t\t\t\tparent\n\t\t\t\tchildren\n\t\t\t\tinternal\n\t\t\t\ttitle\n\t\t\t\tproperties {\n\t\t\t\t\tMy_Prop_1\n\t\t\t\t\tMy_Prop_2\n\t\t\t\t}\n\t\t\t\tarchived\n\t\t\t\tcreatedAt\n\t\t\t\tupdatedAt\n\t\t\t\tmarkdown\n\t\t\t\traw\n\t\t\t}\n\t\t}\n\t}\n}\n```\n\nAlternatively, you can use MarkdownRemark or MDX directly:\n\n```graphql\nquery {\n\tallMarkdownRemark {\n\t\tedges {\n\t\t\tnode {\n\t\t\t\tfrontmatter {\n\t\t\t\t\ttitle\n\t\t\t\t}\n\t\t\t\thtml\n\t\t\t}\n\t\t}\n\t}\n}\n```\n\n## Node properties\n\n### `id`\n\nUnique page identifier. This is not a Notion page identifier. You can get the Notion page id under `raw.id`.\n\n### `parent` (Node)\n\nParend Node.\n\n### `children`\n\nBlocks that belong to the page.\n\n### `title` (String)\n\nPage title joined into one string.\n\n### `properties`\n\nProperties of the page. An object with keys representing database columns (snake-cased), and the following value:\n\n#### `id` (String)\n\nNotion column id\n\n#### `key` (String)\n\nReadable name of the column (without snake case).\n\n#### `value` (\\*)\n\nValue of the column for the page. Might have different structure depending on the type.\n\n#### `type` (String)\n\nNotion type of the column.\n\n### `archived` (Boolean)\n\nBoolean. Is **true** if the pages was marked removed but not removed permanently.\n\n### `createdAt` (Date)\n\nDate of page creation.\n\n### `updatedAt` (Date)\n\nDate of the last page update.\n\n### `raw` (\\*)\n\nUntouched contents of whatever Notion API returned.\n\n### `markdown` (String)\n\nMarkdown 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.\n\nSince there's not semantic HTML analog for column lists and columns, these Notion blocks are transformed to `` and `` components in the markdown. To customize these components, you can write custom components for these and [include them in your `MDXProvider`](https://www.gatsbyjs.com/docs/mdx/importing-and-using-components#make-components-available-globally-as-shortcodes).\n\n## Attaching images via \"Files\" property\n\nIf 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:\n\n```javascript\n// ./gatsby-node.js\nexports.onCreateNode = async ({ node, actions: { createNode }, createNodeId, getCache }) => {\n\tif (node.internal.type === \"MarkdownRemark\") {\n\t\tfor (let i = 0; i < node.frontmatter[\"Hero Image\"].length; i++) {\n\t\t\tconst name = node.frontmatter[\"Hero Image\"][i].name\n\n\t\t\tif (!name) {\n\t\t\t\tcontinue\n\t\t\t}\n\n\t\t\tif (name.startsWith(\"http\")) {\n\t\t\t\tconst fileNode = await createRemoteFileNode({\n\t\t\t\t\turl: name,\n\t\t\t\t\tparentNodeId: node.id,\n\t\t\t\t\tcreateNode,\n\t\t\t\t\tcreateNodeId,\n\t\t\t\t\tgetCache,\n\t\t\t\t})\n\n\t\t\t\tif (fileNode) {\n\t\t\t\t\tnode.frontmatter[\"Hero Image\"][i].remoteImage___NODE = fileNode.id\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n```\n\n## Current state\n\n- Due to the fact that Notion API only appeared recently, and it is still in beta, some blocks are\n marked \"unsupported\". Among others, images cannot be fetched for now\n- Currently, `gatsby-source-notion-api` can only work with one provided database. In further\n releases, all databases reachable by the Integration will be available for querying\n- ~~Nested blocks are currently skipped. E.g. if a list item has a nested sublist, it's contents will\n be omitted. This will be fixed in the nearest releases~~ Nested blocks are supported as of `0.4.0`!\n- ~~Only raw content is available. Raw meaning whatever Notion returns. Further releases will aim at\n providing a more convenient data format apart from the raw one~~ `0.3.0` features support for **archived**, **createdAt**, **updatedAt**, **properties** and **title**.\n\n## 🎉 You did it\n\nThanks for reaching to the end of the readme!\n","readmeFilename":"README.md"}
![\"Gatsby\"](\"https://www.gatsbyjs.com/Gatsby-Monogram.svg\")
\n \n