Skip to main content
View plugin on GitHub
See starters using this

gatsby-source-notion-contents

Get gatsby sources from notion

NPM npm bundle size (minified)

Installation

$ npm i -S gatsby-source-notion-contents

⚠️ Prerequisite

You need a token to use this package. You can get it from Notion.so cookie. the key of it is token_v2.

Options

type Option = {
  token: string; // Required
  ids?: string[]; // Optional. To get contents that are out of scope.
  prefix?: string; // Optional. to add prefix into relative links
  removeStyle?: boolean; // Optional. to remove inline styles
};

ids

If the URL is https://www.notion.so/Personal-Home-db45cd2e7c694c3493c97f2376ab184a, You need to add db45cd2e7c694c3493c97f2376ab184a into options.ids.

How to use

// In your gatsby-config.js
{
  // other configs ...
  plugins: [
    // other plugins ...
    {
      resolve: `gatsby-source-notion-contents`,
      options: {
        token: '<<YOUR_NOTION_TOKEN>>',
        ids: ['<<ID_OF_NOTION_PAGE>>'],
        prefix: '/',
        removeStyle: false,
      },
    },
  ]
}

How to query

  • Get all posts
query Notions {
  allNotionContent {
    edges {
      node {
        id
        contentType
        internal {
          # ... other properties of internal
          content
        }
      }
    }
  }
}
  • Get a post
query Notion {
  notionContent {
    id
    contentType
    internal {
      # ... other properties of internal
      content
    }
  }
}
  • Get a specific post
query Notion {
  notionContent(id: { eq: "ID_SPECIFIC_POST" }) {
    id
    contentType
    internal {
      # ... other properties of internal
      content
    }
  }
}

Example

Sample project

Example source

const Component = {
  const data = useStaticQuery(graphql`
    query Notion {
      notionContent {
        internal {
          content
        }
      }
    }
  `);

  return (
    <div dangerouslySetInnerHTML={{ __html: data.notionContent.internal.content }} />
  );
};

Buy Me A Coffee