더북(TheBook)

이제 fetchNextPage, isFetchingNextPageArticles 컴포넌트의 Props로 설정해주세요.

screens/ArticlesScreen.tsx

(...)

function ArticlesScreen() {
  const {data, isFetchingNextPage, fetchNextPage} = 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}
      isFetchingNextPage={isFetchingNextPage}
      fetchNextPage={fetchNextPage}
    />
  );
}

(...)
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.