함수: useLiveQuery()

호출 시그니처

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

정의 위치: useLiveQuery.ts:360

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

타입 매개변수

TContext

TContext extends Context

매개변수

queryFn

(q) => QueryBuilder<TContext>

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

deps?

unknown[]

변경 시 쿼리 재실행을 트리거하는 더 이상 사용되지 않는 종속성 배열입니다.

반환값

object

반응형 데이터, 상태 및 상태 정보를 포함하는 객체입니다.

collection

collection: Collection<{ [K in string | number | symbol]: ResultValue<TContext>[K] }, string | number, {
}>;

data

data: InferResultType<TContext>;

isCleanedUp

isCleanedUp: boolean;

isEnabled

isEnabled: true;

isError

isError: boolean;

isIdle

isIdle: boolean;

isLoading

isLoading: boolean;

isReady

isReady: boolean;

state

state: Map<string | number, { [K in string | number | symbol]: ResultValue<TContext>[K] }>;

status

status: CollectionStatus;

예제

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

// Single result query
const { data } = useLiveQuery({
  query: (q) => q.from({ todos: todosCollection })
         .where(({ todos }) => eq(todos.id, 1))
         .findOne()
})

// Structured captured values are included in derived query identity
const { data, state } = useLiveQuery({
  query: (q) => q.from({ todos: todosCollection })
         .where(({ todos }) => gt(todos.priority, minPriority)),
})

// Return undefined or null to disable a query
const { data, isEnabled } = useLiveQuery({
  query: (q) => {
    if (!userId) return undefined
    return q.from({ todos: todosCollection })
            .where(({ todos }) => eq(todos.userId, userId))
  },
})

