function useLiveQuery<TContext>(queryFn, deps?): object
function useLiveQuery<TContext>(queryFn, deps?): object
Defined in: useLiveQuery.ts:64
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 dependencies that trigger query re-execution when changed
object
Object with reactive data, state, and status information
collection: Collection<{ [K in string | number | symbol]: (TContext["result"] extends object ? any[any] : TContext["hasJoins"] extends true ? TContext["schema"] : TContext["schema"][TContext["fromSourceName"]])[K] }, string | number, {}>;
collection: Collection<{ [K in string | number | symbol]: (TContext["result"] extends object ? any[any] : TContext["hasJoins"] extends true ? TContext["schema"] : TContext["schema"][TContext["fromSourceName"]])[K] }, string | number, {}>;
data: { [K in string | number | symbol]: (TContext["result"] extends object ? any[any] : TContext["hasJoins"] extends true ? TContext["schema"] : TContext["schema"][TContext["fromSourceName"]])[K] }[];
data: { [K in string | number | symbol]: (TContext["result"] extends object ? any[any] : TContext["hasJoins"] extends true ? TContext["schema"] : TContext["schema"][TContext["fromSourceName"]])[K] }[];
isCleanedUp: boolean;
isCleanedUp: boolean;
isError: boolean;
isError: boolean;
isIdle: boolean;
isIdle: boolean;
isLoading: boolean;
isLoading: boolean;
isReady: boolean;
isReady: boolean;
state: Map<string | number, { [K in string | number | symbol]: (TContext["result"] extends object ? any[any] : TContext["hasJoins"] extends true ? TContext["schema"] : TContext["schema"][TContext["fromSourceName"]])[K] }>;
state: Map<string | number, { [K in string | number | symbol]: (TContext["result"] extends object ? any[any] : TContext["hasJoins"] extends true ? TContext["schema"] : TContext["schema"][TContext["fromSourceName"]])[K] }>;
status: CollectionStatus;
status: CollectionStatus;
// 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 dependencies that trigger re-execution
const { data, state } = useLiveQuery(
(q) => q.from({ todos: todosCollection })
.where(({ todos }) => gt(todos.priority, minPriority)),
[minPriority] // Re-run when minPriority changes
)
// With dependencies that trigger re-execution
const { data, state } = useLiveQuery(
(q) => q.from({ todos: todosCollection })
.where(({ todos }) => gt(todos.priority, minPriority)),
[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
const { data, isLoading, isError, status } = useLiveQuery((q) =>
q.from({ todos: todoCollection })
)
if (isLoading) return <div>Loading...</div>
if (isError) return <div>Error: {status}</div>
return (
<ul>
{data.map(todo => <li key={todo.id}>{todo.text}</li>)}
</ul>
)
// Handle loading and error states
const { data, isLoading, isError, status } = useLiveQuery((q) =>
q.from({ todos: todoCollection })
)
if (isLoading) return <div>Loading...</div>
if (isError) return <div>Error: {status}</div>
return (
<ul>
{data.map(todo => <li key={todo.id}>{todo.text}</li>)}
</ul>
)
function useLiveQuery<TContext>(config, deps?): object
function useLiveQuery<TContext>(config, deps?): object
Defined in: useLiveQuery.ts:113
Create a live query using configuration object
• TContext extends Context
LiveQueryCollectionConfig<TContext>
Configuration object with query and options
unknown[]
Array of dependencies that trigger query re-execution when changed
object
Object with reactive data, state, and status information
collection: Collection<{ [K in string | number | symbol]: (TContext["result"] extends object ? any[any] : TContext["hasJoins"] extends true ? TContext["schema"] : TContext["schema"][TContext["fromSourceName"]])[K] }, string | number, {}>;
collection: Collection<{ [K in string | number | symbol]: (TContext["result"] extends object ? any[any] : TContext["hasJoins"] extends true ? TContext["schema"] : TContext["schema"][TContext["fromSourceName"]])[K] }, string | number, {}>;
data: { [K in string | number | symbol]: (TContext["result"] extends object ? any[any] : TContext["hasJoins"] extends true ? TContext["schema"] : TContext["schema"][TContext["fromSourceName"]])[K] }[];
data: { [K in string | number | symbol]: (TContext["result"] extends object ? any[any] : TContext["hasJoins"] extends true ? TContext["schema"] : TContext["schema"][TContext["fromSourceName"]])[K] }[];
isCleanedUp: boolean;
isCleanedUp: boolean;
isError: boolean;
isError: boolean;
isIdle: boolean;
isIdle: boolean;
isLoading: boolean;
isLoading: boolean;
isReady: boolean;
isReady: boolean;
state: Map<string | number, { [K in string | number | symbol]: (TContext["result"] extends object ? any[any] : TContext["hasJoins"] extends true ? TContext["schema"] : TContext["schema"][TContext["fromSourceName"]])[K] }>;
state: Map<string | number, { [K in string | number | symbol]: (TContext["result"] extends object ? any[any] : TContext["hasJoins"] extends true ? TContext["schema"] : TContext["schema"][TContext["fromSourceName"]])[K] }>;
status: CollectionStatus;
status: CollectionStatus;
// 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 query builder and options
const queryBuilder = new Query()
.from({ persons: collection })
.where(({ persons }) => gt(persons.age, 30))
.select(({ persons }) => ({ id: persons.id, name: persons.name }))
const { data, isReady } = useLiveQuery({ query: queryBuilder })
// With query builder and options
const queryBuilder = new Query()
.from({ persons: collection })
.where(({ persons }) => gt(persons.age, 30))
.select(({ persons }) => ({ id: persons.id, name: persons.name }))
const { data, isReady } = useLiveQuery({ query: queryBuilder })
// Handle all states uniformly
const { data, isLoading, isReady, isError } = useLiveQuery({
query: (q) => q.from({ items: itemCollection })
})
if (isLoading) return <div>Loading...</div>
if (isError) return <div>Something went wrong</div>
if (!isReady) return <div>Preparing...</div>
return <div>{data.length} items loaded</div>
// Handle all states uniformly
const { data, isLoading, isReady, isError } = useLiveQuery({
query: (q) => q.from({ items: itemCollection })
})
if (isLoading) return <div>Loading...</div>
if (isError) return <div>Something went wrong</div>
if (!isReady) return <div>Preparing...</div>
return <div>{data.length} items loaded</div>
function useLiveQuery<TResult, TKey, TUtils>(liveQueryCollection): object
function useLiveQuery<TResult, TKey, TUtils>(liveQueryCollection): object
Defined in: useLiveQuery.ts:158
Subscribe to an existing live query collection
• TResult extends object
• TKey extends string | number
• TUtils extends Record<string, any>
Collection<TResult, TKey, TUtils>
Pre-created live query collection to subscribe to
object
Object with reactive data, state, and status information
collection: Collection<TResult, TKey, TUtils>;
collection: Collection<TResult, TKey, TUtils>;
data: TResult[];
data: TResult[];
isCleanedUp: boolean;
isCleanedUp: boolean;
isError: boolean;
isError: boolean;
isIdle: boolean;
isIdle: boolean;
isLoading: boolean;
isLoading: boolean;
isReady: boolean;
isReady: boolean;
state: Map<TKey, TResult>;
state: Map<TKey, TResult>;
status: CollectionStatus;
status: CollectionStatus;
// Using pre-created live query collection
const myLiveQuery = createLiveQueryCollection((q) =>
q.from({ todos: todosCollection }).where(({ todos }) => eq(todos.active, true))
)
const { data, collection } = useLiveQuery(myLiveQuery)
// Using pre-created live query collection
const myLiveQuery = createLiveQueryCollection((q) =>
q.from({ todos: todosCollection }).where(({ todos }) => eq(todos.active, true))
)
const { data, collection } = useLiveQuery(myLiveQuery)
// Access collection methods directly
const { data, collection, isReady } = useLiveQuery(existingCollection)
// Use collection for mutations
const handleToggle = (id) => {
collection.update(id, draft => { draft.completed = !draft.completed })
}
// Access collection methods directly
const { data, collection, isReady } = useLiveQuery(existingCollection)
// Use collection for mutations
const handleToggle = (id) => {
collection.update(id, draft => { draft.completed = !draft.completed })
}
// Handle states consistently
const { data, isLoading, isError } = useLiveQuery(sharedCollection)
if (isLoading) return <div>Loading...</div>
if (isError) return <div>Error loading data</div>
return <div>{data.map(item => <Item key={item.id} {...item} />)}</div>
// Handle states consistently
const { data, isLoading, isError } = useLiveQuery(sharedCollection)
if (isLoading) return <div>Loading...</div>
if (isError) return <div>Error loading data</div>
return <div>{data.map(item => <Item key={item.id} {...item} />)}</div>
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.
