본문으로 건너뛰기

설치

지원되는 각 프레임워크에는 자체 패키지가 제공됩니다. 각 프레임워크 패키지는 핵심 @tanstack/db 패키지의 모든 항목을 다시 내보냅니다.

React​

npm install @tanstack/react-db

TanStack DB는 React v16.8+와 호환됩니다.

Solid​

npm install @tanstack/solid-db

Svelte​

npm install @tanstack/svelte-db

Vue​

npm install @tanstack/vue-db

TanStack DB는 Vue v3.3.0+와 호환됩니다

Angular​

npm install @tanstack/angular-db

TanStack DB는 Angular v16.0.0+와 호환됩니다

Vanilla JS​

npm install @tanstack/db

프레임워크 없이 DB를 사용하려면 핵심 @tanstack/db 패키지를 설치합니다.

컬렉션 패키지​

TanStack DB는 다양한 데이터 소스와 스토리지 요구 사항을 위한 특수 컬렉션 패키지도 제공합니다:

쿼리 컬렉션​

TanStack Query를 사용하여 데이터를 로드하는 경우:

npm install @tanstack/query-db-collection

queryCollectionOptions을 사용하여 TanStack Query로 컬렉션에 데이터를 가져옵니다. REST API와 기존 TanStack Query 설정에 적합합니다.

로컬 컬렉션​

로컬 스토리지 및 메모리 내 컬렉션은 프레임워크 패키지에 포함되어 있습니다:

  • LocalStorageCollection - 브라우저 탭 간에 동기화되는 영속적 로컬 데이터에 사용
  • LocalOnlyCollection - 임시 메모리 내 데이터와 UI 상태에 사용

둘 다 각각 localStorageCollectionOptions 및 localOnlyCollectionOptions을 사용하며, 프레임워크 패키지(예: @tanstack/react-db)에서 사용할 수 있습니다.

동기화 엔진​

Electric 컬렉션​

ElectricSQL을 사용한 실시간 동기화:

npm install @tanstack/electric-db-collection

electricCollectionOptions을 사용하여 ElectricSQL 셰이프를 통해 Postgres 데이터베이스의 데이터를 동기화합니다. 실시간 로컬 우선 애플리케이션에 적합합니다.

TrailBase 컬렉션​

TrailBase 백엔드와 동기화하려면:

npm install @tanstack/trailbase-db-collection

trailBaseCollectionOptions을 사용하여 기본 제공 구독을 지원하는 TrailBase의 Record API에서 레코드를 동기화합니다.

PowerSync 컬렉션​

PowerSync를 사용하여 오프라인 우선 동기화를 수행하려면:

powerSyncCollectionOptions을 사용하여 PowerSync의 SQLite 기반 데이터베이스를 통해 PostgreSQL, MongoDB, MySQL 백엔드와 실시간으로 동기화되는 데이터를 동기화합니다. 컬렉션 패키지와 플랫폼별 PowerSync SDK 및 SQLite 어댑터를 설치합니다:

Web

npm install @tanstack/powersync-db-collection @powersync/web @journeyapps/wa-sqlite

React Native

npm install @tanstack/powersync-db-collection @powersync/react-native @powersync/op-sqlite @op-engineering/op-sqlite

또는 대체 SQLite 어댑터로 @journeyapps/react-native-quick-sqlite을 사용할 수 있습니다.

설정 세부 정보는 PowerSync 컬렉션 문서를 참조합니다.

RxDB 컬렉션​

RxDB를 사용하는 오프라인 우선 앱과 로컬 영속성을 위해:

npm install @tanstack/rxdb-db-collection

rxdbCollectionOptions을 사용하여 RxDB 컬렉션을 TanStack DB에 연결합니다. 이를 통해 RxDB의 강력한 로컬 우선 데이터베이스, 복제 및 충돌 처리 기능을 기반으로 하는 반응형 TanStack DB 컬렉션을 사용할 수 있습니다.