Gatsby-source-notion-feely NPM

소개

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

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

1개의 Notion 계정과만 연결이 가능하며, 해당 계정 내의 여러 데이터베이스를 연결할 수 있습니다.

Weezip 블로그 서비스에 사용하고 있습니다.
orlowdev/gatsby-source-notion-api 플러그인을 fork하여 개발되었습니다.

참고

안내

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

설치

yarn add gatsby-source-notion-feely

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

Required Arguments

`token`

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

`databases`

type: Array<Database>

arguments {
	id: string;
	name: string;
	pageFilter?: NotionFilterJSON;
}

id : Notion 데이터베이스 ID
name : 조회한 데이터베이스들에 대해 명시적 구분을 위해 사용할 이름
pageFilter : Notion 데이터베이스 필터 쿼리 (Filter database entries 참고)

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로 설정된 컬럼의 정보.

`json`

데이터베이스에 저장된 페이지 정보를 JSON string으로 변환한 정보.

Notion API 공식 문서에서 더 자세히 확인할 수 있습니다.

`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로 조회할 수 있습니다!

JSON.parse(json) 을 통해 Notion 페이지 객체를 이용할 수 있습니다.

예시

plugins: [
	{
		resolve: `gatsby-source-notion-feely`,
		options: {
			token: `$INTEGRATION_TOKEN`,
			databases: [
				{
					id: `$DATABASE_ID`,
					name: `$DATABASE_NAME`,
					pageFilter: {
						property: "is_published",
						checkbox: {
							equals: 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
				json
				createdAt
				updatedAt
			}
		}
	}
}