useQueryでpagenationを作る

新しいqueryをfetchしている間、前回のdataを表示し続ける

通常はこの間にisFetchingとかになるが、このptionを指定するとならない

page indexを変えてpagenationする時とかにUXの体験が良くなる

ページを行ったり来たりする時に、毎回loadingとなるのはダルいから

code:ts

function Todos() {

const fetchProjects = (page = 0) =>

fetch('/api/projects?page=' + page).then(res => res.json());

keepPreviousData: true

});

if(isLoading || isPreviousData) {

return <div>loading...</div>

}

return (

<div>

<span>Current Page: {page + 1}</span>

<button onClick={() => setPage(old => old - 1)}>Prev</button>

<button onClick={() => setPage(old => old + 1)}>Next</button>

</div>

);

}

ポイント

pageのindexは、useStateで別途用意する

そのstateは、keyに指定する

stateが更新されれば、自動的にfetchされる

そのため、「Next」buttonのonClickにわたす関数はstateを更新する関数