함수: useLiveQuery()

호출 시그니처

function useLiveQuery<TContext>(queryFn, deps?): UseLiveQueryReturn<TContext>;

정의 위치: useLiveQuery.ts:138

쿼리 함수를 사용하여 라이브 쿼리를 생성합니다

타입 매개변수

TContext

TContext extends Context

매개변수

queryFn

(q) => QueryBuilder<TContext>

가져올 데이터를 정의하는 쿼리 함수입니다.

deps?

unknown[]

변경될 때 쿼리 재실행을 트리거하는 반응형 종속성 배열

반환값

UseLiveQueryReturn<TContext>

쿼리 데이터, 상태 및 상태 정보를 포함하는 반응형 객체

예제

// Basic query with object syntax
const { data, isLoading } = useLiveQuery((q) =>
  q.from({ todos: todosCollection })
   .where(({ todos }) => eq(todos.completed, false))
   .select(({ todos }) => ({ id: todos.id, text: todos.text }))
)

// With reactive dependencies
const minPriority = ref(5)
const { data, state } = useLiveQuery(
  (q) => q.from({ todos: todosCollection })
         .where(({ todos }) => gt(todos.priority, minPriority.value)),
  [minPriority] // Re-run when minPriority changes
)

// Join pattern
const { data } = useLiveQuery((q) =>
  q.from({ issues: issueCollection })
   .join({ persons: personCollection }, ({ issues, persons }) =>
     eq(issues.userId, persons.id)
   )
   .select(({ issues, persons }) => ({
     id: issues.id,
     title: issues.title,
     userName: persons.name
   }))
)

// Handle loading and error states in template
const { data, isLoading, isError, status } = useLiveQuery((q) =>
  q.from({ todos: todoCollection })
)

// In template:
// <div v-if="isLoading">Loading...</div>
// <div v-else-if="isError">Error: {{ status }}</div>
// <ul v-else>
//   <li v-for="todo in data" :key="todo.id">{{ todo.text }}</li>
// </ul>

호출 시그니처

function useLiveQuery<TContext>(queryFn, deps?): UseLiveQueryReturn<TContext>;

정의 위치: useLiveQuery.ts:144

쿼리 함수를 사용하여 라이브 쿼리를 생성합니다

타입 매개변수

TContext

TContext extends Context

매개변수

queryFn

(q) => QueryBuilder<TContext> | null | undefined

가져올 데이터를 정의하는 쿼리 함수입니다.

deps?

unknown[]

변경될 때 쿼리 재실행을 트리거하는 반응형 종속성 배열

반환값

UseLiveQueryReturn<TContext>

쿼리 데이터, 상태 및 상태 정보를 포함하는 반응형 객체

예제

// Basic query with object syntax
const { data, isLoading } = useLiveQuery((q) =>
  q.from({ todos: todosCollection })
   .where(({ todos }) => eq(todos.completed, false))
   .select(({ todos }) => ({ id: todos.id, text: todos.text }))
)

// With reactive dependencies
const minPriority = ref(5)
const { data, state } = useLiveQuery(
  (q) => q.from({ todos: todosCollection })
         .where(({ todos }) => gt(todos.priority, minPriority.value)),
  [minPriority] // Re-run when minPriority changes
)

// Join pattern
const { data } = useLiveQuery((q) =>
  q.from({ issues: issueCollection })
   .join({ persons: personCollection }, ({ issues, persons }) =>
     eq(issues.userId, persons.id)
   )
   .select(({ issues, persons }) => ({
     id: issues.id,
     title: issues.title,
     userName: persons.name
   }))
)

// Handle loading and error states in template
const { data, isLoading, isError, status } = useLiveQuery((q) =>
  q.from({ todos: todoCollection })
)

// In template:
// <div v-if="isLoading">Loading...</div>
// <div v-else-if="isError">Error: {{ status }}</div>
// <ul v-else>
//   <li v-for="todo in data" :key="todo.id">{{ todo.text }}</li>
// </ul>

호출 시그니처

function useLiveQuery<TContext>(config, deps?): UseLiveQueryReturn<TContext>;

정의 위치: useLiveQuery.ts:184

구성 객체를 사용하여 라이브 쿼리를 생성합니다.

타입 매개변수

TContext

TContext extends Context

매개변수

config

LiveQueryCollectionConfig<TContext>

쿼리와 옵션이 있는 구성 객체입니다.

deps?

unknown[]

변경될 때 쿼리 재실행을 트리거하는 반응형 종속성 배열

반환값

UseLiveQueryReturn<TContext>

쿼리 데이터, 상태 및 상태 정보를 포함하는 반응형 객체

예제

