2021/11/14 : simple-react-query에 캐싱기능 추가. Context API에 초기값 undefined 사용안하도록 수정

1. simple-react-query에 캐싱기능 추가

 

react-query의 기능 중 하나인 cache기능을 추가했다.

useQuery에서 데이터를 받아오면, QueryClient의 queryCache에 기억시키고,

cache가 있다면 강제 refetch하거나, cache시간이 만료되어 제거되었을때 뺴고는 기억된 값을 반환한다.

이제 simple-react-query를 사용하려면 캐싱여부상관없이 QueryClient를 Provider로 Context API사용을해서 내려야한다.

물론 useQuery에서의 캐싱은 자유다.

react-query의 캐싱이 default라면 simple-react-query는 cacheTime과 queryKeys를 넣어야 캐싱이 된다는 차이점이 있다.

 

원래는 캐싱기능을 넣지 않을 계획이었지만, 사용자의 뜻대로 캐싱기능을 사용할지말지를 선택하도록 하고 싶었다.

아직 darass프로젝트에는 적용해보지 않았다.

간단한 테스트를 통해 동작이 제대로 되는것은 확인했다.

 

다음은 Context API를 최적화해보고 싶다.

https://jungpaeng.tistory.com/72

 

 

https://github.com/zereight/simple-react-query/commit/78deadd52ec5a20d0c61798d15f34fcc9e257e77

feat: 캐싱 기능 추가 · zereight/simple-react-query@78deadd

https://github.com/zereight/simple-react-query/releases/tag/0.1.0

Release v0.1.0 · zereight/simple-react-query

 

하는김에 interface의 any를 제네릭으로 수정해주었다.

https://github.com/zereight/simple-react-query/commit/1e26eeb6f97d3054a4a7ef818d66900fa3227665

 

 

 

2. Context API에 초기값 undefined사용안하도록 수정

 

타입스크립트로 Context APi를 사용하다보니, createContext할때 초기값으로 undefined를 넣어주는일이 생겼었다.

타입을 넣어야 했기에...

export const UserContext = createContext<{
  user?: User;
  logout?: () => void;
  refetchUser?: () => void;
  isLoadingUserRequest: boolean;
  isSuccessUserRequest: boolean;
  refetchAccessToken?: () => void;
  accessToken?: string;
  setUser?: (user?: User) => void;
  isActiveAccessToken?: boolean;
  isUserFetched?: boolean;
}>({
  user: undefined,
  logout: undefined,
  refetchUser: undefined,
  isLoadingUserRequest: false,
  isSuccessUserRequest: false,
  refetchAccessToken: undefined,
  accessToken: undefined,
  setUser: undefined,
  isActiveAccessToken: undefined,
  isUserFetched: undefined
});

근데 아래처럼하니까 초기값없이 createContext에 타입을 줄 수 있었다.

타입단언은 남용하면안되지만, 이런경우엔 정말 편한것 같다.

export const UserContext = createContext(
  {} as {
    user?: User;
    logout: () => void;
    refetchUser: () => void;
    isLoadingUserRequest: boolean;
    isSuccessUserRequest: boolean;
    refetchAccessToken: () => void;
    accessToken?: string;
    setUser: (user?: User) => void;
    isActiveAccessToken: boolean;
    isUserFetched: boolean;
  }
);

 

https://github.com/woowacourse-teams/2021-darass/commit/401c7a45c3dc1d4c894947b8e821f945e1746efe

[FE][공통] 함수호출시 불필요하게 ?.() 문법 사용하던 부분 제거 (#789) · woowacourse-teams/2021-darass@401c