如何跟踪 dexie UseLiveQuery 是否完成

Question

我想在 UseLiveQuery 未完成时显示加载程序，如果 UseLiveQuery 返回一个空数组，则显示“未找到组件”。

有没有一种简单的方法可以做到这一点？

非常感谢。

Answer 1

当您的查询器返回一个数组时，这是最简单的（见下文）。然后未定义的结果表示仍在加载，而空数组表示已完成加载但结果为零。

const friends = useLiveQuery (() => db.friends.toArray());
if (!friends) return <Spinner />; // Still loading

return <ul>{
  friends.map(friend => <li key={friend.id}>
    {friend.name}, {friend.age}
  </li>)
}</ul>;

但是，如果您的查询器从table.get() 返回结果，则 undefined 值可能意味着查询仍在加载或未找到请求的 id。为了区分这两者，你可以让查询器返回一些更容易区分两者的东西。例如，让查询器将结果作为数组中的一项返回，并为useLiveQuery() 提供第三个参数，并将一个空数组（未定义的其他内容）作为默认结果。

const [friend, loaded] = useLiveQuery (
  () => db.friends.get(1).then(friend => [friend, true]),
  [], // deps...
  []  // default result: makes 'loaded' undefined while loading
);

if (!loaded) return <Spinner />; // Still loading...
if (!friend) return <NotFound ... />; // Loaded but friend not found

return <>{friend.name}, {friend.age}</>; // Loaded and friend found.

也就是说，查询 indexedDB 时通常不需要微调器（除非查询非常复杂）。在这种情况下，最好只返回null 而不是<Spinner />，这样可以最少地打扰最终用户。