TanStack Queryでスクロール位置を復元したい
Q&A
Closed
解決したいこと
Next.jsでwebアプリケーションを作成しております。
TanStack Queryはデフォルトの動きでスクロール位置をキャッシュの情報から読み込んで復元させる働きがあります。しかし、その機能がうまく動作しません。アドバイスをいただけると幸いです。
該当のソースコード(一覧ページ)
import Path from "@/component/molecules/Path";
import { fetchPaths } from "@/services/paths";
import { PathType } from "@/types/data";
import { useRouter } from "next/router";
import { useQuery } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { useState } from "react";
import LoginIcon from "@/component/atoms/LoginIcon";
const PathList = () => {
const router = useRouter();
//URLから現在選択中のパスジャンルを格納
const currnetPathGenre = router.asPath.split("/").slice(-1)[0];
const { data, isLoading, isFetching } = useQuery({
staleTime: Infinity,
queryKey: ["path", { pathGenre: currnetPathGenre }],
queryFn: () => {
return fetchPaths(currnetPathGenre);
},
cacheTime: Infinity,
});
const pathList = data ?? [];
return (
<>
<ReactQueryDevtools initialIsOpen={true} />
{
<div className="flex flex-wrap p-1">
{!isLoading
? pathList.map((path: PathType) => (
<Path key={path.id} path={path} />
))
: ""}
</div>
}
</>
);
};
export default PathList;
一覧ページ→ <Path key={path.id} path={path} />に遷移し、再度一覧ページへ遷移すると、スクロール位置が復元しているはずなのですが、スクロール位置が一番上まで戻ってしまいます。
0