Gatsby에 노션의 등장이라… Gatsby에 Notion API 연동하기.

환경변수 설정

• Gatsby Environment Variables

1. .env.development

   ,

   .env.production

   파일 생성

2. 노션 연결 관련 키 변수 추가

3. gatsby.config.js

   수정

   javascript

   1require("dotenv").config({
   2  path: `.env.${process.env.NODE_ENV}`,
   3})
   4
   5module.exports = {
   6	...
   7}

Notion API 연결

• developer notion
• create an integration

1. 노션 통합을 위한 API 키 생성

   1. short link to the Notion Integrations creation section

2. Gatsby에 공유하려는 문서의 Share에 해당 키 추가

   1. 가이드 문서대로 보는데 계속 Integration Key가 안떠서 뭐가 문제지 했었는데, 노션을 켜놓은 상태에서 키를 발급받았기 때문에 노션을 종료 후 다시 실행하니까 Key가 불러와졌다. 😇

   2. 이렇게 연결이 되었다 !

      

   3. 데이터베이스 키를 복사하자.

      1. “데이터베이스 ID는 작업 공간 이름(이름을 지정한 경우) 뒤에 오는 슬래시와 물음표 사이에 있는 데이터베이스 URL의 문자 문자열입니다. ID의 길이는 32자이며 숫자와 문자를 포함합니다.”

      2. 페이지 단위에서 링크를 복사하는 게 아니라, 데이터베이스 단에서 복사해야 한다.
3. gatsby-config.json

   플러그인 설정

   1. 해당 플러그인에 하나의 DatabaseID 만 설정해줄 수 있어, 웹사이트에 쓸 페이지들을 묶은 페이지를 생성한 후 해당 페이지의 URL ID를 사용하자.

      javascript

      1{
      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 호출

1. GraphQL을 사용하여 호출해보자.

   1. how to querying data

      1. page query

         1. 페이지 단위로 쿼리를 실행하여 props로 내려주는 방식.

      2. use-static-query

         1. hook으로 처리하여 호출하는 방식.

2. 공식문서에서 제공하는 GraphQL을 사용해보았으나, 일부 파라미터에 대한 조회가 되지 않았다. 조회가 가능한 파라미터들만 사용하여 쿼리를 수정했다.

   javascript

   1query {
   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}

3. 그런데 일부 컨텐츠 타입에 대해서는 아직 잘 조회가 되지 않는다. 현재 개발 단계라 미지원하는 타입들이라 그렇다.