react-query를 사용하게 됐던 이유는 간단합니다

클라이언트 상태와 분리는 zustand를 사용하게 되면서 zustand에서도 비동기 상태에 대한 제어가 가능했지만, 리액트쿼리가 제공하는 패러다임과 인터페이스보다는 생태계가 작아 선택하지않게 되었습니다.

리액트쿼리의 자세한 내용은 아래의 글에 정리해두었으니 참고하시면 좋습니다 :)

Tanstack Query Deep dive

쿼리키는 왜 중요할까요?

Mutation 이후에 Mutation의 응답 데이터를 활용하여 캐시 데이터를 업데이트하거나 특정 Query를 직접 무효화 하는 경우를 말합니다.

쿼리키를 상수로 관리하다가 오류가 빈번하게 발생하다는것을 알게되었습니다. 쿼리키 상수에 다른 수준의 세분성을 추가하려는 변경을 더 어렵다는 점이 있었습니다.

const QUERY_KEYS = {
	LIST : ['LIST'],
	DETAIL : ['DETAIL']
}

// 세분화가 필요없는 쿼리의 경우 이렇게 가능합니다
const { data } = useQuery({
	queryKey: QUERY_KEYS.LIST,
	queryFn: () => fetchList()
})

const mutate = useMutation({
	...
	onSuccess: () => {
		queryClient.invalidateQuries({ queryKey : QUERY_KEYS.LIST })
	}
})

// 세분화가 필요한 쿼리의 경우엔 불편함이 다가옵니다
const { data } = useQuery({
	queryKey: [...QUERY_KEYS.DETAIL, id],
	queryFn: () => fetchDetailByID(id)
})

const mutate = useMutation({
	...
	onSuccess: () => {
		queryClient.invalidateQuries({ queryKey : [...QUERY_KEYS.DETAIL, id] })
	}
})