[SWR] useSWR에서 fetching data를 caching 하는 조건

이번 프로젝트 기능 중에 등록된 임직원을 불러오는 기능과 해당 임직원의 가족정보를 불러오는 기능이 있다. SWR을 통해서 데이터를 fetcing하는데 이상한 부분을 발견했다.

// 작업 대상자를 불러오는 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 data가 있다. useFamilies는 가족정보를 불러오는 hook이고, 현재 1개의 mock 데이터가 있다. 2개의 정보는 분명히 다른 정보이고 호출하는 end-point도 target은 /targets, families는 /families로 분명히 다르다!

그런데 useTargets를 통해 먼저 2개의 대상자 정보를 받아오고 나서, 가족정보 리스트로 페이지를 이동하면 분명히 db에는 1개의 데이터만 있는데, useTargets에서 받아왔던 2명의 정보를 표시해준다.

useTargets를 통해서 캐싱된 데이터를 표시해주는 것이다. 개발자도구 network를 봐도 targets 이후로 families에 대한 response가 없다. SWR에서 같은 end-point 인 경우에는 최초 호출 이후에는 캐싱된 데이터를 반환해주는 것을 알고 있었지만, "같은 end-point"의 정확한 정의를 간과한 것 이다.

axios instance 상에서 각각 다른 URL을 넣어주었기 때문에 다른 end-point로 생각했는데 아무래도. SWR 에서 말하는 같은 end-point란 fetcher 함수에서의 값을 의미하는 듯 하다.

axios instance 상에서 넣어줬던 url을 fetcher로 옮겨서 코드를 재작성하니, 각각 별도로 잘 작동한다.