💬
useSWRImmutableとuseQueryの挙動の違いについて
はじめに
firestoreのqueryをできるだけ安く済ませたくて、ReactQueryでuseSWRImmutableみたいなことができないか検証したが挫折した。
export default function Page() {
const [params, setParams] = useState("1");
// こっちか
useRQ(params);
// こっちの比較
useSWI(params)
return (
<FlexPageAbout>
<button onClick={() => setParams("1")}>button1</Button>
<button onClick={() => setParams("2")}>button2</Button>
<button onClick={() => setParams("3")}>button3</Button>
<button onClick={() => setParams("4")}>button4</Button>
</FlexPageAbout>
);
}
const useRQ = (params: string) => {
console.log("params", params);
return useQuery(["key", { params }], () => fetcher(params),
queries: {
enabled: false,
cacheTime: Infinity,
refetchOnWindowFocus: false,
refetchOnMount: false,
refetchOnReconnect: false,
refetchInterval: Infinity,
refetchIntervalInBackground: false,
retryDelay: Infinity,
retryOnMount: false,
retry: false,
staleTime: Infinity,
keepPreviousData: true,
}
};
const useSWI = (params: string) => {
console.log("params", params);
return useSWRImmutable("key" + params, () => fetcher(params));
};
const fetcher = (params: string ) => {
console.log(params);
return "";
};
uswQuery + optionsはページ遷移して戻ってくるとrefetchされるが、useSWRImmutableの方はrefetchされない。
Discussion