@livequery/react 2.0.137 → 2.0.138
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -11
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -91,7 +91,6 @@ The hook must be used under a matching provider. If it is called outside the pro
|
|
|
91
91
|
Use it when a component needs the full collection API: reactive state plus methods such as querying or mutations.
|
|
92
92
|
|
|
93
93
|
```tsx
|
|
94
|
-
import { useEffect } from 'react'
|
|
95
94
|
import { useCollection, useObservable } from '@livequery/react'
|
|
96
95
|
|
|
97
96
|
type Todo = {
|
|
@@ -101,15 +100,12 @@ type Todo = {
|
|
|
101
100
|
}
|
|
102
101
|
|
|
103
102
|
export function TodoList() {
|
|
103
|
+
// lazy: false — collection queries automatically on initialization
|
|
104
104
|
const collection = useCollection<Todo>('todos', { lazy: false })
|
|
105
105
|
const items = useObservable(collection.items, [])
|
|
106
106
|
const loading = useObservable(collection.loading, false)
|
|
107
107
|
const error = useObservable(collection.error)
|
|
108
108
|
|
|
109
|
-
useEffect(() => {
|
|
110
|
-
collection.query()
|
|
111
|
-
}, [collection])
|
|
112
|
-
|
|
113
109
|
if (loading) return <p>Loading...</p>
|
|
114
110
|
if (error) return <p>Could not load todos.</p>
|
|
115
111
|
|
|
@@ -123,6 +119,8 @@ export function TodoList() {
|
|
|
123
119
|
}
|
|
124
120
|
```
|
|
125
121
|
|
|
122
|
+
When `lazy: false`, the collection queries automatically when initialized — no `useEffect` or manual `collection.query()` call is needed. Use `lazy: true` (the default) when you need to control when the query fires, such as after user interaction or after other async setup completes.
|
|
123
|
+
|
|
126
124
|
Behavior notes:
|
|
127
125
|
|
|
128
126
|
- `ref` may be `undefined`, `null`, `false`, or an empty string. Falsy refs skip initialization.
|
|
@@ -239,7 +237,6 @@ function TodoLoading({ loading$ }: { loading$: BehaviorSubject<boolean> }) {
|
|
|
239
237
|
### Full example
|
|
240
238
|
|
|
241
239
|
```tsx
|
|
242
|
-
import { useEffect } from 'react'
|
|
243
240
|
import { BehaviorSubject } from 'rxjs'
|
|
244
241
|
import { useCollection, useObservable } from '@livequery/react'
|
|
245
242
|
|
|
@@ -257,13 +254,10 @@ function TodoItem({ item$ }: { item$: BehaviorSubject<Todo> }) {
|
|
|
257
254
|
}
|
|
258
255
|
|
|
259
256
|
export function TodoList() {
|
|
260
|
-
|
|
257
|
+
// lazy: false — no need to call collection.query() manually
|
|
258
|
+
const collection = useCollection<Todo>('todos', { lazy: false })
|
|
261
259
|
const items = useObservable(collection.items, [])
|
|
262
260
|
|
|
263
|
-
useEffect(() => {
|
|
264
|
-
collection.query()
|
|
265
|
-
}, [collection])
|
|
266
|
-
|
|
267
261
|
return (
|
|
268
262
|
<>
|
|
269
263
|
<TodoLoading loading$={collection.loading} />
|