TanStack Query (8) 썸네일형 리스트형 [TanStack Query / React Query] Optimistic Updates ( 낙관적 업데이트 ) : UI 방식과 캐시 방식 https://tanstack.com/query/latest/docs/framework/react/guides/optimistic-updates TanStack | High Quality Open-Source Software for Web DevelopersHeadless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.tanstack.com공식 문서를 번역 정리한 글 입니다. 낙관적 업데이트는 mutation 이 성공적으로 반영될 것이라 낙관적으로 판단을 하고서버로 부터 응답이 오기 전에 UI 업데이트를 먼저 하는 것을.. [TanStack Query / React Query] setQueryData : Mutation 응답으로부터의 업데이트 https://tanstack.com/query/latest/docs/framework/react/guides/updates-from-mutation-responses TanStack | High Quality Open-Source Software for Web DevelopersHeadless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.tanstack.com공식 문서를 번역한 글입니다. Mutation 응답으로부터의 업데이트 서버의 객체를 업데이트하는 mutation을 다룰 때, 새로운 객체가 일반적으로 mutati.. [TanStack Query / React Query] TanStack Query 필터링 filters : QueryFilters와 MutationFilters https://tanstack.com/query/latest/docs/framework/react/guides/filters#query-filters TanStack | High Quality Open-Source Software for Web DevelopersHeadless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.tanstack.com 공식문서를 간단히 요약한 내용입니다. 기본적으로 필터들은 invalidateQueries, removeQueries, refetchQueries 등과 함께 쓰입니다. 1. Que.. [TanStack Query / React Query] 데이터 관리 기능: prefetchQuery, setQueryData, placeholderData, initialData where to use?data from?캐시 저장 여부prefetchQuery queryClient 메서드serverOsetQueryData queryClient 메서드clientOplaceholderDatauseQuery 옵션clientXinitialDatauseQuery 옵션clientO 1. prefetchQuery 데이터를 미리 가져와서 캐시에 저장하는 기능입니다사용자가 특정 페이지나 컴포넌트에 방문하기 전에 미리 데이터를 로드할 때 유용합니다queryClient 메서드 입니다const queryClient = useQueryClient()// 미리 데이터 fetchawait queryClient.prefetchQuery({ queryKey: ['todos'], queryFn: fetchT.. [TanStack Query / React Query] useInfiniteQuery와 무한 스크롤 useInfiniteQuery는 페이지네이션이나 무한 스크롤과 같은 데이터 로딩을 구현할 때 사용됩니다. 1. useQuery 와 useInfiniteQuery의 차이 ● useQuery단일 데이터 객체 반환 한 번의 요청에 대한 응답만 저장 ● useInfiniteQuerypages 배열: 모든 페이지의 데이터를 순서대로 저장 pageParams 배열: 각 페이지를 가져올 때 사용된 매개변수 저장 여러 페이지의 데이터를 누적하여 저장 좀 더 이해하기 쉽게 data에 로그를 찍어보면 useQuery 와 uesInfiniteQuery 의 반환되는 data 의 구조는 다음과 같은 차이가 있습니다 1-1. useQuery const { data } = useQuery({ queryKey: ['i.. [TanStack Query / React Query] prefetchQuery : 데이터 선제적 로딩 이전 토이 프로젝트에서는 react-router 와 함께 사용하여loader 를 이용하여 페이지가 열리기 전, 사전에 데이터를 가져오는 방법을 사용했었지만순수하게 TanStack Query 를 사용하여 사전에 데이터를 가져오는 방법을 찾아보았습니다. prefetchQuery & prefetchInfiniteQuery https://tanstack.com/query/latest/docs/framework/react/guides/prefetching#prefetchquery--prefetchinfinitequery TanStack | High Quality Open-Source Software for Web DevelopersHeadless, type-safe, powerful utilities for c.. [TanStack Query / React Query] staleTime과 gcTime 이해하기: 데이터 캐싱 1. stale data 데이터의 사용 기간이 지났고, 다시 가져올 준비가(refetch) 되 있는 상태입니다여전히 데이터는 캐시 안에 있습니다데이터를 다시 검증해야 한다는 뜻데이터 새로 고침(refetch) 은 오래된 데이터( stale data )에 대해서만 트리거됩니다자동으로 데이터 새로 고침을 하는 트리거는 컴포넌트 remount 나 브라우져 창의 refocus가 있습니다staleTime 은 데이터의 최대 수명이라고 생각하면 됩니다그러므로 데이터 새로고침 기능을 컨트롤하고 싶다면 이와 관련된 useQuery 의 옵션 중 하나인 staleTime 을조절하면 됩니다(staleTime 이 2초 (2000 ms) 라면 2초 동안에는 데이터 새로 고침이 되지 않습니다 staleTime 은 default 로.. [TanStack Query / React Query] useQuery 훅의 isLoading isFetching isPending 차이 isPending: 캐쉬된 데이터가 없고 아직 쿼리가 수행되지 않은 경우입니다. isFetching: 비동기 쿼리 함수가 수행 중인 상태, 모든 데이터 로딩 상태에서 trueisLoading: (이전의 isInitialLoading) 캐쉬된 데이터가 없으며, 비동기 쿼리 함수가 수행 중인 상태 . 그 말은 데이터의 첫 번째 로딩 시에만 true가 된다는 뜻 입니다. isPending && isFetching === isLoading isPending && isFetching 라고 해서 처음에는 isLoading 에 대해 좀 헷갈렸는데.. isPending 과 isLoading은 쿼리의 수행 유무에 따라 반대값이 나오게 됩니다. const.. 이전 1 다음
