［SWR］USSWRキャッシュからデータを取得する条件

本プロジェクトの機能には、登録済みの社員を招待する機能と、その社員を招待する家族情報の機能があります.SWRでデータを包囲攻撃し、奇妙な点を発見した.

// 작업 대상자를 불러오는 hooks

const fetcher = async () => {
  const { data } = await targetsApi.readTargets(); 
  return data;
}; // http://localhost:3001/targets를 호출함


export const useTargets = () => {
  const { data, error, isValidating, mutate } = useSWR<ITargets[], Error>(
    '/',
    fetcher,
    { use: [logger] }
  );
  return {
    targets: data,
    error,
    isLoading: !data && !error,
    isValidating,
    mutate,
  };
};

// 부양가족의 정보를 불러오는 hooks

const fetcher = async () => {
  const { data } = await familiesApi.readFamilies();
  return data;
}; // http://localhost:3001/families를 호출함

export const useFamilies = () => {
  const { data, error, isValidating, mutate } = useSWR<IFamily[], Error>(
    `/`,
    fetcher,
    { use: [logger] }
  );
  return {
    families: data,
    error,
    isLoading: !data && !error,
    isValidating,
    mutate,
  };
};

useTargetsは、ターゲットを担持するhookである.json-serverには2つのmockデータがあります.useFamiliesは家庭情報を載せたhookで、現在mockデータがあります.2つの情報は明らかに異なる情報であり、呼び出されたend-point図targetは/targetsであり、ファミリーは/familiesであり、明らかに異なる!
しかし、useTargetsによって最初に2つのターゲット情報が受信され、その後、ページがホーム情報リストに移動されると、dbにはuseTargetsで受信した2つの情報が1つしか表示されないことは明らかである.useTargetsでキャッシュされたデータが表示されます.開発者ツールネットワークを表示しても、ターゲットの後に家庭への応答はありません.SWRでは、同じend-pointであれば、キャッシュを返すデータは最初の呼び出し後に知られるが、「同じエンドポイント」の正確な定義は無視される.axios例にはそれぞれ異なるURLが加えられているので、異なるend-pointと考えられる.SWRに記載されている同じend-pointは、fetcher関数の値を意味するようである.axiosインスタンスに格納されたurlをキャプチャに移動し、コードを再記述し、各urlが単独で正常に動作します.