SWRを知る!

SWRとは

リモートデータ取得のためのCustom Hook npmモジュール
USSWR(key,fetcher)=>fetcher関数グローバル管理keyに入るデータ
他のタブからswrタブに戻ると、最新のステータスを維持するためにリクエストを送信できます.
リクエストを送信せずに指定した時間内にキャッシュ値からリクエストを取得できます.

Login.tsx

import useSWR from 'swr';
import fetcher from '@utils/fetcher';

const LogIn = () => {
    const {data, error, mutate} = useSWR(key, fetcher, options);
    
        const onSubmit = useCallback((e) => {
       
        axios.post("url",
        {
            data
        },{
            withCredentials: true,
        })
        .then((response) => {
            mutate(response.data, true) 
        })
     
    },[]);

};

const {data, error, mutate} = useSWR(key, fetcher, options);
SWRのキーがfetcherに渡されると、fetcherの戻り値がデータに含まれ、ERRORに対してerrorに渡される.
withCredentials: true
例えば、フロントエンドサーバ3090のバックエンドサーバが3095(サーバURLが異なる場合)である場合、サーバはクライアントに対してCookieを作成することができず、クライアントからサーバにCookieを送信することもできない
Cookieは基本的に同じソースでHTTP通信を行うときに自動的に入る形式なので.
したがって、要求応答にCookieを含めるには、withCrementures:trueを設定するだけです.
mutate(response.data, false)
データの更新を待つのではなく、ユーザーがデータを登録、変更するときに更新を画面に出力するために使用します(ローカルデータをすぐに更新します).
例えば、postで更新したデータを再び返すので、再更新する必要はありませんので、オプションにfalseを入れたり、使用を更新しなくてもいいなど、利用率の高い関数です
ex)Instagramの「いいね」をクリックすると、既存のデータをMutateでレンダリングしてから、要求データではなくサーバに表示を要求できます.

fetcher.tsx

import axios from 'axios';

const fetcher = (url: string) =>
  axios
    .get(url, {
      withCredentials: true,
    })
    .then((response) => response.data);

export default fetcher;

ここでurlはキー値であり、この関数の戻り値はSWRのデータの構造である
それ以外にも、とても役に立つ選択肢がたくさんありますので、公式ドキュメントを見てみましょう.
https://swr.vercel.app/ko/docs/options
私は李徳思が嫌いです.