#react-query

Articles tagged with #react-query

[ 살펴보기 ] React Query - Suspense
근래 React로 frontend 개발시 loading과 error 처리를 위한 Suspense와 Error boundary의 도입이 늘어나면서 React Query 역시 version 5로 올라오며 이를 위한 별도의 hook을 제공하게 되었다. ( v4에서는 useQuery에 별도의 prop 설정을 통해 suspense를 사용했으나 해당 포스트는 version 5를 기준으로 설명한다 ) 이번 포스트를 통해 React Query를 통해 Susp...
May 14, 20242 min read14
[ 살펴보기 ] React Query - Cache 동작방식
React Query의 useQuery, useSuspense를 사용하면 queryFn에서 fetch한 데이터를 fetch할 때 선언한 queryKey값에 cache data로 저장해둔다. 그렇다면 cache한 다음은 어떻게 동작할까? 이번 포스트에선 React Qeury의 cache 동작 방식을 살펴보자 staleTime useQuery의 staleTime option은 fetch한 data의 cache 시간을 언제까지 fresh한 상태로 취...
May 9, 20242 min read2
[ 살펴보기 ] React Query - Server Rendering & Hydration
Front-end 개발자라면 특히 React 개발자라면 NextJS는 이제 빠질 수 없을 정도로 중요한 입지를 차지하고 있다. 우리는 SSR처리를 위해 NextJS의 덕을 많이 보며 개발을 하고 있다. 이번 포스팅에서는 NextJS를 통해 특정 페이지에 대한 SSR 처리를 하기 위해 어떤 조치가 취해져야 하는지 살펴볼 것이다. 하지만 그 전에 중요한 개념을 먼저 짚어보고 넘어가자 Server Side Rendering Server Side Re...
Apr 30, 20247 min read7
[ 살펴보기 ] React Query - Prefetching
유저가 접근한 페이지에서 필수 데이터를 1차로 fetch한 이후 유저가 추가로 fetch 요청을 할 확률이 높은 데이터를 알 수 있다면 해당 데이터를 미리 fetch 해둬서 유저가 해당 데이터가 필요한 액션을 하면 request 요청 없이 미리 fetch했던 데이터를 바로 제공할 수도 있을 것이다. 위와 같은 상황을 처리하기 위해 React Query에서 데이터를 prefetch하는 방법을 살펴보자 PrefetchQuery prefetchQue...
Apr 26, 20243 min read3
[ 살펴보기 ] React Query - Query Cancellation
개발자는 유저가 특정 페이지를 방문했을 때 해당 페이지에서 제공해야 하는 데이터를 준비하기 위해 useQuery, susSuspenseQuery를 통해 data를 fetch하여 필요한 정보를 제공한다 페이지에 필요한 데이터를 page level에서 바로 fetch하여 display할 때도 있겠지만 많은 경우 data display를 담당하는 component에서 data fetch를 담당할 경우가 많을 것이다 그렇다면 data fetch를 담당...
Apr 17, 20242 min read1
[ 살펴보기 ] React Query - Cache Invalidation & Update
useMutation을 통해 특정한 데이터를 추가, 업데이트, 삭제했다면 기존client에 존재하는 cache는 실제 server에 존재하는 데이터와 sync가 맞지 않을 것이다. useMutation이후 특정 cache 데이터를 invalidate 시켜 다시 fetch하는 방법을 살펴보자 특정 user의 상세 정보를 아래와 같이 useQuery로 fetch하고 있다고 가정해보자 const { data } = useQuery({ quer...
Apr 13, 20242 min read2