Last active
January 28, 2021 09:34
-
-
Save dfahlander/9db0cd1476ea61782aaafb75191e8b14 to your computer and use it in GitHub Desktop.
Example of a React component using useLiveQuery()
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function FriendsComponent({minAge = 75}) { | |
| const friends = useLiveQuery( | |
| () => db.friends | |
| .where('age').aboveOrEqual(minAge) | |
| .toArray() | |
| ); | |
| return friends && <ul>{ | |
| friends.map(friend => | |
| <li key={friend.id}> | |
| {friend.name}, {friend.age} | |
| </li> | |
| ) | |
| }</ul>; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Limits of indexedDB storage depends on platform and whether you get persist permission for you app. If you are building a PWA where your users "install" the webapp (user adds the web app to their start screen), you will get more limit than if you are just using it on a web page. See also StorageManager. That page doesn't yet cover how Chromium (Chrome, Opera, Edge) / WebKit (Safari) and SpiderMonkey (Firefox) are handling the limits differently.
Regarding useLiveQuery(), queries will remain efficient on large datasets as long as they are using indices to query subsets of the data. Observing an entire large table without filtering on index will of course be too heavy for the app, but adding a
.limit(X)on the query will keep the queries light