useSWRImmutableとuseQueryの挙動の違いについて

9948 ワード

はじめに

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されない。