본문 바로가기

Frontend/TanStack Query

(8)

Dependent Queries useQuery dependent Query종속(또는 순차적) 쿼리는 이전 쿼리가 완료되어야만 실행될 수 있는 쿼리를 말한다. 이를 구현하는 것은 간단하다. // 사용자 정보 가져오기const { data: user } = useQuery({ queryKey: ['user', email], queryFn: getUserByEmail,})const userId = user?.id// 사용자의 프로젝트 정보 가져오기const { status, fetchStatus, data: projects,} = useQuery({ queryKey: ['projects', userId], queryFn: getProjectsByUser, // userId가 존재할 때까지 쿼리는 실행되지 않는다. enabl..

Parallel Queries "Parallel"(병렬) 쿼리는 fetching 동시성을 극대화하기 위해 병렬로, 즉 동시에 실행되는 쿼리이다. Manual Parallel Queries: 수동 병렬 쿼리병렬 쿼리의 수가 변경되지 않는다면, 병렬 쿼리를 사용하는 데 별다른 노력이 필요하지 않다. TanStack Query의 useQuery 및 useInfiniteQuery 훅을 원하는 만큼 나란히 사용하기만 하면 된다. function App () { // 다음 쿼리들은 병렬로 실행된다 const usersQuery = useQuery({ queryKey: ['users'], queryFn: fetchUsers }) const teamsQuery = useQuery({ queryKey: ['teams'], queryFn: fet..

Network Mode TanStack Query의 네트워크 모드는 인터넷 연결이 없을 때 쿼리와 뮤테이션이 어떻게 동작할지 결정하는 3가지 설정을 제공한다. 이 모드는 각 쿼리/뮤테이션에 개별적으로 설정하거나, 기본값을 통해 전역으로 설정할 수 있다. 일반적으로 데이터 패칭 라이브러리와 함께 사용되므로, 기본 네트워크 모드는 online이다. Network Mode: online이 모드에서는 인터넷에 연결되어 있을 때만 쿼리와 뮤테이션이 실행된다. 이것이 기본값이다. 인터넷 연결이 없어 쿼리를 실행할 수 없는 경우, 해당 쿼리는 기존의 state(pending, error, success) 상태를 그대로 유지한다. 하지만 이때 fetchStatus라는 추가적인 상태가 제공되어 더 자세한 상황을 알 수 있다.fetching: ..

Query Options queryKey와 queryFn을 여러 곳에서 공유하면서도 관련 코드를 한 곳에 모아 관리하는 가장 좋은 방법 중 하나는 queryOptions helper를 사용하는 것이다. 런타임 시 이 헬퍼는 전달받은 옵션 객체를 그대로 반환할 뿐이지만, TypeScript와 함께 사용할 때 수많은 이점을 제공한다. 쿼리에 필요한 모든 옵션을 한 곳에서 정의할 수 있으며, 이를 통해 type inference(타입 추론)과 type safety(타입 안정성)을 완벽하게 보장받을 수 있다.import { queryOptions } from '@tanstack/react-query'function groupOptions(id: number) { return queryOptions({ queryKey: ['gro..

Query Functions 쿼리 함수는 promise를 반환하는 모든 함수가 될 수 있다. 이 promise는 데이터를 reslove(성공적으로 처리)하거나 에러를 throw해야 한다. 다음은 모두 유효한 쿼리 함수 설정의 예시이다.useQuery({ queryKey: ['todos'], queryFn: fetchAllTodos })useQuery({ queryKey: ['todos', todoId], queryFn: () => fetchTodoById(todoId) })useQuery({ queryKey: ['todos', todoId], queryFn: async () => { const data = await fetchTodoById(todoId) return data }, }) useQuery({ ..

Query Keys TanStack Query의 핵심은 쿼리 키를 기반으로 쿼리 캐싱을 관리하는 것이다. 쿼리 키는 반드시 최상위 레벨에서 배열이어야 한다. ['todos']처럼 단일 문자열을 가진 간단한 배열일 수도 있고, 여러 문자열과 중첩된 객체를 포함하는 복잡한 배열일 수도 있다. 쿼리 키가 JSON.stringfy로 직렬화 가능하고 해당 쿼리의 데이터를 고유하게 식별할 수만 있다면 어떤 형태든 사용할 수 있다. Simple Query Keys가장 간단한 형태의 키는 상수 값으로만 구성된 배열이다. 이 형식은 다음과 같은 경우에 유용하다.일반적인 목록/인덱스 리소스계층 구조가 없는 리소스// A list of todosuseQuery({ queryKey: ['todos'], ... })// Something els..

Queries 쿼리는 고유한 키에 연결된 비동기 데이터 소스에 대한 선언적 의존성이다. 쿼리는 Promise를 기반으로 하는 모든 종류의 함수(GET, POST 메서드 포함)와 함께 사용하여 서버로부터 데이터를 가져올 수 있다. 만약 서버의 데이터를 수정하는 경우에는 Mutations를 사용하는 것을 권장한다. 컴포넌트나 커스텀 훅에서 쿼리를 사용하려면, useQuery 훅을 최소한 다음 두 가지 인자와 함께 호출해야 한다.쿼리를 식별하는 고유한 키다음 중 하나를 수행하는 promise를 반환하는 함수데이터를 성공적으로 가져와 반환하거나에러를 발생시킴import { useQuery } from '@tanstack/react-query'function App() { const info = useQuery({ query..

왜 TanStack Query를 사용할까? TanStack Query는 웹 애플리케이션에서 꼭 필요했던 data-fetching 라이브러리의 완성판이라고 불린다. 기술적으로 말하면, 웹 애플리케이션의 서버 상태를 가져오고, 캐싱하며, 동기화하고, 업데이트하는 작업을 아주 쉽게 만들어 준다. 왜 필요할까?대부분의 핵심 웹 프레임워크는 데이터를 가져오거나 업데이트하는 것에 대해 통합적이고 정형화된 방법을 제공하지 않는다. 이 때문에 개발자들은 데이터 페칭에 대한 엄격한 규칙을 포함하는 메타 프레임워크를 만들거나, 자신만의 데이터 페칭 방식을 만들어낸다. 이는 보통 컴포넌트 기반 상태 관리와 사이드 이펙트를 엮거나, Redux나 Zustand 같은 전역 상태 관리 라이브러리를 사용하여 비동기 데이터를 앱 전체에서 관리하는 방식으로 귀결된다. 전통적인 ..

이전 1 다음

티스토리툴바