15.10.2 useInfiniteQuery 사용하기

리액트 쿼리에서 페이지네이션을 구현할 때는 useInfiniteQuery Hook을 사용합니다. 사용 방식은 useQuery와 비슷한데요. 차이점이 있다면 함수 부분에서 pageParam을 사용하고, 옵션 부분에서 getNextPageParam을 설정해줘야 합니다.

ArticlesScreen을 다음과 같이 수정해주세요.

screens/ArticlesScreen.tsx

import React, {useMemo} from 'react';
import {ActivityIndicator, StyleSheet} from 'react-native';
import {useInfiniteQuery} from 'react-query';
import {Article} from '../api/types';

(...)

function ArticlesScreen() {
  const {data} = useInfiniteQuery(
    'articles',
    ({pageParam}) => getArticles({cursor: pageParam}),
    {
       getNextPageParam: (lastPage) =>
        lastPage.length === 10 ? lastPage[lastPage.length - 1].id : undefined,
    },
  );

  const items = useMemo(() => {
    if (!data) {
      return null;
    }
    return ([] as Article[]).concat(...data.pages);
  }, [data]);
  const [user] = useUserState();

  if (!items) {
    return (
      <ActivityIndicator size="large" style={styles.spinner} color="black" />
    );
  }

  return <Articles articles={items} showWriteButton={!!user} />;
}

(...)