function useLiveQuery<TContext>(queryFn, deps?): UseLiveQueryReturn<{ [K in string | number | symbol]: (TContext["result"] extends object ? any[any] : TContext["hasJoins"] extends true ? TContext["schema"] : TContext["schema"][TContext["fromSourceName"]])[K] }>
function useLiveQuery<TContext>(queryFn, deps?): UseLiveQueryReturn<{ [K in string | number | symbol]: (TContext["result"] extends object ? any[any] : TContext["hasJoins"] extends true ? TContext["schema"] : TContext["schema"][TContext["fromSourceName"]])[K] }>
Defined in: useLiveQuery.ts:113
Create a live query using a query function
• TContext extends Context
(q) => QueryBuilder<TContext>
Query function that defines what data to fetch
unknown[]
Array of reactive dependencies that trigger query re-execution when changed
UseLiveQueryReturn<{ [K in string | number | symbol]: (TContext["result"] extends object ? any[any] : TContext["hasJoins"] extends true ? TContext["schema"] : TContext["schema"][TContext["fromSourceName"]])[K] }>
Reactive object with query data, state, and status information
// 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 }))
)
// 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
)
// 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
}))
)
// 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>
// 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<{ [K in string | number | symbol]: (TContext["result"] extends object ? any[any] : TContext["hasJoins"] extends true ? TContext["schema"] : TContext["schema"][TContext["fromSourceName"]])[K] }>
function useLiveQuery<TContext>(config, deps?): UseLiveQueryReturn<{ [K in string | number | symbol]: (TContext["result"] extends object ? any[any] : TContext["hasJoins"] extends true ? TContext["schema"] : TContext["schema"][TContext["fromSourceName"]])[K] }>
Defined in: useLiveQuery.ts:151
Create a live query using configuration object
• TContext extends Context
LiveQueryCollectionConfig<TContext>
Configuration object with query and options
unknown[]
Array of reactive dependencies that trigger query re-execution when changed
UseLiveQueryReturn<{ [K in string | number | symbol]: (TContext["result"] extends object ? any[any] : TContext["hasJoins"] extends true ? TContext["schema"] : TContext["schema"][TContext["fromSourceName"]])[K] }>
Reactive object with query data, state, and status information
// Basic config object usage
const { data, status } = useLiveQuery({
query: (q) => q.from({ todos: todosCollection }),
gcTime: 60000
})
// 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])
// 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>
// 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>
function useLiveQuery<TResult, TKey, TUtils>(liveQueryCollection): UseLiveQueryReturnWithCollection<TResult, TKey, TUtils>
Defined in: useLiveQuery.ts:196
Subscribe to an existing query collection (can be reactive)
• TResult extends object
• TKey extends string | number
• TUtils extends Record<string, any>
MaybeRefOrGetter<Collection<TResult, TKey, TUtils, StandardSchemaV1<unknown, unknown>, TResult>>
Pre-created query collection to subscribe to (can be a ref)
UseLiveQueryReturnWithCollection<TResult, TKey, TUtils>
Reactive object with query data, state, and status information
// Using pre-created query collection
const myLiveQuery = createLiveQueryCollection((q) =>
q.from({ todos: todosCollection }).where(({ todos }) => eq(todos.active, true))
)
const { data, collection } = useLiveQuery(myLiveQuery)
// 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
// 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 })
}
// 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>
// 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>