[React Query] 인증

  const queryClient = useQueryClient();
  const { data: user } = useQuery(queryKeys.user, () => getUser(user));

유저 정보를 가져오려고 할 때 useQuery로 불러오려고 하면 애초에 유저가 정의되지 않았기에 못 가져옴

  function updateUser(newUser: User): void {
    queryClient.setQueryData(queryKeys.user, newUser);
  }

쿼리 클라이언트(캐시)에 로그인할 때 받아온 user 값을 저장해줌

  function clearUser() {
    queryClient.setQueryData(queryKeys.user, null);
  }

로그아웃 시 클라이언트(캐시)에서 유저 키를 제거함

export function useUser(): UseUser {
  const queryClient = useQueryClient();
  const { data: user } = useQuery(queryKeys.user, () => getUser(user), {
    initialData: getStoredUser,
    onSuccess: (received: User | null) => {
      if (!received) {
        clearStoredUser();
      } else {
        setStoredUser(received);
      }
    },
  });

initialData => 로컬 스토리지에 저장한 값을 useQuery가 확인, 이 함수는 쿼리가 초기화될 때 한 번만 실행되어 귀중한 메모리 및/또는 CPU를 절약합니다.