// Basic config object usage
const { data, status } = useLiveQuery({
  query: (q) => q.from({ todos: todosCollection }),
  gcTime: 60000
})

// With reactive dependencies
const filter = ref('active')
const { data, isReady } = useLiveQuery({
  query: (q) => q.from({ todos: todosCollection })
                 .where(({ todos }) => eq(todos.status, filter.value))
}, [filter])

// Handle all states uniformly
const { data, isLoading, isReady, isError } = useLiveQuery({
  query: (q) => q.from({ items: itemCollection })
})

// In template:
// <div v-if="isLoading">Loading...</div>
// <div v-else-if="isError">Something went wrong</div>
// <div v-else-if="!isReady">Preparing...</div>
// <div v-else>{{ data.length }} items loaded</div>

호출 시그니처

function useLiveQuery<TResult, TKey, TUtils>(liveQueryCollection): UseLiveQueryReturnWithCollection<TResult, TKey, TUtils>;

정의 위치: useLiveQuery.ts:229

기존 쿼리 컬렉션을 구독합니다(반응형일 수 있음).

타입 매개변수

TResult

TResult extends object

TKey

TKey extends string | number

TUtils

TUtils extends Record<string, any>

매개변수

liveQueryCollection

MaybeRefOrGetter<Collection<TResult, TKey, TUtils, StandardSchemaV1<unknown, unknown>, TResult> & NonSingleResult>

구독할 미리 생성된 쿼리 컬렉션입니다(ref일 수 있음).

반환값

UseLiveQueryReturnWithCollection<TResult, TKey, TUtils>

쿼리 데이터, 상태 및 상태 정보를 포함하는 반응형 객체

예제

// Using pre-created query collection
const myLiveQuery = createLiveQueryCollection((q) =>
  q.from({ todos: todosCollection }).where(({ todos }) => eq(todos.active, true))
)
const { data, collection } = useLiveQuery(myLiveQuery)

// Reactive query collection reference
const selectedQuery = ref(todosQuery)
const { data, collection } = useLiveQuery(selectedQuery)

// Switch queries reactively
selectedQuery.value = archiveQuery

// Access query collection methods directly
const { data, collection, isReady } = useLiveQuery(existingQuery)

// Use underlying collection for mutations
const handleToggle = (id) => {
  collection.value.update(id, draft => { draft.completed = !draft.completed })
}

// Handle states consistently
const { data, isLoading, isError } = useLiveQuery(sharedQuery)

// In template:
// <div v-if="isLoading">Loading...</div>
// <div v-else-if="isError">Error loading data</div>
// <div v-else>
//   <Item v-for="item in data" :key="item.id" v-bind="item" />
// </div>

호출 시그니처

function useLiveQuery<TResult, TKey, TUtils>(liveQueryCollection): UseLiveQueryReturnWithSingleResultCollection<TResult, TKey, TUtils>;

정의 위치: useLiveQuery.ts:240

쿼리 함수를 사용하여 라이브 쿼리를 생성합니다

타입 매개변수

TResult

TResult extends object

TKey

TKey extends string | number

TUtils

TUtils extends Record<string, any>

매개변수

liveQueryCollection

MaybeRefOrGetter<Collection<TResult, TKey, TUtils, StandardSchemaV1<unknown, unknown>, TResult> & SingleResult>

반환값

UseLiveQueryReturnWithSingleResultCollection<TResult, TKey, TUtils>

쿼리 데이터, 상태 및 상태 정보를 포함하는 반응형 객체

예제

// Basic query with object syntax
const { data, isLoading } = useLiveQuery((q) =>
  q.from({ todos: todosCollection })
   .where(({ todos }) => eq(todos.completed, false))
   .select(({ todos }) => ({ id: todos.id, text: todos.text }))
)

// With reactive dependencies
const minPriority = ref(5)
const { data, state } = useLiveQuery(
  (q) => q.from({ todos: todosCollection })
         .where(({ todos }) => gt(todos.priority, minPriority.value)),
  [minPriority] // Re-run when minPriority changes
)

// Join pattern
const { data } = useLiveQuery((q) =>
  q.from({ issues: issueCollection })
   .join({ persons: personCollection }, ({ issues, persons }) =>
     eq(issues.userId, persons.id)
   )
   .select(({ issues, persons }) => ({
     id: issues.id,
     title: issues.title,
     userName: persons.name
   }))
)

// Handle loading and error states in template
const { data, isLoading, isError, status } = useLiveQuery((q) =>
  q.from({ todos: todoCollection })
)

// In template:
// <div v-if="isLoading">Loading...</div>
// <div v-else-if="isError">Error: {{ status }}</div>
// <ul v-else>
//   <li v-for="todo in data" :key="todo.id">{{ todo.text }}</li>
// </ul>