Gatsby에 노션의 등장이라… Gatsby에 Notion API 연동하기.
목차 펼치기
환경변수 설정
환경변수 설정
.env.development
,
.env.production
파일 생성
노션 연결 관련 키 변수 추가
gatsby.config.js
수정
javascript1require("dotenv").config({ 2 path: `.env.${process.env.NODE_ENV}`, 3}) 4 5module.exports = { 6 ... 7}
Notion API 연결
Notion API 연결
노션 통합을 위한 API 키 생성
Gatsby에 공유하려는 문서의 Share에 해당 키 추가
가이드 문서대로 보는데 계속 Integration Key가 안떠서 뭐가 문제지 했었는데, 노션을 켜놓은 상태에서 키를 발급받았기 때문에 노션을 종료 후 다시 실행하니까 Key가 불러와졌다. 😇
이렇게 연결이 되었다 !
데이터베이스 키를 복사하자.
“데이터베이스 ID는 작업 공간 이름(이름을 지정한 경우) 뒤에 오는 슬래시와 물음표 사이에 있는 데이터베이스 URL의 문자 문자열입니다. ID의 길이는 32자이며 숫자와 문자를 포함합니다.”
- 페이지 단위에서 링크를 복사하는 게 아니라, 데이터베이스 단에서 복사해야 한다.
gatsby-config.json
플러그인 설정
해당 플러그인에 하나의 DatabaseID 만 설정해줄 수 있어, 웹사이트에 쓸 페이지들을 묶은 페이지를 생성한 후 해당 페이지의 URL ID를 사용하자.
javascript1{ 2 resolve: 'gatsby-source-notion-api', 3 options: { 4 token: NOTION_INTEGRATION_TOKEN, 5 databaseId: NOTION_DB_ID, 6 propsToFrontmatter: true, 7 lowerTitleLevel: true 8 }, 9},
Notion API 호출
Notion API 호출
GraphQL을 사용하여 호출해보자.
how to querying data
페이지 단위로 쿼리를 실행하여 props로 내려주는 방식.
hook으로 처리하여 호출하는 방 식.
공식문서에서 제공하는 GraphQL을 사용해보았으나, 일부 파라미터에 대한 조회가 되지 않았다. 조회가 가능한 파라미터들만 사용하여 쿼리를 수정했다.
javascript1query { 2 allNotion { 3 edges { 4 node { 5 archived 6 children { 7 id 8 } 9 createdAt 10 id 11 internal { 12 content 13 } 14 json 15 markdownString 16 parent { 17 id 18 internal { 19 content 20 } 21 } 22 raw { 23 archived 24 children { 25 id 26 } 27 created_by { 28 id 29 } 30 created_time 31 id 32 last_edited_by { 33 id 34 } 35 last_edited_time 36 object 37 parent { 38 database_id 39 type 40 } 41 url 42 } 43 title 44 updatedAt 45 } 46 } 47 } 48}
그런데 일부 컨텐츠 타입에 대해서는 아직 잘 조회가 되지 않는다. 현재 개발 단계라 미지원하는 타입들이라 그렇다.