진경 기록 공간

✔️useInfiniteQuery

fetch 함수

const getPosts = async () => {
    const response = await axios
      .get(
        'https://kdt.frontend.4th.programmers.co.kr:5011/posts/channel/64f843de36f4f3110a635033',
        {
          params: {
            limit: 5,
            offset: 0,
          },
        }
      )
      .then((res) => res.data)
    console.log('getposts 확인', response)
    return response
  }

useInfiniteQuery 사용 부분

const InfiniteScrollComponent = () => {
    const { data, hasNextPage, fetchNextPage } = useInfiniteQuery(
      ['posts'],
      getPosts,
      {
        getNextPageParam: (lastPage, allPages) => {
          console.log('page', lastPage, allPages)
        },
      }
    )
    // console.log(data, hasNextPage)

    return (
      <div>
        <ul>
          {data?.pages[0].map((page: any) => (
            <li>{page.title}</li>
          ))}
        </ul>
        {data && data.pages.length > 0 && (
          <button onClick={() => fetchNextPage()}>페이지 불러오기</button>
        )}
      </div>
    )
  }

• response

• data

• lastPage

• allPages