// Join pattern
const { data } = useLiveQuery({
  query: (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({
  query: (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>(queryFn, deps?): object;

정의 위치: useLiveQuery.ts:377

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

타입 매개변수

TContext

TContext extends Context

매개변수

queryFn

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

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

deps?

unknown[]

변경 시 쿼리 재실행을 트리거하는 더 이상 사용되지 않는 종속성 배열입니다.

반환값

object

반응형 데이터, 상태 및 상태 정보를 포함하는 객체입니다.

collection

collection: 
  | Collection<{ [K in string | number | symbol]: ResultValue<TContext>[K] }, string | number, {
}, StandardSchemaV1<unknown, unknown>, { [K in string | number | symbol]: ResultValue<TContext>[K] }>
  | undefined;

data

data: InferResultType<TContext> | undefined;

isCleanedUp

isCleanedUp: boolean;

isEnabled

isEnabled: boolean;

isError

isError: boolean;

isIdle

isIdle: boolean;

isLoading

isLoading: boolean;

isReady

isReady: boolean;

state

state: 
  | Map<string | number, { [K in string | number | symbol]: ResultValue<TContext>[K] }>
  | undefined;

status

status: UseLiveQueryStatus;

예제

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

// Single result query
const { data } = useLiveQuery({
  query: (q) => q.from({ todos: todosCollection })
         .where(({ todos }) => eq(todos.id, 1))
         .findOne()
})

// Structured captured values are included in derived query identity
const { data, state } = useLiveQuery({
  query: (q) => q.from({ todos: todosCollection })
         .where(({ todos }) => gt(todos.priority, minPriority)),
})

// Return undefined or null to disable a query
const { data, isEnabled } = useLiveQuery({
  query: (q) => {
    if (!userId) return undefined
    return q.from({ todos: todosCollection })
            .where(({ todos }) => eq(todos.userId, userId))
  },
})

// Join pattern
const { data } = useLiveQuery({
  query: (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({
  query: (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>(queryFn, deps?): object;

정의 위치: useLiveQuery.ts:396

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

타입 매개변수

TContext

TContext extends Context

매개변수

queryFn

(q) => | LiveQueryCollectionConfig<TContext, RootQueryResult<TContext>> | null | undefined

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

deps?

unknown[]

변경 시 쿼리 재실행을 트리거하는 더 이상 사용되지 않는 종속성 배열입니다.

반환값

object

반응형 데이터, 상태 및 상태 정보를 포함하는 객체입니다.

collection

collection: 
  | Collection<{ [K in string | number | symbol]: ResultValue<TContext>[K] }, string | number, {
}, StandardSchemaV1<unknown, unknown>, { [K in string | number | symbol]: ResultValue<TContext>[K] }>
  | undefined;

data

data: InferResultType<TContext> | undefined;

isCleanedUp

isCleanedUp: boolean;

isEnabled

isEnabled: boolean;

isError

isError: boolean;

isIdle

isIdle: boolean;

isLoading

isLoading: boolean;

isReady

isReady: boolean;

state

state: 
  | Map<string | number, { [K in string | number | symbol]: ResultValue<TContext>[K] }>
  | undefined;

status

status: UseLiveQueryStatus;

예제

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

// Single result query
const { data } = useLiveQuery({
  query: (q) => q.from({ todos: todosCollection })
         .where(({ todos }) => eq(todos.id, 1))
         .findOne()
})

// Structured captured values are included in derived query identity
const { data, state } = useLiveQuery({
  query: (q) => q.from({ todos: todosCollection })
         .where(({ todos }) => gt(todos.priority, minPriority)),
})

// Return undefined or null to disable a query
const { data, isEnabled } = useLiveQuery({
  query: (q) => {
    if (!userId) return undefined
    return q.from({ todos: todosCollection })
            .where(({ todos }) => eq(todos.userId, userId))
  },
})

// Join pattern
const { data } = useLiveQuery({
  query: (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({
  query: (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<TResult, TKey, TUtils>(queryFn, deps?): object;

정의 위치: useLiveQuery.ts:415

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

타입 매개변수

TResult

TResult extends object

TKey

TKey extends string | number

TUtils

TUtils extends Record<string, any>

매개변수

queryFn

(q) => | Collection<TResult, TKey, TUtils, StandardSchemaV1<unknown, unknown>, TResult> | null | undefined

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

deps?

unknown[]

변경 시 쿼리 재실행을 트리거하는 더 이상 사용되지 않는 종속성 배열입니다.

반환값

object

반응형 데이터, 상태 및 상태 정보를 포함하는 객체입니다.

collection

collection: 
  | Collection<TResult, TKey, TUtils, StandardSchemaV1<unknown, unknown>, TResult>
  | undefined;

data

data: TResult[] | undefined;

isCleanedUp

isCleanedUp: boolean;

isEnabled

isEnabled: boolean;

isError

isError: boolean;

isIdle

isIdle: boolean;

isLoading

isLoading: boolean;

isReady

isReady: boolean;

state

state: Map<TKey, TResult> | undefined;

status

status: UseLiveQueryStatus;

예제

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

// Single result query
const { data } = useLiveQuery({
  query: (q) => q.from({ todos: todosCollection })
         .where(({ todos }) => eq(todos.id, 1))
         .findOne()
})

// Structured captured values are included in derived query identity
const { data, state } = useLiveQuery({
  query: (q) => q.from({ todos: todosCollection })
         .where(({ todos }) => gt(todos.priority, minPriority)),
})

// Return undefined or null to disable a query
const { data, isEnabled } = useLiveQuery({
  query: (q) => {
    if (!userId) return undefined
    return q.from({ todos: todosCollection })
            .where(({ todos }) => eq(todos.userId, userId))
  },
})

// Join pattern
const { data } = useLiveQuery({
  query: (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({
  query: (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, TResult, TKey, TUtils>(queryFn, deps?): object;

정의 위치: useLiveQuery.ts:438

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

타입 매개변수

TContext

TContext extends Context

TResult

TResult extends object

TKey

TKey extends string | number

TUtils

TUtils extends Record<string, any>

매개변수

queryFn

(q) => | QueryBuilder<TContext> | LiveQueryCollectionConfig<TContext, RootQueryResult<TContext>> | Collection<TResult, TKey, TUtils, StandardSchemaV1<unknown, unknown>, TResult> | null | undefined

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

deps?

unknown[]

변경 시 쿼리 재실행을 트리거하는 더 이상 사용되지 않는 종속성 배열입니다.

반환값

object

반응형 데이터, 상태 및 상태 정보를 포함하는 객체입니다.

collection

collection: 
  | Collection<TResult, TKey, TUtils, StandardSchemaV1<unknown, unknown>, TResult>
  | Collection<{ [K in string | number | symbol]: ResultValue<TContext>[K] }, string | number, {
}, StandardSchemaV1<unknown, unknown>, { [K in string | number | symbol]: ResultValue<TContext>[K] }>
  | undefined;

data

data: InferResultType<TContext> | TResult[] | undefined;

isCleanedUp

isCleanedUp: boolean;

isEnabled

isEnabled: boolean;

isError

isError: boolean;

isIdle

isIdle: boolean;

isLoading

isLoading: boolean;

isReady

isReady: boolean;

state

state: 
  | Map<string | number, { [K in string | number | symbol]: ResultValue<TContext>[K] }>
  | Map<TKey, TResult>
  | undefined;

status

status: UseLiveQueryStatus;

예제

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

// Single result query
const { data } = useLiveQuery({
  query: (q) => q.from({ todos: todosCollection })
         .where(({ todos }) => eq(todos.id, 1))
         .findOne()
})

// Structured captured values are included in derived query identity
const { data, state } = useLiveQuery({
  query: (q) => q.from({ todos: todosCollection })
         .where(({ todos }) => gt(todos.priority, minPriority)),
})

// Return undefined or null to disable a query
const { data, isEnabled } = useLiveQuery({
  query: (q) => {
    if (!userId) return undefined
    return q.from({ todos: todosCollection })
            .where(({ todos }) => eq(todos.userId, userId))
  },
})

// Join pattern
const { data } = useLiveQuery({
  query: (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({
  query: (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): object;

정의 위치: useLiveQuery.ts:508

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

타입 매개변수

TContext

TContext extends Context

매개변수

config

UseLiveQueryConfig<TContext>

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

반환값

object

반응형 데이터, 상태 및 상태 정보를 포함하는 객체입니다.

collection

collection: Collection<{ [K in string | number | symbol]: ResultValue<TContext>[K] }, string | number, {
}>;

data

data: InferResultType<TContext>;

isCleanedUp

isCleanedUp: boolean;

isEnabled

isEnabled: true;

isError

isError: boolean;

isIdle

isIdle: boolean;

isLoading

isLoading: boolean;

isReady

isReady: boolean;

state

state: Map<string | number, { [K in string | number | symbol]: ResultValue<TContext>[K] }>;

status

status: CollectionStatus;

예제

// 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,
})

// 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<TContext>(config): object;

정의 위치: useLiveQuery.ts:524

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

타입 매개변수

TContext

TContext extends Context

매개변수

config

ConditionalUseLiveQueryConfig<TContext>

반환값

object

반응형 데이터, 상태 및 상태 정보를 포함하는 객체입니다.

collection

collection: 
  | Collection<{ [K in string | number | symbol]: ResultValue<TContext>[K] }, string | number, {
}, StandardSchemaV1<unknown, unknown>, { [K in string | number | symbol]: ResultValue<TContext>[K] }>
  | undefined;

data

data: InferResultType<TContext> | undefined;

isCleanedUp

isCleanedUp: boolean;

isEnabled

isEnabled: boolean;

isError

isError: boolean;

isIdle

isIdle: boolean;

isLoading

isLoading: boolean;

isReady

isReady: boolean;

state

state: 
  | Map<string | number, { [K in string | number | symbol]: ResultValue<TContext>[K] }>
  | undefined;

status

status: UseLiveQueryStatus;

예제

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

// Single result query
const { data } = useLiveQuery({
  query: (q) => q.from({ todos: todosCollection })
         .where(({ todos }) => eq(todos.id, 1))
         .findOne()
})

// Structured captured values are included in derived query identity
const { data, state } = useLiveQuery({
  query: (q) => q.from({ todos: todosCollection })
         .where(({ todos }) => gt(todos.priority, minPriority)),
})

// Return undefined or null to disable a query
const { data, isEnabled } = useLiveQuery({
  query: (q) => {
    if (!userId) return undefined
    return q.from({ todos: todosCollection })
            .where(({ todos }) => eq(todos.userId, userId))
  },
})

// Join pattern
const { data } = useLiveQuery({
  query: (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({
  query: (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;

정의 위치: useLiveQuery.ts:540

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

타입 매개변수

TContext

TContext extends Context

매개변수

config

LiveQueryCollectionConfig<TContext>

deps?

unknown[]

변경 시 쿼리 재실행을 트리거하는 더 이상 사용되지 않는 종속성 배열입니다.

반환값

object

반응형 데이터, 상태 및 상태 정보를 포함하는 객체입니다.

collection

collection: Collection<{ [K in string | number | symbol]: ResultValue<TContext>[K] }, string | number, {
}>;

data

data: InferResultType<TContext>;

isCleanedUp

isCleanedUp: boolean;

isEnabled

isEnabled: true;

isError

isError: boolean;

isIdle

isIdle: boolean;

isLoading

isLoading: boolean;

isReady

isReady: boolean;

state

state: Map<string | number, { [K in string | number | symbol]: ResultValue<TContext>[K] }>;

status

status: CollectionStatus;

예제

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

// Single result query
const { data } = useLiveQuery({
  query: (q) => q.from({ todos: todosCollection })
         .where(({ todos }) => eq(todos.id, 1))
         .findOne()
})

// Structured captured values are included in derived query identity
const { data, state } = useLiveQuery({
  query: (q) => q.from({ todos: todosCollection })
         .where(({ todos }) => gt(todos.priority, minPriority)),
})

// Return undefined or null to disable a query
const { data, isEnabled } = useLiveQuery({
  query: (q) => {
    if (!userId) return undefined
    return q.from({ todos: todosCollection })
            .where(({ todos }) => eq(todos.userId, userId))
  },
})

// Join pattern
const { data } = useLiveQuery({
  query: (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({
  query: (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;

정의 위치: useLiveQuery.ts:557

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

타입 매개변수

TContext

TContext extends Context

매개변수

config

ConditionalUseLiveQueryConfig<TContext>

deps

unknown[]

변경 시 쿼리 재실행을 트리거하는 더 이상 사용되지 않는 종속성 배열입니다.

반환값

object

반응형 데이터, 상태 및 상태 정보를 포함하는 객체입니다.

collection

collection: 
  | Collection<{ [K in string | number | symbol]: ResultValue<TContext>[K] }, string | number, {
}, StandardSchemaV1<unknown, unknown>, { [K in string | number | symbol]: ResultValue<TContext>[K] }>
  | undefined;

data

data: InferResultType<TContext> | undefined;

isCleanedUp

isCleanedUp: boolean;

isEnabled

isEnabled: boolean;

isError

isError: boolean;

isIdle

isIdle: boolean;

isLoading

isLoading: boolean;

isReady

isReady: boolean;

state

state: 
  | Map<string | number, { [K in string | number | symbol]: ResultValue<TContext>[K] }>
  | undefined;

status

status: UseLiveQueryStatus;

예제

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

// Single result query
const { data } = useLiveQuery({
  query: (q) => q.from({ todos: todosCollection })
         .where(({ todos }) => eq(todos.id, 1))
         .findOne()
})

// Structured captured values are included in derived query identity
const { data, state } = useLiveQuery({
  query: (q) => q.from({ todos: todosCollection })
         .where(({ todos }) => gt(todos.priority, minPriority)),
})

// Return undefined or null to disable a query
const { data, isEnabled } = useLiveQuery({
  query: (q) => {
    if (!userId) return undefined
    return q.from({ todos: todosCollection })
            .where(({ todos }) => eq(todos.userId, userId))
  },
})

// Join pattern
const { data } = useLiveQuery({
  query: (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({
  query: (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<TResult, TKey, TUtils>(liveQueryCollection): object;

정의 위치: useLiveQuery.ts:603

기존 라이브 쿼리 컬렉션을 구독합니다.

타입 매개변수

TResult

TResult extends object

TKey

TKey extends string | number

TUtils

TUtils extends Record<string, any>

매개변수

liveQueryCollection

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

구독할 미리 생성된 라이브 쿼리 컬렉션입니다.

반환값

object

반응형 데이터, 상태 및 상태 정보를 포함하는 객체입니다.

collection

collection: Collection<TResult, TKey, TUtils>;

data

data: TResult[];

isCleanedUp

isCleanedUp: boolean;

isEnabled

isEnabled: true;

isError

isError: boolean;

isIdle

isIdle: boolean;

isLoading

isLoading: boolean;

isReady

isReady: boolean;

state

state: Map<TKey, TResult>;

status

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)

// 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>

호출 시그니처

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

정의 위치: useLiveQuery.ts:623

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

타입 매개변수

TResult

TResult extends object

TKey

TKey extends string | number

TUtils

TUtils extends Record<string, any>

매개변수

liveQueryCollection

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

반환값

object

반응형 데이터, 상태 및 상태 정보를 포함하는 객체입니다.

collection

collection: Collection<TResult, TKey, TUtils, StandardSchemaV1<unknown, unknown>, TResult> & SingleResult;

data

data: TResult | undefined;

isCleanedUp

isCleanedUp: boolean;

isEnabled

isEnabled: true;

isError

isError: boolean;

isIdle

isIdle: boolean;

isLoading

isLoading: boolean;

isReady

isReady: boolean;

state

state: Map<TKey, TResult>;

status

status: CollectionStatus;

예제

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

// Single result query
const { data } = useLiveQuery({
  query: (q) => q.from({ todos: todosCollection })
         .where(({ todos }) => eq(todos.id, 1))
         .findOne()
})

// Structured captured values are included in derived query identity
const { data, state } = useLiveQuery({
  query: (q) => q.from({ todos: todosCollection })
         .where(({ todos }) => gt(todos.priority, minPriority)),
})

// Return undefined or null to disable a query
const { data, isEnabled } = useLiveQuery({
  query: (q) => {
    if (!userId) return undefined
    return q.from({ todos: todosCollection })
            .where(({ todos }) => eq(todos.userId, userId))
  },
})

// Join pattern
const { data } = useLiveQuery({
  query: (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({
  query: (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>
)