-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
리액트쿼리로 변경 후 질문있습니다.
21.09.29 12:49 작성 조회수 270
0
안녕하세요 매번 제로초님의 강의로 많은 도움과 영감을 얻어 사내에서 사용하는 시스템을 적용중에 있습니다.
감사드립니다. 다름이 아니라
타입스크립트 버전인 리액트쿼리를 깃허브에 올려주셔서 적용해봤는데요
새로고침 시 기존에는 깜박임 없이 바로 로그인 이후 페이지로 연결되었던게 지금은 일시적으로 로그인 페이지에 접근했다가
메인페이지로 가더라구요 그래서 임시로 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))),
},
};
};
답변을 작성해보세요.
0
조현영
지식공유자2021.09.29
프론트 서버와 백엔드 서버가 분리된 상황이시죠?
getStaticProps는 서버에서 실행됩니다. 프론트 서버에서는 브라우저에서 보내는 쿠키가 없습니다.
그래서 제가 강좌에서 axios.defaults.headers.cookie 이런 것을 넣은 것입니다. 브라우저 -> 프론트 서버로 쿠키를 보내는 거라고 보시면 됩니다.
답변 1