Query invalidation 쿼리가 refetch되기전 'stale'상태가 되는 것이 항상 있는 일은 아니다. 특히 사용자가 작업을 완료해서 쿼리 데이터가 더이상 유효하지 않은 경우에도 작동하지 않을 수 있다. 이를 위해 QueryClient에는 invalidateQueries 메서드가 존재한다. 이 메서드를 사용하면 쿼리를 적절하게 "stale" 상태로 표시하고, 필요한 경우 refetch할 수 있다. // Invalidate every query in the cache queryClient.invalidateQueries() // Invalidate every query with a key that starts with `todos` queryClient.invalidateQueries({ qu..
React-Query
Mutation 쿼리들(useQuery, useQueries...etc)과는 다르게 'useMutation'은 주로 create/update/delete 혹은 서버쪽 작업을 수행하는 역할을 한다. 아래에는 간단한 todo를 서버에 추가하는 예시코드가 있다. function App() { const mutation = useMutation({ mutationFn: (newTodo) => { return axios.post('/todos', newTodo) }, }) return ( {mutation.isLoading ? ( 'Adding todo...' ) : ( {mutation.isError ? ( An error occurred: {mutation.error.message} ) : null} {mut..
Placeholder Query Data
Initial Query Data TanStack Query에는 초기데이터를 활용하는 두가지 방법이 있다. 선언형 'initialData'를 쿼리에 선언하여, 쿼리가 비어있을 경우 이것을 이용한다. 명령형 'queryClient.prefetchQuery'를 이용해 데이터를 미리 받는다. 'queryClient.setQueryData'를 사용하는 캐시에 수동적으로 데이터를 삽입한다. 선언형 Initial Query Data Initial Data Function 초기데이터가 무겁거나(느린 API를 사용하거나, 대용량 데이터베이스에서 데이터를 읽어오는 경우), 렌더링할때마다 초기값을 넘겨주길 원치않는다면 'initialData'의 value로 메서드를 넘겨주면 된다. 메서드를 vlaue로 사용할 경우 쿼리가..
Infinite Queries 'useInfiniteQuery'를 사용하면 달라지는 것들 'data'는 infinete query의 데이터를 담고있는 객체이다. 'data.pages'은 받아진 페이지들을 포함하는 배열이다. 'data.pageParams'은 페이지들을 fetch하기위해 사용되어지는 page params을 포함하는 배열이다. 'fetchNextPage'와 'fetchPreviousPage'함수를 사용할 수 있게된다. 'getNextPageParam'과 'getPreviousPageParam'옵션은 데이터가 더 로드될 수 있는지의 여부, 데이터를 가져오는데 필요한 정보를 결정하는데 사용할 수 있고, 이 정보는 쿼리 함수(fetchNextPage 또는 fetchPreviousPage)에 추가 ..
Query Retries 'useQuery'가 데이터를 받아오는데 실패했을 때 (혹은 query functiondl error를 냈을때) TanStack Query는 자동적으로 query를 재시도한다. 재시도의 조건은 "설정한 retires의 숫자값(기본적으로는 3회인다.)에 도달하지 않았을 때" 혹은 "retires를 허락한 함수가 있는 상황 "이다. 이러한 retry설정은 개별query단위로도 가능하고, 전역적으로 모든 query에 대해서도 적용가능하다. retry = false -> retry가 없는 상황 retry = 6 -> 재시도를 6번까지 제한 retry = true -> 데이터가 받아져올때까지 재시도함(미친듯) retry = (failureCount, error) => ...를 설정하면 "..
SSR React Query는 서버로부터 데이터를 미리 받아오고, QueryClient에 제공하는 두가지 방법을 지원한다. 첫째, 클라이언트 측에서 데이터를 미리 가져와 initialData로서 전달하는 것 -> 이 방법은 간단한 경우에 빠르게 설정할 수 있지만 몇 가지 주의 사항이 있다. 둘째, 서버에서 쿼리를 미리 가져오고 캐시를 비활성화하여 클라이언트에서 재사용하는 것 -> 이 방법은 초기 설정에 약간 더 많은 설정이 필요하지만 더 많은 성능 향상을 제공할 수 있다. Using 'initialData' Next.js의 getStaticProps 혹은 getServerSideProps와 함께 사용하면 두 메서드중 어느 하나에서 fetch한 데이터를 useQuery의 initialData옵션에 전달할 ..
Paginated Queries Paginated Queries를 사용하면, API에서 반환된 데이터가 많은 경우, 페이지단위로 데이터를 가져와 사용자경험을 좋게 많들 수 있다. 여기서 주의해야할점은 query keys에 포함된 state(아래 예시에서는 pageNumber)는 기본적으로 변경될때마다 query를 refetch하므로 페이지이동이 발생할때마다 깜빡임이 발생하는둥 사용자경험측면에서 안좋을 수 있다. 이때 해결할 수 있는 방법은 keepPreviousData옵션을 사용하는 것이다. keepPreviousData keepPreviousData옵션을사용하면 새로운 데이터를 받아올때까지, 이전에 성공적으로 받은 데이터를 이용한다. 그리고 새로운 데이터가 성공적으로 받아지면 background에서 교..
