Infinite Scroll

Infinite scroll 💡

• 응답 데이터에 다음 페이지에 대한 정보가 없을 경우
• 리턴값에 다음 페이지에 필요한 정보를 적어 리턴 한다.

	const reqData = async ({ pageParam = 1 }) => {
    	const { data } = await axios.get(`api주소`);
    	return {
      		result: data.results,
      		next: pageParam + 1
    		}
  		};

마지막 페이지에 대한 조건도 처리 해야 하나 생략함

const { data, error, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage, status } = useInfiniteQuery(
    [keyword],
    reqData,
    {
      getNextPageParam: (lastPage) => {
        if(lastPage && lastPage.next) {
          return lastPage.next;
        }
      }
    }
  )

그리고 명령형으로 if를 활용해 로딩중인 상태에 대한 컴포넌트를 보여주게 된다면 인피니트 스크롤이 제대로 작동하지 않았다...

	if(status === 'loading') return <Loading />