[TIL] TanStack Query v5

v5버전에 useInfiniteQuery 적용

import { useInfiniteQuery } from '@tanstack/react-query'

function Projects() {
  const fetchProjects = async ({ pageParam }) => {
    const res = await fetch('/api/projects?cursor=' + pageParam)
    return res.json()
  }

  const {
    data,
    error,
    fetchNextPage,
    hasNextPage,
    isFetching,
    isFetchingNextPage,
    status,
  } = useInfiniteQuery({
    queryKey: ['projects'],
    queryFn: fetchProjects,
    initialPageParam: 0,
    getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
  })

  return status === 'pending' ? (
    <p>Loading...</p>
  ) : status === 'error' ? (
    <p>Error: {error.message}</p>
  ) : (
    <>
      {data.pages.map((group, i) => (
        <React.Fragment key={i}>
          {group.data.map((project) => (
            <p key={project.id}>{project.name}</p>
          ))}
        </React.Fragment>
      ))}
      <div>
        <button
          onClick={() => fetchNextPage()}
          disabled={!hasNextPage || isFetchingNextPage}
        >
          {isFetchingNextPage
            ? 'Loading more...'
            : hasNextPage
              ? 'Load More'
              : 'Nothing more to load'}
        </button>
      </div>
      <div>{isFetching && !isFetchingNextPage ? 'Fetching...' : null}</div>
    </>
  )
}

일단 기술에 변화가 빨리빨리 일어나듯..최신버전에 react-query를 사용하려면 이름도 TanStack Query로 바뀌었고 문법적으로도 달라진게 살짝씩 있었다. 공부하다 보니까 그래도 최신것이 쓰기도 깔끔하게 바뀌고 불필요한 작업들을 한번에 축소 시킨 것 같아서 금방 적응은 할 수 있었다.
다만 구조는..살짝 헷갈리는게 있어서 그런지 어려웠다.

• data: 무한한 쿼리 데이터를 포함하는 객체 먼저 객체구조 할당으로 저장된 data에 값에는 DB에 저장된 값이 들어있는 객체이다. data를 페이지에 보여주기 위해 jsx절에다 사용할때는 map을 두번 돌려서 위에 data.pages에 return 하고 group을 통해 데이터를 뽑아와야 한다. 무한스크롤 이기 때문에 두개의 배열에 감싸져 있기 때문이다.
  또한 <React.Fragment key={i}> 이녀석은 빈태그를 명시적으로 선언해주는 부모 컴포넌트 역할을 해주는 녀석인데 저렇게 map을 돌릴 때 빈태그를 사용하면 key 값이나 속성을 넣을 수 없기 때문에 명시적으로 선언해서 부모 컴포넌트 역할을 수행해준다.