반응형 개발/react-query6 tanstack query로 SSR 시키기 공식문서에 무려 Advanced SSR, (향상된 서버렌더링)이 있었다. Advanced Server Rendering | TanStack Query React DocsWelcome to the Advanced Server Rendering guide, where you will learn all about using React Query with streaming, Server Components and the Next.js app router. Before we start, let's note that while the initialData approach outlined in the SSR guide also wotanstack.com 일단 내가 느낀 것 요약함. prefetch를 통해 즉시 렌.. 2024. 8. 15. tanstack-query v5 업데이트 기능: useQuery에 onSuccess 삭제 const { data: taskData } = useQuery(["taskData"], fetchTaskData, { staleTime: 60000, onSuccess: (taskData) => setTaskDataSource(taskData), }); const { data: jobData } = useQuery(["jobData"], fetchJobData, { staleTime: 60000, onSuccess: (jobData) => setJobDataSource(jobData), });이러면 캐시에 onSuccess 실행안되서 버그 생김 그래서 tanstack-query에서는 useQuery에 onSuccess 없앰 2024. 6. 11. react-query v5에 useQuery의 onSuccess가 사라졌다. 사이드프로젝트하다가 api에 문제가 생겨서 손보던 중 react-query v5가 나온걸 보고 v5로 업데이트 했다. 인터페이스가 좀 바뀌어서 이것저것 고치는데 onSuccess를 넣을 자리가 안보였다. 검색해보니 react-query v5에서는 onSuccess가 사라졌다고 한다! 이 글에 나와있는데 주요한것만 작성해본다. 나쁜 Callback 제거 useQuery에서 onSuccess, onError, onSetteled가 제거되었다. (useMutation에는 잘 있다고 한다.) 개발자의 의도와 다르게 행동할 수 있기 때문이다. onError onError같은 경우는 root의 queryClient에서 사용하라고 한다. const queryClient = new QueryClient({ queryC.. 2023. 12. 19. refetch와 mutation의 캐시 동작 refetch와 mutation에서의 캐시 동작 react-query를 쓰는 이유는 loading,error처리의 간편함도 있지만, 캐시 관리의 편리함이 가장 크다. cacheTime(default = 5분)과 staleTime(default = 0)을 적절히 사용하여 요청을 보내지 않고 캐시 데이터를 사용할 수 있다. 이를 통해 서버 부하를 줄일 수 있고, 데이터 로드 속도를 높힐 수 있다. react-query에서 refetch와 mutation을 사용할 때 캐시에 대한 동작은 조금 다르다. refetch refetch는 특정 쿼리를 다시 실행하고 해당 쿼리의 캐시를 업데이트 시킨다. mutation mutation은 데이터를 수정, 추가, 삭제하는 등의 작업을 수행할 때 사용되는데, mutation.. 2023. 9. 12. 이전 1 2 다음 반응형
