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() 会取消现有页面订阅并从第一页重新加载。

Fileoverview

RxDB React 集成包 提供 RxDB 数据库的 React Hooks 接口

Interfaces

Interface	Description
InfiniteScrollResource	-
RxDBResource	-

Variables

Variable	Description
RxDBProvider	-
useRxDB	-

Functions

Function	Description
makeRxDBProvider	创建隔离的 RxDB React context 与访问 hook。
useCount	统计匹配实体数量。
useCountAncestors	统计树实体的祖先数量。
useCountDescendants	统计树实体的后代数量。
useCountNeighbors	统计图实体的邻居数量。
useFind	查找多个匹配实体。
useFindAll	查找全部实体。
useFindAncestors	查找树实体的全部祖先。
useFindByCursor	使用游标分页查找实体。
useFindDescendants	查找树实体的全部后代。
useFindOne	查找第一个匹配实体。
useFindOneOrFail	查找第一个匹配实体，仓库未找到时返回错误。
useGet	通过 ID 获取单个实体。
useGraphNeighbors	查找图实体的邻居。
useGraphPaths	查找图实体之间的路径。
useInfiniteScroll	使用 RxDB 游标查询提供无限滚动状态。
useRepositoryQuery	-