Pocketbase

데이터를 관리하기에 편의한 Pocketbase를 사용한다.

Tanstack Query

SNS처럼 수많은 데이터를 페이지에 렌더링해 주는 상황에서, Infinite Scroll이 가능하도록 useInfiniteQuery를 사용할 수 있다.

useInfiniteQuery

promise로 반환되는 함수를 async, await을 대신해 주는 useQuery와 사용법은 비슷하다.

const { fetchNextPage } = useInfiniteQuery({
  queryKey: ['식별키', 변수]
  /* 식별키는 식별하기 위한 용도로 사용되고, 변수가 변할 때마다 새로 데이터를 불러온다. */
  queryFn: ({ 시작페이지번호 = 1 }) => 데이터를불러오는함수(시작페이지번호),
  /* 데이터를불러오는함수에서 시작페이지번호를 인수로 받아 첫 페이지가 설정되도록 설정한다. */
  getNextPageParam: (lastPage, allPages) => {
    return lastPage.page < lastPage.totalPages ? lastPage.page + 1 : undefined
  },
  /*
  1. 시작 페이지에서 다음 페이지로 이동할 때 이동할 규칙을 설정한다.
  2. console.log로 lastPage를 찍어보면, page, totalPages 등을 갖고 있다.
     page에 1을 더해 다음 페이지를 이동하도록 설정한다.
  3. fetchNextPage를 호출하여 설정한 규칙이 동작되도록 한다.
  */
})


  /* 데이터를 불러오는 함수는 다음과 같다. */
  const pb = new Pocketbase(주소)
  
  async function 데이터를불러오는함수(시작페이지번호) {
    const 데이터목록 = await pb.collection(콜렉션이름).getList(시작페이지번호, 페이지당출력될데이터개수);
    
    return 데이터목록;
  }