리액트쿼리로 변경 후 질문있습니다.

안녕하세요 매번 제로초님의 강의로 많은 도움과 영감을 얻어 사내에서 사용하는 시스템을 적용중에 있습니다.

감사드립니다. 다름이 아니라

타입스크립트 버전인 리액트쿼리를 깃허브에 올려주셔서 적용해봤는데요

새로고침 시 기존에는 깜박임 없이 바로 로그인 이후 페이지로 연결되었던게 지금은 일시적으로 로그인 페이지에 접근했다가

메인페이지로 가더라구요 그래서 임시로 Loading아이콘을 보여주는 식으로 했는데 제가 잘못사용해서 그런건가요?

소스코드 첨부합니다.ㅜㅜ

import React, { useEffect, useState } from 'react';
import { dehydrate, QueryClient, useQuery } from 'react-query';
import User from '../interfaces/user';
import AppLayout from '../components/AppLayout';
import { loadMyInfoAPI } from '../apis/login';
import LoginLayout from '../components/login';
import { GetServerSidePropsContext } from 'next';
import axios, { AxiosError } from 'axios';
import Router from 'next/router';
import { Spin } from 'antd';

const Home = () => {
//const [ref, inView] = useInView();
const [loading, setLoading] = useState(true);
const { data: me } = useQuery<User>('user', loadMyInfoAPI);
useEffect(() => {
console.log('1111');
if (me) {
setLoading(false);
}
}, [me]);
return (
<div>
{loading == true ? (
<div className="loadingBar">
<Spin />
</div>
) : me ? (
<AppLayout />
) : (
<LoginLayout />
)}
</div>
);
};

export const getStaticProps = async () => {
const queryClient = new QueryClient();
await queryClient.prefetchInfiniteQuery('user', () => loadMyInfoAPI());
return {
props: {
dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))),
},
};
};

인프런 커뮤니티 질문&답변