Replies: 6 comments 7 replies
-
|
isLoading: The third argument to useLiveQuery() is a default value returned while loading. With IndexedDB, loading time is normally too short to make it feasible with fallback rendering. I normally just return null from the component while loading. Examples: export function FriendListComponent() {
// When returning array, we can rely on the default and do not need to specify 3rd arg:
const friends = useLiveQuery(() => db.friends.toArray());
// A falsy result means we're still loading
if (!friends) return null; // Initial render (is loading)
return <ul>{
friends.map(friend => <li key={friend.id}>{friend.name}</li>)
}</ul>;
}
export function FriendDetailsComponent(friendId) {
const friend = useLiveQuery(
() => db.friends.get(friendId), // This query may return undefined!
[friendId], // Deps
null // Specify fallback distinguished from not-found result.
);
if (friend === null) return null; // Initial render (is loading)
if (friend === undefined) return <p>Friend not found</p>; // Not found.
return <div>
<p>Name: {friend.name}</p>
<p>Age: {friend.age}</p>
</div>;
}Suspense support: We might support a suspense based useLiveQuery in future. That would require a DBCore caching middleware that is capable of caching all responses including IDBCoreCursors - which in turn would require a virtual cursor ("CachedCursor" or how to name it) to be implemented that will behave just like the original cursor. So, it's doable but not super straightforward to implement. |
Beta Was this translation helpful? Give feedback.
-
|
Sounds like a lot of thoughts and works, but I still think it's a nice to have feature. Hopefully there will be time for implementing this. |
Beta Was this translation helpful? Give feedback.
-
|
The default return worked well for me. I used a |
Beta Was this translation helpful? Give feedback.
-
|
Here's my approach for adding Suspense support to // utils/useSuspenseLiveQuery.ts
import { liveQuery } from 'dexie';
import { type Atom, useAtomValue } from 'jotai';
import { atomWithObservable } from 'jotai/utils';
import { useRef } from 'react';
// Must use a global cache because Suspense breaks the rules of hooks like
// useMemo and useRef
// https://github.com/facebook/react/issues/15137
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-redundant-type-constituents
const CACHE = new Map<string, Atom<any | Promise<any>> | undefined>();
// Cache for 5 minutes, which was inspired by TanStack Query
const CACHE_ITEM_LIFESPAN_MS = 1000 * 60 * 5;
type CacheKey = string | number;
// Force at least one cache key past the `use` prefixed key to ensure that
// using useSuspenseLiveQuery is necessary vs a global atom.
type CacheKeys<T = CacheKey> = [`use${string}`, T, ...T[]];
type InitialValue<Data> = Data | (() => Data);
// A suspense-enabled version of useLiveQuery from Dexie
export default function useSuspenseLiveQuery<T>(
querier: () => Promise<T> | T,
cacheKeys: CacheKeys,
): T | undefined;
export default function useSuspenseLiveQuery<T, U extends InitialValue<T>>(
querier: () => Promise<T> | T,
cacheKeys: CacheKeys,
initialValue: U,
): T | U;
export default function useSuspenseLiveQuery<T, U extends InitialValue<T>>(
querier: () => Promise<T> | T,
cacheKeys: CacheKeys,
initialValue?: U,
): T | U {
const cacheKey = cacheKeys.join(':');
const atomRef = useRef<[string, Atom<T | Promise<T>> | undefined]>([
cacheKey,
CACHE.get(cacheKey),
]);
// Look for atom in cache
if (atomRef.current[0] !== cacheKey) {
atomRef.current = [cacheKey, CACHE.get(cacheKey)];
}
// Atom not in cache
if (!atomRef.current[1]) {
const newAtom = atomWithObservable<T>(
() => liveQuery(querier),
initialValue ? { initialValue } : undefined,
);
if (process.env.NODE_ENV === 'development') {
newAtom.debugLabel = cacheKey;
}
atomRef.current = [cacheKey, newAtom];
CACHE.set(cacheKey, newAtom);
// Remove from cache after a timeout to allow for garbage collection
setTimeout(() => {
CACHE.delete(cacheKey);
}, CACHE_ITEM_LIFESPAN_MS);
}
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
return useAtomValue(atomRef.current[1]!);
}Example Use// store/sessions.ts
export function useSession(sessionId: SessionId) {
return useSuspenseLiveQuery(
() => db.sessions.get(sessionId),
['useSession', sessionId],
);
} |
Beta Was this translation helpful? Give feedback.
-
|
You can also use Jotai for atoms that don't need any params like so: import { liveQuery } from 'dexie';
import { useAtomValue } from 'jotai';
import { atomFamily, atomWithObservable } from 'jotai/utils';
const sessionsByUpdatedAtAtom = atomWithObservable(() =>
liveQuery(() => db.sessions.orderBy('updatedAt').reverse().toArray()),
);
export function useSessionsByUpdatedAt() {
return useAtomValue(sessionsByUpdatedAtAtom);
} |
Beta Was this translation helpful? Give feedback.
-
|
I must have missed this suggestion. It's a nice take on it. |
Beta Was this translation helpful? Give feedback.
-
|
@dfahlander Now that view transitions are stable this is even more important. Without suspense there is a transition to the empty state and then the data appears only after the view transition finishes. This only makes things worse because normally the empty state shows only for split second. Ideally there would be no empty state visible at all. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the explanation. @mutewinter's suggestion would probably be an easy way to get this right now. The only thing stopping me from including such hook in dexie-react-hooks is the dream of having a suspense version without a cache-key - which would be possible but a bit harder to solve and might require a slightly different approach - with a sync dexie api. It's probably worth it to introduce a useSuspenseLiveQuery() in the meantime. Please try @mutewinter's hook out and give feedback. |
Beta Was this translation helpful? Give feedback.
-
|
Seems to be working. I wonder if it can be achieved without using jotai because I don't need it. |
Beta Was this translation helpful? Give feedback.
-
Yes, I think this could be fixed without Jotai with not so much code. We could throw a Promise when item is not in cache - a Promise that resolves when the observable emits initially. Anyone eager to create a PR in https://github.com/dexie/Dexie.js/tree/master/libs/dexie-react-hooks are much welcome. Otherwise I will jump into it when there is time... (which would probably be in September or so). I think we could build a Thanks @mutewinter for the example code. I'd be certain to mention you. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for the incredible library. Here’s the codebase where I heavily use that Jotai-based observable hook: https://github.com/mutewinter/dreams/blob/main/src/utils/useSuspenseLiveQuery.ts |
Beta Was this translation helpful? Give feedback.
-
|
I made a WIP PR: #2205 |
Beta Was this translation helpful? Give feedback.
-
|
Not sure if it's related to this, but I haven't been able to find a clean way to use dexie promise api with the new use function in react. Using a memo on the promise doesn't seem to be stable enough. Edit: the reason why I ask is it seems having "suspense enabled data fetch" is handy with the new Activity component in react 19.2. We already use useLiveQuery heavily... |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Hi, I see there is no property like
isLoadingforuseLiveQueryresult.I wonder if it is possible to adopt
SuspenseforuseLiveQuery.Beta Was this translation helpful? Give feedback.
All reactions