#usequery

검색 모달 창에서 검색할 때 리액트 쿼리 사용 여부

안녕하세요, 현재 제가 검색 모달 창에서 텍스트를 입력하면 검색하는 작업을 하고 있습니다. 보통 useQuery 훅은 페이지 마다 데이터를 불러오는 경우 많이 사용하는 걸로 알고 있습니다. 제가 작업하는 검색 모달은 사용자가 검색 창을 누르면 검색 모달이 나와서 검색하는 기능이라 여기서도 React-Query에서 제공하는 useQuery를 쓰는지 궁금합니다!

invalidateQueries가 실행되지 않습니다.

mutate 함수 내부에서 onSuccess:()=>{ queryClient.invalidateQueries({ queryKey: ["USERINFO"] }) navigate("/") } 를 실행하는데 mutate함수는 잘 실행되고 이후에 경로 이동도 잘되는데 useQuery훅 네트워크 요청 자체가 가질 않습니다. refetchType, refetchOnMount, enabled, refetchQueries, prefetchQueries등등 다 시도해 봤는데 안됩니다..! 거의 100번 정도 테스트해봤을때 2번정도? 우연치않게 됐던거같은데 이때 빼고는 전부 안됐습니다ㅜㅜ 어떻게 해야할까요??

Next.js 와 데이터 패칭 관련 React Query SSR

안녕하세요. Next.js 13.4 버전으로 개발중인 주니어 개발자입니다. SSR 관련해서 처음 접하고 개발중인데 Data Fetching 부분에서 조금 이론과 실무 모두 조금 막혀있습니다. 다름이 아니라 서버 컴포넌트/클라이언트 컴포넌트 이렇게 2개로 나뉘는데 accessToken 사용 떄문에 axios를 사용중입니다. 그래서 마이페이지 를 구현중에 데이터를 불러와서 뿌려주는 부분을 구현중인데 클라이언트 컴포넌트에서 useEffect 안에서 불러오면 한 박자 느리게 데이터가 뿌려져서 이질감이 있습니다. 그래서 서버컴포넌트에서 prefetch 해서 react query 사용해서 hydration 방식으로 직렬화 해서 내려주고 클라이언트 컴포넌트에서 const { data } = useQuery(['querykey'], () => queryFn) 형태로 사용해서 뿌려주고싶은데 여기서 이 'data'는 useState에 할당을 못하나요? 마이페이지 데이터 수정시에는 어떻게 활용을 해야되는건지 잘 모르겠습니다...

안녕하세요.. 정말 이것저것 다 해봤는데 안되네요 ㅠ

