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

Question

안녕하세요 매번 제로초님의 강의로 많은 도움과 영감을 얻어 사내에서 사용하는 시스템을 적용중에 있습니다. 감사드립니다. 다름이 아니라 타입스크립트 버전인 리액트쿼리를 깃허브에 올려주셔서 적용해봤는데요 새로고침 시 기존에는 깜박임 없이 바로 로그인 이후 페이지로 연결되었던게 지금은 일시적으로 로그인 페이지에 접근했다가 메인페이지로 가더라구요 그래서 임시로 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 /> ) : me ? ( < AppLayout /> ) : ( < LoginLayout /> ) } ); }; export const getStaticProps = async () => { const queryClient = new QueryClient (); await queryClient . prefetchInfiniteQuery ( 'user' , () => loadMyInfoAPI ()); return { props : { dehydratedState : JSON . parse ( JSON . stringify ( dehydrate ( queryClient ))), }, }; };

제로초(조현영) · Answer

프론트 서버와 백엔드 서버가 분리된 상황이시죠? getStaticProps는 서버에서 실행됩니다. 프론트 서버에서는 브라우저에서 보내는 쿠키가 없습니다. 그래서 제가 강좌에서 axios.defaults.headers.cookie 이런 것을 넣은 것입니다. 브라우저 -> 프론트 서버로 쿠키를 보내는 거라고 보시면 됩니다.