function useLiveSuspenseQuery<TContext>(queryFn, deps?): object;
function useLiveSuspenseQuery<TContext>(queryFn, deps?): object;
Defined in: useLiveSuspenseQuery.ts:76
Create a live query with React Suspense support
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 and state - data is guaranteed to be defined
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: InferResultType<TContext>;
data: InferResultType<TContext>;
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] }>;
Promise when data is loading (caught by Suspense boundary)
Error when collection fails (caught by Error boundary)
// Basic usage with Suspense
function TodoList() {
const { data } = useLiveSuspenseQuery((q) =>
q.from({ todos: todosCollection })
.where(({ todos }) => eq(todos.completed, false))
.select(({ todos }) => ({ id: todos.id, text: todos.text }))
)
return (
<ul>
{data.map(todo => <li key={todo.id}>{todo.text}</li>)}
</ul>
)
}
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<TodoList />
</Suspense>
)
}
// Basic usage with Suspense
function TodoList() {
const { data } = useLiveSuspenseQuery((q) =>
q.from({ todos: todosCollection })
.where(({ todos }) => eq(todos.completed, false))
.select(({ todos }) => ({ id: todos.id, text: todos.text }))
)
return (
<ul>
{data.map(todo => <li key={todo.id}>{todo.text}</li>)}
</ul>
)
}
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<TodoList />
</Suspense>
)
}
// Single result query
const { data } = useLiveSuspenseQuery(
(q) => q.from({ todos: todosCollection })
.where(({ todos }) => eq(todos.id, 1))
.findOne()
)
// data is guaranteed to be the single item (or undefined if not found)
// Single result query
const { data } = useLiveSuspenseQuery(
(q) => q.from({ todos: todosCollection })
.where(({ todos }) => eq(todos.id, 1))
.findOne()
)
// data is guaranteed to be the single item (or undefined if not found)
// With dependencies that trigger re-suspension
const { data } = useLiveSuspenseQuery(
(q) => q.from({ todos: todosCollection })
.where(({ todos }) => gt(todos.priority, minPriority)),
[minPriority] // Re-suspends when minPriority changes
)
// With dependencies that trigger re-suspension
const { data } = useLiveSuspenseQuery(
(q) => q.from({ todos: todosCollection })
.where(({ todos }) => gt(todos.priority, minPriority)),
[minPriority] // Re-suspends when minPriority changes
)
// With Error boundary
function App() {
return (
<ErrorBoundary fallback={<div>Error loading data</div>}>
<Suspense fallback={<div>Loading...</div>}>
<TodoList />
</Suspense>
</ErrorBoundary>
)
}
// With Error boundary
function App() {
return (
<ErrorBoundary fallback={<div>Error loading data</div>}>
<Suspense fallback={<div>Loading...</div>}>
<TodoList />
</Suspense>
</ErrorBoundary>
)
}
function useLiveSuspenseQuery<TContext>(config, deps?): object;
function useLiveSuspenseQuery<TContext>(config, deps?): object;
Defined in: useLiveSuspenseQuery.ts:86
Create a live query with React Suspense support
TContext extends Context
LiveQueryCollectionConfig<TContext>
unknown[]
Array of dependencies that trigger query re-execution when changed
object
Object with reactive data and state - data is guaranteed to be defined
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: InferResultType<TContext>;
data: InferResultType<TContext>;
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] }>;
Promise when data is loading (caught by Suspense boundary)
Error when collection fails (caught by Error boundary)
// Basic usage with Suspense
function TodoList() {
const { data } = useLiveSuspenseQuery((q) =>
q.from({ todos: todosCollection })
.where(({ todos }) => eq(todos.completed, false))
.select(({ todos }) => ({ id: todos.id, text: todos.text }))
)
return (
<ul>
{data.map(todo => <li key={todo.id}>{todo.text}</li>)}
</ul>
)
}
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<TodoList />
</Suspense>
)
}
// Basic usage with Suspense
function TodoList() {
const { data } = useLiveSuspenseQuery((q) =>
q.from({ todos: todosCollection })
.where(({ todos }) => eq(todos.completed, false))
.select(({ todos }) => ({ id: todos.id, text: todos.text }))
)
return (
<ul>
{data.map(todo => <li key={todo.id}>{todo.text}</li>)}
</ul>
)
}
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<TodoList />
</Suspense>
)
}
// Single result query
const { data } = useLiveSuspenseQuery(
(q) => q.from({ todos: todosCollection })
.where(({ todos }) => eq(todos.id, 1))
.findOne()
)
// data is guaranteed to be the single item (or undefined if not found)
// Single result query
const { data } = useLiveSuspenseQuery(
(q) => q.from({ todos: todosCollection })
.where(({ todos }) => eq(todos.id, 1))
.findOne()
)
// data is guaranteed to be the single item (or undefined if not found)
// With dependencies that trigger re-suspension
const { data } = useLiveSuspenseQuery(
(q) => q.from({ todos: todosCollection })
.where(({ todos }) => gt(todos.priority, minPriority)),
[minPriority] // Re-suspends when minPriority changes
)
// With dependencies that trigger re-suspension
const { data } = useLiveSuspenseQuery(
(q) => q.from({ todos: todosCollection })
.where(({ todos }) => gt(todos.priority, minPriority)),
[minPriority] // Re-suspends when minPriority changes
)
// With Error boundary
function App() {
return (
<ErrorBoundary fallback={<div>Error loading data</div>}>
<Suspense fallback={<div>Loading...</div>}>
<TodoList />
</Suspense>
</ErrorBoundary>
)
}
// With Error boundary
function App() {
return (
<ErrorBoundary fallback={<div>Error loading data</div>}>
<Suspense fallback={<div>Loading...</div>}>
<TodoList />
</Suspense>
</ErrorBoundary>
)
}
function useLiveSuspenseQuery<TResult, TKey, TUtils>(liveQueryCollection): object;
function useLiveSuspenseQuery<TResult, TKey, TUtils>(liveQueryCollection): object;
Defined in: useLiveSuspenseQuery.ts:96
Create a live query with React Suspense support
TResult extends object
TKey extends string | number
TUtils extends Record<string, any>
Collection<TResult, TKey, TUtils, StandardSchemaV1<unknown, unknown>, TResult> & NonSingleResult
object
Object with reactive data and state - data is guaranteed to be defined
collection: Collection<TResult, TKey, TUtils>;
collection: Collection<TResult, TKey, TUtils>;
data: TResult[];
data: TResult[];
state: Map<TKey, TResult>;
state: Map<TKey, TResult>;
Promise when data is loading (caught by Suspense boundary)
Error when collection fails (caught by Error boundary)
// Basic usage with Suspense
function TodoList() {
const { data } = useLiveSuspenseQuery((q) =>
q.from({ todos: todosCollection })
.where(({ todos }) => eq(todos.completed, false))
.select(({ todos }) => ({ id: todos.id, text: todos.text }))
)
return (
<ul>
{data.map(todo => <li key={todo.id}>{todo.text}</li>)}
</ul>
)
}
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<TodoList />
</Suspense>
)
}
// Basic usage with Suspense
function TodoList() {
const { data } = useLiveSuspenseQuery((q) =>
q.from({ todos: todosCollection })
.where(({ todos }) => eq(todos.completed, false))
.select(({ todos }) => ({ id: todos.id, text: todos.text }))
)
return (
<ul>
{data.map(todo => <li key={todo.id}>{todo.text}</li>)}
</ul>
)
}
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<TodoList />
</Suspense>
)
}
// Single result query
const { data } = useLiveSuspenseQuery(
(q) => q.from({ todos: todosCollection })
.where(({ todos }) => eq(todos.id, 1))
.findOne()
)
// data is guaranteed to be the single item (or undefined if not found)
// Single result query
const { data } = useLiveSuspenseQuery(
(q) => q.from({ todos: todosCollection })
.where(({ todos }) => eq(todos.id, 1))
.findOne()
)
// data is guaranteed to be the single item (or undefined if not found)
// With dependencies that trigger re-suspension
const { data } = useLiveSuspenseQuery(
(q) => q.from({ todos: todosCollection })
.where(({ todos }) => gt(todos.priority, minPriority)),
[minPriority] // Re-suspends when minPriority changes
)
// With dependencies that trigger re-suspension
const { data } = useLiveSuspenseQuery(
(q) => q.from({ todos: todosCollection })
.where(({ todos }) => gt(todos.priority, minPriority)),
[minPriority] // Re-suspends when minPriority changes
)
// With Error boundary
function App() {
return (
<ErrorBoundary fallback={<div>Error loading data</div>}>
<Suspense fallback={<div>Loading...</div>}>
<TodoList />
</Suspense>
</ErrorBoundary>
)
}
// With Error boundary
function App() {
return (
<ErrorBoundary fallback={<div>Error loading data</div>}>
<Suspense fallback={<div>Loading...</div>}>
<TodoList />
</Suspense>
</ErrorBoundary>
)
}
function useLiveSuspenseQuery<TResult, TKey, TUtils>(liveQueryCollection): object;
function useLiveSuspenseQuery<TResult, TKey, TUtils>(liveQueryCollection): object;
Defined in: useLiveSuspenseQuery.ts:109
Create a live query with React Suspense support
TResult extends object
TKey extends string | number
TUtils extends Record<string, any>
Collection<TResult, TKey, TUtils, StandardSchemaV1<unknown, unknown>, TResult> & SingleResult
object
Object with reactive data and state - data is guaranteed to be defined
collection: Collection<TResult, TKey, TUtils, StandardSchemaV1<unknown, unknown>, TResult> & SingleResult;
collection: Collection<TResult, TKey, TUtils, StandardSchemaV1<unknown, unknown>, TResult> & SingleResult;
data: TResult | undefined;
data: TResult | undefined;
state: Map<TKey, TResult>;
state: Map<TKey, TResult>;
Promise when data is loading (caught by Suspense boundary)
Error when collection fails (caught by Error boundary)
// Basic usage with Suspense
function TodoList() {
const { data } = useLiveSuspenseQuery((q) =>
q.from({ todos: todosCollection })
.where(({ todos }) => eq(todos.completed, false))
.select(({ todos }) => ({ id: todos.id, text: todos.text }))
)
return (
<ul>
{data.map(todo => <li key={todo.id}>{todo.text}</li>)}
</ul>
)
}
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<TodoList />
</Suspense>
)
}
// Basic usage with Suspense
function TodoList() {
const { data } = useLiveSuspenseQuery((q) =>
q.from({ todos: todosCollection })
.where(({ todos }) => eq(todos.completed, false))
.select(({ todos }) => ({ id: todos.id, text: todos.text }))
)
return (
<ul>
{data.map(todo => <li key={todo.id}>{todo.text}</li>)}
</ul>
)
}
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<TodoList />
</Suspense>
)
}
// Single result query
const { data } = useLiveSuspenseQuery(
(q) => q.from({ todos: todosCollection })
.where(({ todos }) => eq(todos.id, 1))
.findOne()
)
// data is guaranteed to be the single item (or undefined if not found)
// Single result query
const { data } = useLiveSuspenseQuery(
(q) => q.from({ todos: todosCollection })
.where(({ todos }) => eq(todos.id, 1))
.findOne()
)
// data is guaranteed to be the single item (or undefined if not found)
// With dependencies that trigger re-suspension
const { data } = useLiveSuspenseQuery(
(q) => q.from({ todos: todosCollection })
.where(({ todos }) => gt(todos.priority, minPriority)),
[minPriority] // Re-suspends when minPriority changes
)
// With dependencies that trigger re-suspension
const { data } = useLiveSuspenseQuery(
(q) => q.from({ todos: todosCollection })
.where(({ todos }) => gt(todos.priority, minPriority)),
[minPriority] // Re-suspends when minPriority changes
)
// With Error boundary
function App() {
return (
<ErrorBoundary fallback={<div>Error loading data</div>}>
<Suspense fallback={<div>Loading...</div>}>
<TodoList />
</Suspense>
</ErrorBoundary>
)
}
// With Error boundary
function App() {
return (
<ErrorBoundary fallback={<div>Error loading data</div>}>
<Suspense fallback={<div>Loading...</div>}>
<TodoList />
</Suspense>
</ErrorBoundary>
)
}