Gatsby에 노션의 등장이라… Gatsby에 Notion API 연동하기.
목차 펼치기
환경변수 설정
환경변수 설정
.env.development
,
.env.production
파일 생성
노션 연결 관련 키 변수 추가
gatsby.config.js
수정
Notion API 연결
Notion API 연결
노션 통합을 위한 API 키 생성
Gatsby에 공유하려는 문서의 Share에 해당 키 추가
가이드 문서대로 보는데 계속 Integration Key가 안떠서 뭐가 문제지 했었는데, 노션을 켜놓은 상태에서 키를 발급받았기 때문에 노션을 종료 후 다시 실행하니까 Key가 불러와졌다. 😇
이렇게 연결이 되었다 !
데이터베이스 키를 복사하자.
“데이터베이스 ID는 작업 공간 이름(이름을 지정한 경우) 뒤에 오는 슬래시와 물음표 사이에 있는 데이터베이스 URL의 문자 문자열입니다. ID의 길이는 32자이며 숫자와 문자를 포함합니다.”
- 페이지 단위에서 링크를 복사하는 게 아니라, 데이터베이스 단에서 복사해야 한다.
gatsby-config.json
플러그인 설정
해당 플러그인에 하나의 DatabaseID 만 설정해줄 수 있어, 웹사이트에 쓸 페이지들을 묶은 페이지를 생성한 후 해당 페이지의 URL ID를 사용하자.
Notion API 호출
Notion API 호출
GraphQL을 사용하여 호출해보자.
how to querying data
페이지 단위로 쿼리를 실행하여 props로 내려주는 방식.
hook으로 처리하여 호출하는 방 식.
공식문서에서 제공하는 GraphQL을 사용해보았으나, 일부 파라미터에 대한 조회가 되지 않았다. 조회가 가능한 파라미터들만 사용하여 쿼리를 수정했다.
그런데 일부 컨텐츠 타입에 대해서는 아직 잘 조회가 되지 않는다. 현재 개발 단계라 미지원하는 타입들이라 그렇다.