image

notion api 100개 초과일 때

태그
Dev
상세설명notion api 100개 초과일 때 해결법
작성일자2024.03.18

블로그 포스팅 글이 100개를 넘어가면서 0 번째부터 글들이 리스트에 없어 notion api 에 대해 다시 살펴봤다.

Notion Api

포스트 맨으로 api를 불러와 보니 100개 초과 일 때 와 아닐 때 값이 다른 점이 있다.

results 100개 이하일 때

has_more값이 false이며 next_cursor 값도 null 이다.

// JSON
{
	"object": "list",
	"results": [
	  ///
	],
	"next_cursor": null,
	"has_more": false,
	...
}

results 100개 초과 일 때

has_more값이 true이며 next_cursor 값은 string된 값이 생긴다.

// JSON
{
	"object": "list",
	"results": [
	  ///
	],
	"next_cursor":"588d76b7-4346-4d68-9551-8e8a06d24493", // 변경되는값
	"has_more": true,
	...
}

100개 초과되어 보이지 않는 글 불러오기

⭐ next_cursor 의 값은 api를 불러올 때마다 변경됨으로 해당 api의 has_more 값이 true 이면 next_cursor의 값을 추출해 동일한 api body 에 하위 코드를 넣어 api를 불러오면 초과된 만큼의 과거 글이 불러와 진다.

{
   "start_cursor": "588d76b7-4346-4d68-9551-8e8a06d24493"
}

두 api post 후 합치기

기본 api 와 body에 start_cursor 값이 추가된 api를 Promise.all()로 불러와 한 데이터로 묶으면 된다.

export async function getServerSideProps() {
  const axiosConfig = {
    headers: {
      Accept: "application/json",
      "Notion-Version": "2022-02-22",
      "Content-Type": "application/json",
      Authorization: `Bearer ${TOKEN}`,
    },
  };

  //기본 api 
  const data = {
    page_size: 100,
  };
  const response = await axios.post(
    `https://api.notion.com/v1/databases/${DATABASE_ID_BLOG}/query`,
    data,
    axiosConfig
  );

	//next_cursor 값 추츨 
  const startCursor =
    response.data.has_more === true ? response.data.next_cursor : null;

	// 100개 초과되어 추가 api 
  const remainData = {
    page_size: 100,
    start_cursor: startCursor,
  };

  const remainResponse = await axios.post(
    `https://api.notion.com/v1/databases/${DATABASE_ID_BLOG}/query`,
    remainData,
    axiosConfig
  );

	// 기본 api & 추가된 api Promise.all() 
  const [blogsResponse, remainBlogsResponse] = await Promise.all([
    response,
    remainResponse,
  ]);

  const originblogs = blogsResponse.data.results;
  const remainBlogs = remainBlogsResponse.data.results;
  
  // 기본 api & 추가된 api 합침
  const combinedBlogs = [...originblogs, ...remainBlogs];

  return {
    props: { combinedBlogs },
  };
}