15.10.4 화면을 아래로 당겨서 새로고침하기

게시글을 작성하고 나서 항목을 갱신하는 것이 아니라 사용자가 인터랙션을 통하여 직접 새로고침하는 기능을 구현해봅시다. useInfiniteQuery의 refetch를 사용하면 됩니다.

screens/ArticlesScreen.tsx

(...)

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

  (...)

  return (
    <Articles
      articles={items}
      showWriteButton={!!user}
      isFetchingNextPage={isFetchingNextPage}
      fetchNextPage={fetchNextPage}
      refresh={refetch}
      isRefreshing={isFetching && !isFetchingNextPage}
    />
  );
}

(...)

refresh와 isFreshing이라는 Props를 새로 설정해줬는데요. isRefreshing의 조건은 요청이 진행 중인데, 다음 페이지에 대한 요청은 진행 중이지 않을 때입니다. 만약 !isFetchingNextPage 조건을 확인하지 않으면 다음 페이지를 불러오고 있을 때도 상단에 로딩 표시가 나타나게 됩니다.