gatsby-source-notion-contents

gatsby-source-notion-contents

Get gatsby sources from notion

Installation

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

⚠️ Prerequisite

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

Options

type Option = {
  token?: string; // Optional. need token when you need to get private contents.
  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

• https://github.com/wonism/gatsby-source-notion-contents-sample

Example source

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

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