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

작성 : 2023-03-29수정 : 2023-11-05

목차 펼치기



환경변수 설정

  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 연결

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

  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. 페이지 단위로 쿼리를 실행하여 props로 내려주는 방식.

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




Contact Me

All Icons byiconiFy