페이지마다 다른 쿼리 키가 필요하다. 즉 쿼리 key를 배열(Array)로 업데이트할 예정

다음, 이전 버튼을 눌렀을때 currentPage state가 변경되고, 그 currentPage의 값을 쿼리 key가 감지하여 새로운 페이지에서 새로운 데이터가 페치된다.

// 현재 페이지 상태값을 알려주는 state
const [currentPage, setCurrentPage] = useState(1);

// 쿼리 key를 의존성 배열로 바꾸고 currentPage를 추가하여, currentPage가 바뀔때마다 데이터를 불러온다.
const {data, isLoading, isError, error} = useQuery(["posts", currentPage], fetchPosts, {staleTime : 2000});

1. Api 함수도 바꿔줘야한다. ( 각각의 다른 페이지를 fetch 하도록 )

// page 번호를 인자로 받을 것이다.
async function fetchPosts(pageNum) {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts?_limit=10&_page=${pageNum}`
  );
  return response.json();
}

const {data, isLoading, isError, error} = useQuery(["posts", currentPage], ()=>fetchPosts(currentPage), {staleTime : 2000});

currentPage state를 fetchPosts함수의 인자로 넘겨준다.

<aside> ♻️ 쿼리 key를 배열로 바꾸면 의존성 배열로 바뀐다.

쿼리 key가 변경되면, useQuery가 새로운 쿼리를 생성하고 데이터 페칭을 실행한다.

</aside>

1. 버튼에 온클릭 함수를 만들어준다.

// 이전 버튼
<button disabled={currentPage <=1} onClick={() => {
          setCurrentPage(prev => prev-1);
        }}>
          Previous page
</button>

// 다음 버튼
<button disabled={currentPage >= maxPostPage} onClick={() => {
          setCurrentPage(prev => prev+1);
        }}>
          Next page
 </button>

페이지가 넘어가는 것은 확인!

하지만 페이지가 넘어갈때 isLoading에 보여주는 loading indicator가 보여져서 사용자 경험을 해친다.