안녕하세요. 리액트와 리액트 쿼리를 이용해 프로젝트를 진행 중 입니다. 저는 일단. src/hooks/useProduct.jsx 라는 커스텀 훅 을 만들었습니다. 제 계획은 1. 맨 처음 최상단 Home.jsx 에서 useProduct 라는 커스텀 훅 호출 2. 자식컴포넌트에 data를 전달 3. Search.jsx에서 받은 filter값으로 커스텀 훅 안의 query 재실행 4. 바뀐 상태는 Home.jsx 가 다시 받고 자식 컴포넌트에게 전달. 1~3까지는 콘솔찍어가면서 잘 되는데 4.는 되지 않습니다. (쿼리 데이터가 바뀌어도 4이 재 실행이 안됨..) ㅠㅠㅠㅠㅠㅠㅠ 쿼리 옵션도 줘보고 전역 상태도 만들어보고 이것저것 다 해봤는데 ㅠㅠ 혹시 아시는분 계신가요..? 어떠한 답변도 정말 감사히 받겠습니다 간략 코드첨부) Home.jsx const Home = ()=>{ const { data, error, isLoading } = useProduct(); return ( <Search /> <List data={data?.product} /> ); }; export default Home; Search.jsx const Search = () => { ```일부코드생략``` const { updateQuery } = useProduct (); const handleSubmit = () => { const searchData = { productId }; updateQuery(productId); }; } return( ```일부코드생략``` <button onClick={handleSubmit}> 조회 </button> ) } export default Search; useProduct.jsx const useProduct = () => { const [queryData, setQueryData] = useState(); const { data, error, isLoading } = useQuery({ queryKey: ["product", queryData], queryFn: () => fetchProduct(queryData), }); const updateFilters = (queryData) => { setQueryData(() => (queryData); }; return { data, error, isLoading, updateQuery , }; export default useProduct ;

react-query,

안녕하세요. 리액트쿼리 최신v5를 사용하면서 어려움에 처해 글을 남기게 되었습니다. 제가 만든 코드는 아래와 같습니다. Home.jsx (맨처음 데이터를 받아서 List에 뿌려주는 역할) const { data, error, isLoading } = useFilteredApartmentData(); console.log('home data',data) <List data={data.speechCommands} /> Search.jsx (사용자 검색) const { updateFilters } = useFilteredApartmentData(); //커스텀훅 const handleSubmit = (filter) => { updateFilters(filter); }; useFilteredApartmentData .jsx (훅) const useFilteredApartmentData = () => { const [filters, setFilters] = useState({ skip: 0, take: 15 }); const { data, error, isLoading } = useQuery({ queryKey: ["apartments", filters], queryFn: () => fetchFilteredApartmentData(filters), placeholderData: keepPreviousData, enabled: !!filters, }); console.log("훅안에서 새로운데이터", data); const updateFilters = (newFilters) => { console.log(newFilters); setFilters((prevFilters) => ({ ...prevFilters, ...newFilters, })); }; return { data, error, isLoading, updateFilters, }; }; export default useFilteredApartmentData; 저의 계획은 search.jsx에서 사용자의 검색을 받으면 훅의 updateFilters 를 실행시키고 useState가 바뀌니 useQuery의 재 시작과 함께 새로운 데이터를 받아 List에서 새로운 데이터를 뿌리는 것이었습니다. 그런데 console.log("훅안에서 새로운데이터", data); 이 부분도 새로운 데이터로 잘 찍히는데 문제는 Home.jsx 에서 console.log('home data',data) 이부분은 안찍히네요 결과적으로, 리스트의 변동이 없습니다. 혹시 아시는분 답변주시면 정말 감사하겠습니다 ㅠㅠ

리액트쿼리 데이터 리패칭 이렇게 하는거 아닌가요?

home.jsx const { data, error, isLoading } = useFilteredApartmentData(); <List data={data.result} /> 훅.jsx const useFilteredApartmentData = () => { const queryClient = useQueryClient(); const [filters, setFilters] = useState({ skip: 0, take: 15 }); const { data, error, isLoading } = useQuery({ queryKey: ["aaa", filters], queryFn: () => fetchFilteredApartmentData(filters), placeholderData: keepPreviousData, enabled: !!filters, }); const mutation = useMutation({ mutationFn: (filter) => { fetchFilteredApartmentData(filter); }, onSuccess: () => { queryClient.invalidateQueries({ queryKey: ["aaa", filters] }); }, }); const updateFilters = (newFilters) => { console.log(newFilters); setFilters(newFilters); mutation.mutate(newFilters); }; return { data, error, isLoading, updateFilters, }; }; export default useFilteredApartmentData; 여기서 처음에 데이터 패칭은 잘 이루어 지는데 fillter가 바뀌면 훅의 updateFilters 가 동작하여 새로운 데이터를 list에 다시 뿌리려고하는데 화면에 변화가 없습니다 ㅜㅜ 이렇게 하는거 아닌가요??

react-query로 이미지를 가져올 때, 이미지가 깜빡거리는 문제를 해결하고 싶어요.

React 프로젝트에서 차량 데이터 목록(차량 모델 사진, 차량명, ....등)을 보여주는 웹 프로젝트를 진행하고 있습니다. 차량 데이터 목록 화면에서 react-query를 통해 가져온 데이터는 (예시 데이터) const data = [{id: number, car_name: string, model_name, car_model_image: number...}, {.....} ] 이런식으로 가져와서 map을 통해 CarCard 컴포넌트에 데이터를 props로 보내어 현재 출력하고 있습니다. 여기서 이미지 같은 경우는 백엔드에서 차량 모델 이미지를 가져오는 api를 따로 만들어놓아서, props로 전달받은 car_model_image 즉, 차량 모델 이미지의 id를 통해서 차량 모델 이미지 api에 데이터를 요청해서 이미지를 출력하고 있습니다. 이때. 페이지를 전환하거나, 한 페이지에서 아무동작을 하지 않아도 게속 이미지가 깜빡거리면서 재렌더링이 되고, 계속 무한정으로 이미지를 호출하는 문제가 발생하였습니다. map을 통해 CarCard를 호출하고 CarCard 안에서 이미지를 호출함에 따라서 계속 이미지가 깜빡깜빡 거리는 것 같은데, 컴포넌트 안에서 이미지를 호출할 때 어떻게 하면 무한정으로 이미지를 불러오지 않도록 하고 깜빡거림을 없앨 수 있을까요 ?...어떻게 해결해야 할지 감이 안 잡혀요.... //차량 목록 페이지 한 부분 ... const { data } = useGetCarList(); //useQuery를 통해 서버에서 데이터 전달받음 // const data = [{id: number, car_name: string, model_name, car_model_image: number...}, {.....} ] 이런식 .... return ( <div> data.map((data: CarData) => { return ( <Carcard ascCarData={data} key={Math.random()} handleClick={() => handleClick(data)} isActive={true} /> ); }) </div> ) //Carcard 컴포넌트 const { data: carImage } = useGetCarModeImage(ascCarData.car_model_image); // 이미지 데이터 가져오기

React-query로 실시간 데이터 반영

리액트를 통해 버스 위치 데이터를 받아서 버스 위치를 실시간으로 보여주는 앱을 개발하고 있는데요, 리액트 쿼리를 활용해 10초마다 refetch하여 데이터를 업데이트하려고 하는데 계속 자동으로 캐싱되어 처음 가져온 데이터만 10초마다 가져오네요 ㅠ (개발자 도구에서 disable cache를 하면 잘 가져옴) 새로고침를 해도 마찬가지 입니다. const { data, isLoading, error, refetch } = useQuery(["busPos"], getData, { refetchIntervalInBackground: true, refetchInterval: 10000, cacheTime: 10000, }); 어떻게 하면 데이터를 잘 업데이트할 수 있을까요?? Open api 사용 중인데 요청 헤더에 캐시 컨트롤을 노 캐시로 하면 cors 에러가 뜹니다 ㅠ

리액트 쿼리 에러 핸들링 이슈

react query를 활용한 에러 핸들링이 안돼서 질문 올립니다... //mainpage.tsx const { data, refetch, isFetching } = FetchData(url); const handleSearch = () => { refetch(); } <QueryErrorResetBoundary> {({ reset }) => ( <ErrorBoundary onReset={reset} FallbackComponent={FallbackUI}> {resultVisible ? ( <Result searchData={searchData} isFetching={isFetching} /> ) : ( <EmptyResult /> )} </ErrorBoundary> )} </QueryErrorResetBoundary> react-error-boundary 라이브러리를 이용해 ErrorBoundary 컴포넌트를 가져왔습니다. ErrorBoundary 하위 컴포넌트 내에서 에러가 발생하면 FallbackComponent의 FallbackUI 컴포넌트가 렌더링 되도록 했습니다. //FallbackUI 컴포넌트 //에러가 발생히면 이 컴포넌트가 렌더링되어야합니다. const FallbackUI = ({ error, resetErrorBoundary }) => { return ( <div> <span>{error.message}...</span> <button onclick={resetErrorBoundary} /> 돌아가기 버튼 </div> ); }; export default FallbackUI; FallbackUI 에서 QueryErrorResetBoundary 에서 제공하는 resetErrorBoundary를 받아와 에러 발생 후 '돌아가기 버튼'을 클릭하면 쿼리오류를 처리하고 리셋해주도록 구현했습니다. //url을 파라미터값으로 받아와 api호출하는 함수 //위에 있는 mainpage.tsx 에서 사용하는 함수입니다. const FetchData = (url: string) => { const { error, data, refetch, isFetching } = useQuery({ queryKey: ["repoData"], queryFn: async () => { const res = await axios.get(url); console.log(res.data); return res.data; }, refetchOnWindowFocus: false, enabled: false, }); return { error, data, refetch, isFetching }; }; 리액트 쿼리를 이용해 api를 호출하는 함수입니다. //main.tsx const queryClient = new QueryClient({ defaultOptions: { queries: { retry: 0, throwOnError: true, }, }, }); ReactDOM.createRoot(document.getElementById("root")!).render( <React.StrictMode> <QueryClientProvider client={queryClient}> <BrowserRouter> <GlobalStyles /> <Provider store={store}> <App /> </Provider> </BrowserRouter> </QueryClientProvider> </React.StrictMode> ); 마지막으로 전역으로 에러 관리를 하도록 세팅해놨습니다. 그리고 QueryClient에 throwOnError 속성이 있어야 에러를 ErrorBoundary로 전달할 수 있다해서 추가해줬습니다. 이렇게 세팅해놨는데 에러발생하면 그냥 하얀색 화면만 나오고 fallbackUI가 나오지 않습니다... 원인이 뭘까요...ㅠㅠㅠ 혹시 몰라서 콘솔 에러코드도 올립니다.. 추가로 궁금한 점 1. useQuery 에서 반환하는 객체중 error 객체는 어떤 존재인지 궁금합니다. 2. useQuery 속성과 QueryClient 속성 모두 throwOnError : true 를 가지고 있던데 어떤 차이점인지 궁금합니다. 답변주시면 정말 감사하겠습니다!!!

Next와 React-query의 prefetch에 대해

안녕하세요 ! Next14 버전과 tanstack-qeury를 이용해 프로젝트를 진행하던 도중 궁금한 점이 생겨 질문드립니다. Next의 서버 컴포넌트에서 data를 prefetching 하여 사용하려면 다음과 같은 단계를 밟아야 하는 것으로 알고 있습니다. 1. 서버 컴포넌트에서 queryClient.prefetchQuery를 사용해 데이터를 불러오고 이를 dehydrate하여 HydrationBoundary 내에 state로 넘겨준다. 2. 데이터를 사용하는 컴포넌트에서 useQuery로 동일한 데이터를 불러오면 해당 데이터는 prefetch 된 상태로 넘어와 이를 사용한다. 현재 이를 토대로 아래 예시코드와 같이 작성하여 사용중입니다. 이 때 하위 컴포넌트에서 prefetch한 데이터를 사용하려면 useQuery를 써야하기에, 'use client' 를 사용해야하고, 그렇게 되면 그 하위 컴포넌트도 전부 Client Boundary에 들어오게 되는 것으로 알고있는데, 그럼 "Next를 사용하며 얻을 수 있는 장점이 줄어들지 않나 ?" 라는 의문이 생겼습니다. 제가 사용법을 잘못 알고있다거나 Next의 개념에 대해 부족한걸까요 ? 또, HydrationBoundary로 감싸지 않고 queryClient.getQueryData를 이용해 직접 데이터를 가져와 이를 props로 전달해도 기능은 정상적으로 작동하는데, 이 둘의 차이점이 정확히 무엇인가요 ?

Next app 라우터와 react query애서 ssr이 적용되는 원리에 대해서 궁금합니다

react query와 ssr을 같이 사용하는 경우 queryClient에서 prefetch 한 다음 해당 queryClient를 dehydate한 dehydate(queryClient)를 HydrationBoundary에 전달해 주면 HydrationBoundary 하위 컴포넌트에서 prefetch 된 캐시 데이터를 queryKey를 통해 접근 할 수 있고 이를 통해 ssr 이 구현된다는 것 까진 이해 하였습니다. 하지만 이 과정에서 1. useQuery로 가져온 캐시 데이터를 사용하는 부분은 컴포넌트가 "use client"인데도 html 문서에 데이터가 입력돼서 넘어옵니다. 그렇다면 next가 ssr을 구현하는 서버와 reactQuery의 캐시 데이터가 존재하는 서버가 같은 위치에 있어서 html 문서에 캐시 데이터가 들어갈 수 있는것인가? 2. 문서 생성과정은 캐시된 데이터를 가져와서 생성하는 것으로 추측됩니다. dehydrate는 문서 안에 있는 데이터를 reactQuery의 데이터로 만드는 과정이라 들었는데 서순이 이상한거 아닌가? 라는 의문이 들어서 HydrationBoundary 와 dehydate를 통해 ssr이 적용되는 과정에 대한 원리를 정확히 알고 싶습니다.

리액트쿼리 고수 찾아요!

현재 관리자페이지를 구현중에 있습니다. 수정페이지와 추가페이지를 하나의 컴포넌트 페이지로 구현하려다보니 페이지 진입했을 때에 useParams 로 분기를 나누어 해당 깂으로 useQuery 사용하여 수정일때는 get 하고 추가일때는 안하도록 enabled 옵션을 사용해서 구현하였더니 페이지 컴포넌트 내에 console.log 가 몇수십번씩 찍힙니다ㅠㅠ 리랜더링이 되는것 같은데.. enabled 를 사용히지 않으면 리랜더링이 저렇게 많이 되지 않습니다. 추가와 수정페이지를 나누어서 구현해야할지 다른 해결방법이 있을까요?

리액트쿼리(useQuery) 질문이 있습니다.

개인 프로젝트에서 useQuery를 커스텀 훅으로 사용중입니다. (v5 사용중이며, staleTime과 gcTime은 기본값 사용중. staleTime 0, gcTime은 5분) 테스트를 위해 컴포넌트에서 자체 state를 변경했습니다. 리랜더링이 되기에 훅 안에 있는 useQuery도 다시 실행되는 걸 기대했습니다. 그런데 network탭을 보니 서버 요청이 안되더라구요..!(최초 요청 하나만 표시) 데이터가 stale한 상태에서 state변경시 useQuery는 데이터를 다시 fetch해와야하는 것 아닌가요~? 왜 이런지 궁금합니다..!

react-query 와 zustand

현재 react-query와 zustand를 같이 쓰면서 고민이 있습니다. 현재코드는 useQuery를 통해 데이터를 가져오고 그 데이터를 가공해서 zustand에 넣어놓고 데이터를 수정하거나 추가등의 변화가있을 때 useMutaion onSuccess -> queryClient.invalidateQueries를 통해 자동으로 갱신하게 로직을 작성했어요. 이렇게 작성하면 데이터를 수정하거나 추가등의 변화가있을 때 마다 최신데이터가 갱신되기는 하지만 서버에 재요청을 해야하는 단점이 있어서 useMutaion onSuccess -> queryClient.invalidateQueries를 통해 자동으로 갱신하는 부분을 zustand에 추가로 데이터를 넣어주고 새로고침할때만 useQuery로 데이터를 받아오는 방식으로 변경할려고 해요. 근데 이렇게되면 새로고침하지 않으면 다른사람이 갱신한 데이터는 가지고 있지 못하게 되요. 서버 요청횟수를 줄이는 것보다 최신데이터를 가지고 있는게 더 중요한가요? 제 지인은 유저는 사이트안에서 계속왔다갔다 거릴거라 대부분은 최신데이터를 즉각적으로 갱신시켜줄 필요가 없다고 하고 저도 이 말이 맞는거같은데 다른사람들은 어떻게 생각할지 궁금해서 질문드립니다..

리액트 쿼리 useQuery에서 데이터가 잘못 나오는 부분

하나의 컴포넌트에서 두개의 useQuery를 사용중입니다. 각각의 useQuery는 다른 쿼리키를 갖고 있으며 하나는 상품정보, 하나는 카테고리 정보를 불러옵니다. 그런데 '간혹' 상품정보 쿼리에서 카테고리 정보를 불러올때가 있습니다. 코드를 일부 보여드리겠습니다. // 상품정보 불러오는 코드(커스텀 훅) export default function useGetProduct(productId: number) { return useQuery(["getProduct", productId], () => getProduct(productId), { onError: (err) => alert(err), }); } // 카테고리 정보 불러오는 코드(커스텀 훅) export default function useGetCountByCategory() { return useQuery(["getCountByCategory"], getCountByCategory, { select: (res) => res.result.productCountsByCategory, }); } 두 코드에서 쿼리키가 완전 다르다고 생각합니다. 그런데 에러가 나서 네트워크 탭을 보면 상품정보 request의 response에 카테고리 정보 response가 담겨옵니다(백엔드 쪽은 스웨거를 통해 여러번 시도했는데 동일하게 데이터가 오고 있구요). 어떤 부분이 문제일까요!? 리액트 쿼리가 아주 애를 먹이네요..! 지식을 나눠주신다면 감사하겠습니다.

nextjs에서 react query queryClient 처리

이전에 React를 사용할때는 queryClient를 한번 선언한 후 export하고 invalidateQueries를 실행하는 곳에서 import하여 사용했습니다. 물론 QueryClientProvider에 주입도 선언한 queryClient 그대로 사용했구요. nextjs에서 queryClient를 react처럼 export해서 사용하지 않고 컴포넌트 내부에서 사용하는 이유가 있을까요? 궁금합니다. 또한 invalidateQueries를 사용할 때는 항상 컴포넌트나 커스텀 훅에서 useQueryClient()를 사용해야되는건가요?

제너릭 타입을 분리해 재사용하는 방법을 알려주세요.

React Query의 useQuery를 재사용 가능한 hook로 만들고 있습니다. config라는 options 객체를 hook를 사용하는 쪽에서 전달하고 싶었고 아래의 코드까지 도달했습니다. 실행은 되지만 <ResponseType, AxiosError, ParsedType> 제네릭 타입이 UseQueryOptions와 useQuery에서 중복으로 사용되고 있는게 마음에 들지 않습니다. 저 제네릭 타입을 별도로 분리해서 재사용할 수 없을까요?

Next.js 와 React Query SSR 네트워크 요청관련

현재 next.js 13버전과 react query를 같이 사용하고있습니다. https://tanstack.com/query/v4/docs/react/guides/ssr 공식문서에 나와있는 방법중 Hydration 방식을 사용하고있는데 서버 컴포넌트에서 prefetchQuery 를 하고 클라이언트 컴포넌트에서 useQuery 를 같은 키값으로 한다면 클라이언트 즉, 브라우저 네트워크 탭을 확인했을때 해당 요청이 네트워크 탭에서는 확인이 안되어야 정상일까요?

react query 좋은 코드?? 구현하는 법

react query로 채팅목록을 구현중입니다. 질문하고 답변이 오면 답변을 가공해서 recoil에 저장을하고 화면에 렌더링합니다. 이때 가공해야할것이 많고 오는 답변에 따라서 처리도 다 제각각이라 react query를 사용하는 부분이 코드가 매우 지저분합니다. 예를 들면 아래와 같이 되어있습니다. useSend = () => { // 각종 react query hook 선언 // recoil 상태값 선언 // recoil hook (각종 데이터 변형 처리) return useMutation( api 함수 호출, {onMutate: () => { api 호출하기전에 처리 }, onSuccess: () => { api 성공시 처리 응답으로 온 data를 렌더링 처리를 위해 각 구성을 달리해서 recoil에 저장하기도하고 (데이터 저장하는 hook도 따로 있음) 응답으로 온 data값에따라 또 다른 react query hook을 호출하기도 합니다. }) 이렇게 react query를 날리는 hook은 따로 만들었으나 이 안에서 하는일이 너무 많습니다. react query를 사용하는 코드들을 몇개 검토해보았는데.. 죄다 setquerydata로 저장을하고 그럼 useQuery에서는 다시 api를 호출하지않아도 리스트가 재렌더링되는 등의... 한마디로 backend에서 온 데이터를 그대로 쓰는?? 이런 예제들만있어서 참고가 잘 안되네요. 이럴경우 어떻게 구현하는 것이 좋을까요?? 약간의 팁도 감사합니다.

리액트에서 유닛테스트에 대해 질문이 있습니다!(RTL)

요즘 테스팅에 관심이 생겨서 기존에 있던 프로젝트로 유닛 테스트를 하나씩 해보고 있습니다. 유닛테스트 중 어떻게 테스트하는게 좋은 방법인지 궁금해서 질문드립니다 아래와 같은 카테고리 컴포넌트에서 React-Query를 사용하고 있습니다. 별로의 useQuery를 커스텀 훅으로 분리시켜놓은 상태이구요. 다음 컴포넌트를 유닛테스트 한다고 했을때, useCategoryQuery hook과 ui 부분에 대한 테스트는 별도로 분리시켜야 하는걸까요?? 분리해야 한다고 했을 때에는 useCategoryQuery 훅은 모킹하는게 맞는 부분인가요?? useQuery를 테스팅 하는 래퍼런스를 찾아봤는데 useQuery에 대한 테스트만 진행하는 로직 같아서 아리송해서 질문드립니다ㅠㅠ!

react-query를 사용해서 get 요청을 하는경우에도 useMutation을 활용해도될까요?

리액트 쿼리를 사용하는중 버튼을 클릭했을때 해당 기간에대한 데이터를 서버로부터 받아와야하는데요. 이럴경우엔 useQuery가 맞는거같은데 enabled를 사용해서 처리해야하는지, get요청이지만 useMutation을 사용해야하는지 고민입니다.. 어떻게 생각하시나요?

Next.js React-query 관련해서 질문있습니다 ㅜㅜ

안녕하세요 Next.js를 공부하고있는데 현재 페이지 내에서 useQuery 커스텀훅으로 데이터를 가져오고 있는데 SSR 형식으로 getServersideProps를 통해 데이터 패칭을 가져올려고 바꿀려고 합니다 ! 1. getSersideProps 쪽에서도 useQuery 커스텀훅을 사용할수 있을까요..? 2. 혹시 안된다면 데이터 받아오는것을 getServersideProps쪽에서 다 하면 useQuery 커스텀훅은 따로 쓸 필요가 없을까요?! 만약 쓴다면 어떠한 경우에 써야 될까요? 질문이 난잡해서 죄송합니다😭😭

useQuery 응답 순서 문제 (query key의 일부가 다른 경우)

useQuery에서 API 호출에 필요한 parameter 가 달라지는 경우에 query key의 일부를 변경하여 재호출을 하는 것으로 알고 있는데요. useQuery({ queryKey: [ reactQueryKeys.search, searchParams, ], queryFn: () => requestSearch( searchParams, ), }) (여기서 searchParams 가 상태 값이어서 달라지는 값입니다.) parameter만 다르고 찌르는 곳이 같은 API 요청을 2번 연속으로 한다고 했을 때, 첫 번째 요청과 두 번째 요청의 결과가 요청한 순서대로 오는 것을 보장할 수 있을까요? 제가 느끼기에는 첫 번째 요청과 두 번째 요청이 서로 독립적으로 동작한다고 느껴졌거든요. 만약 응답 순서를 보정하지 않는다면 보장할 수 있는 방법이 있을지 궁금합니다. 검색어 자동완성이나, 지도를 움직일 때마다 API 요청을 하는 경우 응답 순서 문제가 발생할 수 있을 것 같아서요.

React Query 커스텀훅으로 분리, 어떤 방향으로 하나요?

Q. React Query를 커스텀훅으로 분리할 때, useQuery와 useMutation을 따로 작성하는게 좋을까요? 아니면 하나의 커스텀 훅 내에서 작성하는 것이 좋을까요? React Query를 이제 막 접하게 된 신입 프론트엔드 개발자입니다. 회사 프로젝트에서 React Query를 사용해서 서버 데이터를 받아오고 있는데, 코드 재사용성을 위해서 React Query로 데이터를 받아오는 부분과 수정 및 삭제하는 코드를 커스텀훅으로 분리하려 합니다. 검색해보니, 많은 분들이 useQuery와 useMutation을 따로 분리해서 작성하더라고요. 그런데 제가 작성하려던 방향은 다음과 같이 useQuery와 useMutation을 하나의 커스텀훅 내에서 리턴되는 방향이었습니다. React Query를 처음 써보는데, 코드의 방법 1과 방법2 중에서 어떤 방향이 더 재사용성이 좋은가요? 현업에서는 어떤 방향을 주로 사용하나요? (급하게 긁어와 수정한 코드라 정확하지 않을 수 있습니다)

react-query & redux-toolkit을 이용한 user 상태관리 질문

react-query를 이용해서 user정보를 받아와 return data를 이용해 그대로 user 정보를 사용했는데 유저 정보를 수정하려다 보니 setQueryData메서드를 이용해서 onChange로 변화값 받아서 수정 후 업데이트를 진행해야 하는지 아니면 useQuery로 받은 user 정보를 redux-toolkit을 이용해 등록 후 dispatch로 상태관리 하다 수정 api를 실행해야하는지 궁금합니다.

React에서 props를 무조건 줄이는게 옳을까요?

안녕하세요 React를 기반으로 프로젝트 진행중인 개발자입니다. 리팩토링 작업중 컴포넌트 사이에 예를들어 const {type} = router.query 와 같이 선언으로 가져올수있는부분이나 react-query의 useQuery를 이용해서 가져올수있는 데이터같은경우 각 컴포넌트마다 선언해서 사용하는게 옳은것인지, 부모측에서 선언해서 props로 내려주는게 옳은것인지 궁금한데 직장에 사수가 없어 질문할 곳이 없어 이곳에 질문 남깁니다... 답변부탁드립니다 !

invalidateQueries를 사용했을 때, UI가 Re-Render 되지 않습니다.

안녕하세요, 현재 useQuery를 사용해서 인증과 동시에 유저 데이터를 가져오고 있고, 이 유저 데이터 중 닉네임을 변경하는 코드를 만들고 있어요. 제가 원하는 동작은 닉네임을 변경했을 때, 변경된 닉네임으로 Re-Render 되어서 화면에 보여지는 거예요. 문제는 invalidateQueries를 사용해서 캐시를 무효화해도, 변경된 닉네임으로 화면이 바뀌질 않아요. React-Query DevTools에선 캐시 데이터가 변경된 것을 확인했고, useMutation 훅을 사용해서 닉네임을 변경해봐도 결과는 같았습니다. 이상하게도, 사이트의 네비게이션 바의 프로필 UI에선 닉네임이 즉시 변경되었는데요, 이 네비게이션 바 외에선 자동으로 Re-Render 되지 않습니다. 이와 관련해서 아시는 분이 계실까요?

useQuery로 가져온 데이터를 자식 컴포넌트에서 어떻게 사용하는게 좋은지 궁금합니다.

useQuery를 사용해 부모 컴포넌트에서 데이터를 가져온 후, 해당 데이터를 자식 컴포넌트에서 사용할 때 세 가지 방법 중 어떤 것이 좋은지 궁금합니다. 1. 부모 컴포넌트에서 내려 받는다. 2. 자식 컴포넌트에서 query 요청을 한 번 더 한다. 3. 쿼리 클라이언트에서 캐싱된 값을 사용한다. 다른 분들은 이런 상황에서 어떤 방식으로 데이터를 받아오는지 알고 싶습니다!!

refetchInterval을 사용해서 특정 조건 달성 시 useQuery를 멈추는 방법

react-query useQuery 관련 질문이 있습니다. 특정 조건에 걸릴때까지 주기적으로 요청을 해야하는데, refetchInterval을 어떻게 사용해야할지 잘모르겠습니다. 혹시 아시는분 계실까요?

Next.js SSR + react-query 조합에서의 serializing 에러

안녕하세요! Next.js SSR + react-query 조합을 사용하려고 하는데요, page 컴포넌트 내 getServerSideProps 함수에서 prefetching을 받아온 후에 serializing 에러가 발생합니다. (Next.js는 13버젼입니다.) 에러 내용은 다음과 같습니다. Error: Error serializing `.dehydratedState.queries[0].state.data.headers` returned from `getServerSideProps` in "/top". Reason: `object` ("[object AxiosHeaders]") cannot be serialized as JSON. Please only return JSON serializable data types. 해당 에러 내용으로 구글링을 해보니, 대부분 getServerSideProps 함수 반환 코드에서 return { props: { dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))), }, }; 와 같이 dehydrate(queryClient)값을 JSON화 -> Object화를 하라고 하는데요, 이와 같이 사용해도 또 다시 아래와 같은 에러가 납니다. TypeError: Converting circular structure to JSON --> starting at object with constructor 'ClientRequest' | property 'socket' -> object with constructor 'Socket' --- property '_httpMessage' closes the circle Backend API는 Express.js를 사용하고 있으며, res.status(200).json({ data: ~ })와 같은 방식으로 응답을 주고 있습니다. 어떻게 해결할 수 있을까요? 코드 첨부가 안되네요, 아래는 page 컴포넌트가 위치한 파일의 전체 코드입니다. import type { ReactElement } from 'react'; import { dehydrate, QueryClient, useQuery } from '@tanstack/react-query'; import { format } from 'date-fns'; import TopMusicContainer from '~containers/TopMusicContainer'; import Layout from '~layouts/Layout'; import type { NextPageWithLayout } from '~pages/_app'; import TopMusicService from '~services/topMusicService'; import * as MusicType from '~types/musicType'; export async function getServerSideProps() { const queryClient = new QueryClient(); await queryClient.prefetchQuery(['fetchTopMusic'], () => { const params: MusicType.ListRequestType = { filter: 'title', keyword: '', page: 1, limit: 25, time: format(new Date(), 'yyyyMMddHH'), }; return TopMusicService.list(params); }); return { props: { dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))), }, }; } const Top: NextPageWithLayout = (): JSX.Element => { const { data, isLoading } = useQuery({ queryKey: ['fetchTopMusic'], queryFn: () => { const params: MusicType.ListRequestType = { filter: 'title', keyword: '', page: 1, limit: 25, time: format(new Date(), 'yyyyMMddHH'), }; return TopMusicService.list(params); }, }); return ( <section> <TopMusicContainer /> </section> ); }; Top.getLayout = function getLayout(page: ReactElement) { return <Layout>{page}</Layout>; }; export default Top;