@aiao/rxdb-react

@aiao/rxdb-react

@aiao/rxdb-react 把 @aiao/rxdb 的响应式仓库查询接入 React 19。

安装

pnpm add @aiao/rxdb @aiao/rxdb-react react react-dom rxjs

Provider

RxDBProvider 必须接收已经创建完成的数据库实例。useRxDB() 会读取最近的 Provider；也可以把数据库实例直接传给 useRxDB(db)。

import type { RxDB } from '@aiao/rxdb';
import { RxDBProvider } from '@aiao/rxdb-react';

interface AppProps {
  db: RxDB;
}

export function App({ db }: AppProps) {
  return (
    <RxDBProvider db={db}>
      <Routes />
    </RxDBProvider>
  );
}

需要隔离多个数据库 context 时使用 makeRxDBProvider<T>() 创建独立的 Provider/hook 对。

查询 Hooks

所有查询 hook 返回 { value, error, isLoading, isEmpty, hasValue }。查询参数既可以直接传值，也可以传返回参数的函数。结构相等的 inline 参数不会重复订阅；参数语义变化时会取消旧订阅并启动新查询。

• useGet
• useFindOne
• useFindOneOrFail
• useFind
• useFindByCursor
• useFindAll
• useCount
• useFindDescendants
• useCountDescendants
• useFindAncestors
• useCountAncestors
• useGraphNeighbors
• useCountNeighbors
• useGraphPaths

查询失败采用 stale-while-error 语义：value 保留最后一次成功值，error 保存原始 Error，hasValue 变为 false，isEmpty 变为 undefined。

无限滚动

useInfiniteScroll 通过仓库的 findByCursor 加载页面，返回 { value, error, isLoading, isEmpty, hasMore, loadMore, refresh }。

const todos = useInfiniteScroll(Todo, {
  where: { combinator: 'and', rules: [] },
  orderBy: [
    { field: 'createdAt', sort: 'desc' },
    { field: 'id', sort: 'asc' }
  ],
  limit: 50
});

loadMore() 在加载中或没有下一页时不会重复请求。refresh() 会取消现有页面订阅并从第一页重新加载。