Guides&Concepts_(Paginated / Lagged Queries)

Paginated Queries

Paginated Queries를 사용하면, API에서 반환된 데이터가 많은 경우, 페이지단위로 데이터를 가져와 사용자경험을 좋게 많들 수 있다.

여기서 주의해야할점은 query keys에 포함된 state(아래 예시에서는 pageNumber)는 기본적으로 변경될때마다 query를 refetch하므로 페이지이동이 발생할때마다 깜빡임이 발생하는둥 사용자경험측면에서 안좋을 수 있다.

이때 해결할 수 있는 방법은 keepPreviousData옵션을 사용하는 것이다.

 

keepPreviousData

keepPreviousData옵션을사용하면 새로운 데이터를 받아올때까지, 이전에 성공적으로 받은 데이터를 이용한다. 그리고 새로운 데이터가 성공적으로 받아지면 background에서 교체되므로 사용자는 데이터가 새로 받아지는지도 모르게 쾌적한 라우팅을 경험할 수 있다.

isPreviousData

isPreviousData옵션을 사용하면 cach된 데이터를 사용중인지 새로운 데이터를 사용중인지 확인가능하다. 

 

import { useQuery } from "react-query";
import axios from "axios";
import { useState } from "react";


const fetchColors = (pageNumber) => {
	return axios.get(`http://localhost:4000/colors?_limit=2&_page=${pageNumber}`);
};

export default function PaginatedQueriespage() {
	const [pageNumber, setPageNumber] = useState(1);
	const { isLoading, isError, isFetching, isPreviousData, error, data } = useQuery(['colors', pageNumber], () => fetchColors(pageNumber), {
		keepPreviousData: true,
	});

	if (isLoading) {
		return <h2>Loading...</h2>;
	}
	if (isError) {
		return <h2>{error.message}</h2>;
	}
	return (
		<>
			<div>
				{data?.data.map((color) => {
					return (
						<div key={color.id}>
							<h2>
								{color.id}. {color.label}
							</h2>
						</div>
					);
				})}
			</div>
			<div>
				<button onClick={() => setPageNumber((page) => page - 1)}>Prev Page</button>
				<button onClick={() => setPageNumber((page) => page + 1)}>Next Page</button>
			</div>
			{isFetching && 'Loading'}
			{!isPreviousData && '현시점에는 이전데이터를 사용하고있음'}
		</>
	);
}