안녕하세요 강의 들으면서 제로초님 github(front-rq폴더) 보고 react-qeury로 진행하고 있는데요 로그인 페이지를 보면 fetcher로 유저정보 요청하고 로그인 mutation 요청 성공시 refetchQueries로 'user'라는 키값의 요청을 다시 보내는 것 같습니다.  이후 다른 컴포넌트나 페이지에서도 그냥  const { data: myData } = useQuery('user', () => fetcher({ queryKey: '/api/users' })); 이런식으로 유저정보를 가지고 오는 것 같은데 궁금한 것은  아직 강의 뒷부분을 다 안들어서 그런지 몰라도 staleTime이나 cacheTime을 설정하는 코드 또는 강의에서 말씀해주신 것 처럼 fetcher를 여러개 둬서 유저정보를 비동기 요청이 아니라 전역 데이터로 관리하는 로직도 없는 것 같습니다. 별도의 설정없이 /api/users 요청을 useQuery로 계속 받아온 다면 react-query 라이브러리를 사용하는 장점이 없는 것 같은데 제가 놓치고 있는 부분이 있는건 아닌지 혹시 react-query 사용했을 때 api/users 같은 유저정보를 받아오는 server state를 관리하는 좋은 방법은 무엇일지 궁금합니다. (cacheTime을 설정하거나 전역 데이터를 저장하는 fetcher를 두거나 아님 localStorage 같은 곳에 저장하거나 등등.. redux 강의 들을땐 그냥 리덕스 스토어에 저장해두고 useSelector로 가져온 거 같은데 react-query 나 SWR은 요부분이 감이 안잡히네요 ㅠ)    

다른 질문 들도 보다가 궁금한 점이 생겨 여쭤봅니다. 프로젝트에서 내에서 상태관리를 redux로 하고 server에서 데이터 패칭하는 부분을 (공부해 보니 server state라고 부르더군요) react-query(또는 swr)로 사용하려는 경우 설정을 어떻게 해야하나 궁금해서 검색해봤는데 마땅한 자료가 없어서 질문드려요 CRA기준으로 index.js에 import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; import reducer from "./reducer"; import { Provider } from "react-redux"; import { configureStore } from "@reduxjs/toolkit"; import { Global } from "@emotion/react"; import { GlobalStyle } from "./index.style"; import { QueryClientProvider, QueryClient } from "react-query"; const store = configureStore({ reducer }); const queryClient = new QueryClient(); ReactDOM.render(   <Provider store={store}>     <QueryClientProvider client={queryClient}>       <App />       <Global styles={GlobalStyle} />     </QueryClientProvider>   </Provider>,   document.getElementById("root") ); 이런식으로 사용해서 reducer 함수 정의하고 각 컴포넌트에서 queryClient를 import해서 사용하는 건가요? 제로초님 강의 들으면서 react-query를 이제 막 공부하고 있는데 react-query가 내부적으로 contextAPI 사용한다고 알고있는데 redux랑 contextAPI를 같이 쓴다는게 정확히 감이 안잡히네요  제가 잘못알고 있는 부분이나 공부해야할 키워드를 알려주시면 감사하겠습니다.

안녕하세요 매번 제로초님의 강의로 많은 도움과 영감을 얻어 사내에서 사용하는 시스템을 적용중에 있습니다.   감사드립니다. 다름이 아니라   타입스크립트 버전인 리액트쿼리를 깃허브에 올려주셔서 적용해봤는데요   새로고침 시 기존에는 깜박임 없이 바로 로그인 이후 페이지로 연결되었던게 지금은 일시적으로 로그인 페이지에 접근했다가   메인페이지로 가더라구요 그래서 임시로 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))), }, }; };