Community Plugin

Gatsby + Notion = ✨

소개

Notion에 아카이빙한 문서들을 Gatsby 정적 블로그로 서비스하기 위해 처음 개발된 플러그인입니다.

손쉽게 Gatsby에 Notion 데이터베이스를 연결하여 GraphQL로 조회할 수 있습니다.

다중 데이터베이스 연결도 지원하고 있습니다.

orlowdev/gatsby-source-notion-api 플러그인을 fork하여 개발되었습니다.

Weezip 블로그 서비스에 사용하고 있습니다.

참고

안내

현재 마크다운 양식은 지원하고 있지 않습니다. 추후 지원될 수도 있습니다.
Notion의 공식 API 2022-06-28 버전을 사용합니다.
Notion의 자체적인 request-limits 제한 정책으로 인해, block 정보를 조회하는 과정에서 15초 간격으로 최대 4번까지 추가로 API를 호출할 수 있습니다. (총 5번)
모든 block 정보가 조회된 페이지는 Gatsby 내에 캐싱 됩니다.

설치

yarn add gatsby-source-notion-feely

npm install --save gatsby-source-notion-feely

Required Arguments

`token`

type: string
노션에서 발급받은 토큰 키 값 입니다.

`databases`

type: Array<Databases>

interface Databases {
	id: string;
	name: string;
	isCheckPublish?: boolean;
}

id : Notion 데이터베이스 ID
name : 조회한 데이터베이스들에 대해 명시적 구분을 위해 사용할 이름
isCheckPublish : 사용하는 노션 데이터베이스에 checkbox 타입의 is_published 컬럼을 생성해야 합니다. 해당 옵션이 true일 경우, is_published 값이 true인 데이터만 조회합니다.

Return

`id`

type: string
페이지마다 생성된 Gatsby 노드 ID.
Gatsby 공식 문서에서 더 자세히 확인할 수 있습니다.

`parent`

type: string or null
부모 노드 ID.

`children`

type: Array<string>
자식 노드 ID의 배열.

`databaseName`

type: string
설정한 데이터베이스 이름

`title`

type: string
데이터베이스에 title로 설정된 컬럼의 정보.

`page`

데이터베이스에 저장된 페이지 정보.
Notion API 공식 문서에서 더 자세히 확인할 수 있습니다.

`properties`

해당 페이지에 설정된 데이터베이스 컬럼들의 정보.

`createdAt`

type: string
데이터베이스가 생성된 ISO 8601 형식의 날짜 및 시간.

`updatedAt`

type: string
데이터베이스가 마지막으로 변경된 ISO 8601 형식의 날짜 및 시간.

설정

먼저 Notion API 호출을 위한 Secret Key와 연결할 데이터베이스 ID가 필요합니다.

Notion에 로그인 후 새 Integration을 생성합니다. > Create Link
- 이미 사용 중인게 있다면, 이 단계는 건너뛰어도 좋습니다.
- 더 자세한 내용은 Notion Guide를 확인해주세요.
Notion에서 연결할 데이터베이스를 생성합니다.
데이터베이스 - [Share] - [Invite] 에서 위에 생성했던 Integration을 초대합니다.
데이터베이스 Key를 확인합니다

To find a database ID, navigate to the database URL in your Notion workspace. The ID is the string of characters in the URL that is between the slash following the workspace name (if applicable) and the question mark. The ID is a 32 characters alphanumeric string.
- 더 자세한 내용은 Notion Guide를 확인해주세요.

gatsby-config.json에 설정을 추가합니다.

plugins: [
	{
		resolve: `gatsby-source-notion-feely`,
		options: {
			token: `$INTEGRATION_TOKEN`,
			databases: [
				{
					id: `$DATABASE_ID`,
					name: `$DATABASE_NAME`,
				},
			],
		},
	},
	// ...
];

이제 Gatsby에서 GraphQL로 조회할 수 있습니다!

예시

plugins: [
	{
		resolve: `gatsby-source-notion-feely`,
		options: {
			token: `$INTEGRATION_TOKEN`,
			databases: [
				{
					id: `$DATABASE_ID`,
					name: `$DATABASE_NAME`,
					isCheckPublish: true,
				},
				{
					id: `$DATABASE_ID_2`,
					name: `$DATABASE_NAME_2`,
				},
			],
		},
	},
];

$DATABASE_ID 데이터베이스에서는 is_published 체크박스가 true인 페이지를 조회하며, 여기서 생성된 Node는 databaseName 프로퍼티로 $DATABASE_NAME 값을 가집니다.
$DATABASE_ID_2 데이터베이스에서는 모든 페이지를 조회하며, 여기서 생성된 Node는 databaseName 프로퍼티로 $DATABASE_NAME_2 값을 가집니다.

Query

query {
	allNotion {
		edges {
			node {
				id
				parent
				children
				internal
				databaseName
				title
				page
				properties {
					...Your
					Database
					Columns
				}
				createdAt
				updatedAt
			}
		}
	}
}

테스트

Jest를 사용하고 있으며, /test/gatsby-node.test.js 파일이 실행됩니다.

.env.test 파일을 추가합니다.
해당 파일에 NOTION_INTEGRATION_TOKEN, NOTION_DB_ID 값을 설정합니다.
yarn test를 통해 테스트 결과를 확인할 수 있습니다.

참고

Gatsby Unit Testing

감사합니다.

끝까지 읽어주셔서 감사합니다.
더 멋진 기능을 위한 이슈 생성과 PR을 기다리고 있습니다.