Using the new Notion API with Gatsby.JS2021-06-04

Using the new Notion API with Gatsby.JS

Notion released a nice official API a few weeks ago. I finally got around to giving it a try and I was impressed with how quickly I could get something up and running, and I did it all on my lunch break. Here is the super quick, also done in the same lunch break description.

To skip ahead: Check out the ​ final version right here

I am just adding this to an existing Gatsby JS project, so if you want to do this from scratch... start out with a new Gatsby site. Then install Gatsby Source Sanity

npm install gatsby-source-sanity

Then you need to get some info from your Notion account => Settings => Integration and create a new integration.

Then create a new integration, choose the workspace you want, and get that all-important secret token

Now we need to go into our gatsby-config.js and add in a new plugin

    {

        resolve:`gatsby-source-notion-api`,

        options:{

            token:process.env.NOTION_TOKEN,

            databaseId:process.env.NOTION_ID,

        },

    },

Add this in and put the Token into your .env file. You can just put it directly here, but don't do that. Don't be that person who accidentally puts their secrets into a public repo.

Next, as you probably noticed from what we had above... we need the ID of the database that you need. If you go to the database that you want to use it is what you will see between the notion.so/ and the ?

Now you need to share the database with that integration that you created. Go to the database that you would like to share and click share then chose the correct integration.

Now give this a nice little npm run dev and away we go. You should see all of your notion database showing up in the gatsby QraphQL playground. I quickly built a GraphQL query for the books in the database where I track what I am reading.

Now I quickly threw all that data onto a page for a quick view on my website of the books I have finished recently.

Check out the ​ final version right here

One of the easiest ways I have seen yet to source data easily. And since I am using Notion already, I am sure I can find a ton of uses for this.