❔❔✔👚🔎📖🧩❤🧡💛👆
Tanstack Query
네트워크에서 가져온 데이터를 상태 관리할 수 있게 도와주는 라이브러리중 가장 많이 쓰여지는것이 react-query이다. 근데 react-query가 react뿐만 아니라 vue, svelte, solid에서도 사용이 가능해지면서 네이밍을 Tanstack Query로 변경하였다.
Tanstack Quer란 서버로부터 데이터를 받을때 fetching, caching, synchronizing and updating server state할수있다. 즉! 서버상태를 관리하기 위한 라이브러리라고 보면 된다.
🔎 서버상태로는 다음과 같은 요소들이 있습니다.
- 로딩(Loading): 데이터를 서버로부터 가져오는 동안의 상태를 나타냅니다. 서버 요청이 진행 중이고 응답을 기다리는 동안 로딩 상태가 활성화됩니다.
- 성공(Success): 서버 요청이 성공적으로 완료되었고, 데이터를 성공적으로 받아왔을 때의 상태입니다. 서버로부터 받은 데이터를 활용하여 화면을 업데이트하거나 다른 작업을 수행할 수 있습니다.
- 실패(Error): 서버 요청이 실패했을 때의 상태입니다. 서버 요청 중에 오류가 발생하거나, 서버로부터 예상치 못한 응답을 받았을 때 실패 상태가 발생합니다.
- 캐싱(Caching): 서버에서 가져온 데이터를 캐시에 저장하여 이후에 같은 요청이 있을 때 서버로부터 데이터를 다시 가져오지 않고 캐시된 데이터를 사용할 수 있습니다. 이를 통해 애플리케이션의 응답 속도를 향상시킬 수 있습니다.
- 리프레시(Refreshing): 서버로부터 데이터를 갱신하는 동안의 상태를 나타냅니다. 새로운 데이터를 가져오거나 업데이트된 데이터로 기존 데이터를 대체하는 과정에서 리프레시 상태가 활성화됩니다.입력하세요
옵저버(Observer)와 쿼리(Query)
옵저버(Observer)와 쿼리(Query)는 React Query 라이브러리에서 다른 개념을 나타냅니다.
- 옵저버(Observer)
옵저버는 React Query에서 비동기 데이터 요청을 추적하고 업데이트를 처리하는 객체입니다. 주요 역할은 쿼리의 상태 변화를 감지하고 이에 따라 UI를 업데이트하는 것입니다. React Query에서 제공하는 useQuery 또는 useMutation hook을 사용하여 옵저버를 생성합니다. 다양한 상태 변경 이벤트에 대한 콜백 함수 등 옵저버를 통해 쿼리의 상태 변화를 감지하고 UI를 업데이트할 수 있습니다.
🔎 옵저버는 다음과 같은 속성을 가질 수 있습니다isLoading: 요청이 진행 중인지 여부를 나타냅니다.
isError: 요청이 실패했는지 여부를 나타냅니다.
data: 요청에서 받은 데이터를 저장합니다.
error: 요청 실패 시 발생한 오류를 저장합니다.
refetch: 요청을 다시 실행하는 함수입니다.
- 쿼리(Query)
쿼리는 React Query에서 비동기 데이터 요청을 나타내는 객체입니다. useQuery hook을 사용하여 쿼리를 생성하고, 서버로부터 데이터를 가져오는 등의 작업을 수행합니다. 쿼리는 옵저버의 업데이트를 트리거하고, 서버로부터 데이터를 요청하고, 데이터를 받아옵니다. 옵저버와 함께 사용하여 비동기 데이터 요청을 처리하고 UI를 업데이트할 수 있습니다.
🔎 쿼리는 다음과 같은 속성을 가질 수 있습니다:queryKey: 쿼리를 식별하는 고유한 키입니다.
queryFn: 서버로부터 데이터를 가져오는 함수입니다.
onSuccess, onError 등의 콜백 함수 등
요약하자면, 옵저버는 쿼리의 상태 변화를 감지하고 UI를 업데이트하는 객체이고, 쿼리는 서버로부터 데이터를 요청하고 받아오는 비동기 작업을 수행하는 객체입니다.
Tanstack Query의 API refernces
Tanstack Query 에는 다양한 API refernce가 존재합니다.
1. QueryClient 객체
QueryClient 객체는 Tanstack Query에서 제공하는 클라이언트 캐시에 접근할 수 있는 객체입니다. Query cache, mutation cache, logger 등과 연결되어있습니다.
2. QueryCache
QueryCache는 TanStack Query의 스토리지 매케니즘입니다. 이는 메타데이터 정보, 쿼리 상태 등등의 저장합니다. 일반적으로 QueryCache에 직접 접근하지 않고, QueryClient객체를 통해 특정 캐시에 접근합니다.
import { QueryCache } from '@tanstack/react-query'
const queryCache = new QueryCache({
onError: (error) => {
console.log(error)
},
onSuccess: (data) => {
console.log(data)
},
onSettled: (data, error) => {
console.log(data, error)
},
})
const query = queryCache.find(['posts'])QueryClient Function
find
findAll
subscribe
clear
QueryClient Options
QueryClient의 onError, onSuccess and onSettled는 전역적으로 적용이 됩니다. 이 옵션들은 defaultOption과는 다릅니다.
1. defaultOption은 각각 Query에서 재정의할 수 있는 반면, QueryClient Options은 항상 호출됩니다.
2. defaultOption은 각각의 옵저버에 대해 한번 호출되는 반면, QueryClient Options는 각각의 쿼리당 한번 호출됩니다.
onError, onSuccess and onSettled
