React-Queryの使用

久しぶりに字を書きました.
この間、私はずっとホームページを作って、会社の課題の典型を見ていました.
今回の課題の選考を行うと,使用したことのない技術を用いて書く.
react-queryを使いたかったのですが、機会がなかったので今回の利用を延期しました.
今回はReact-queryとNextですjsを併用しました.

useQuery

import { useQuery } from "react-query";

const {isLoading, error, data} = useQuery("queryKey", fetchFunc);

/// fetchFunc
async function fetchFunc () {
	const response = await fetch(API_ENDPOINT);
	
	return response;
}

   data,
   dataUpdatedAt,
   error,
   errorUpdatedAt,
   failureCount,
   isError,
   isFetched,
   isFetchedAfterMount,
   isFetching,
   isIdle,
   isLoading,
   isLoadingError,
   isPlaceholderData,
   isPreviousData,
   isRefetchError,
   isRefetching,
   isStale,
   isSuccess,
   refetch,
   remove,
   status,

データのAPI Endpointと条件を入力するだけで、上記の様々な状態を自動的に取得して取得できます.
主にisLoading, error, dataの価格で.
今回は次のjsと併用する場合は、fetchFuncとcustom hookを新規作成する方法を使用します.

/// fetchFunc
const fetchFunc = async () => {
  const response = await (await fetch(API_ENDPOINT)).json();

  return fetchFunc;
};

/// Custom Hook
const useFetch = () => {
  return useQuery("fetch", async () => await fetchFunc(), {
    refetchOnWindowFocus: false,
    refetchOnMount: false,
    refetchOnReconnect: false,
  });
};


/// App.js
import {useFetch} from './'

const {isLoading, error, data} = useFetch();

useFetchにはたくさんのものがあります.これは私のシャベルの跡です.
データパッチ後、構成部品のステータスが変更されると、再構築が続行されます.
ChromeDevtoolsを押してからブラウザを押すと、データが再腐食され、気が狂います.
そこで検索してみると、useQueryに複数の条件を追加できることがわかりました.

   cacheTime,
   enabled,
   initialData,
   initialDataUpdatedAt
   isDataEqual,
   keepPreviousData,
   meta,
   notifyOnChangeProps,
   notifyOnChangePropsExclusions,
   onError,
   onSettled,
   onSuccess,
   placeholderData,
   queryKeyHashFn,
   refetchInterval,
   refetchIntervalInBackground,
   refetchOnMount,
   refetchOnReconnect,
   refetchOnWindowFocus,
   retry,
   retryOnMount,
   retryDelay,
   select,
   staleTime,
   structuralSharing,
   suspense,
   useErrorBoundary,

広大である.設定の詳細は、直接検索してください
上記の設定は次のとおりです.

	refetchOnWindowFocus: false, /// 브라우저를 다시 눌렀을때 refetch 막기
    refetchOnMount: false, /// Mount 됐을 때 refetch 막기
    refetchOnReconnect: false, /// reconnect 됐을 때 막기
      아무튼 막기

いずれにしても、refectを続ける話題については、止められるものは止められた.
しかし問題は解決しなかったため、状態変更を最小限に抑える作業が行われた.

useQueryパラメータ転送

///App.js
const {isLoading, error, data} = useFetch(parameter);

///fetchFunc
const fetchFunc = async (parameter) => {
  const response = await (await fetch(API_ENDPOINT)).json();

  return fetchFunc;
};

///useFetch
const useFetch = (ctx: string) => {
  return useQuery(["fetch", ctx], ({ queryKey }) => fetchFunc(queryKey[1]), {
    refetchOnWindowFocus: false,
    refetchOnMount: false,
    refetchOnReconnect: false,
    
  });
};

parameterを渡すと、ユーザQueryは配列にqueryKeyを包み[1]に入れ、fetchFuncにqueryKeyを渡す.