SuperAPI AI 工具集

networking-and-server-state

前端与建站

查看项目

更新于 10-18 18:02

技能介绍

Networking and server state 是 zakariaf/reactnative-skills 技能库中的一个 React Native 技能,聚焦于在类型化 ApiClient 端口之上构建 TanStack Query 服务器状态层。其核心目标是把网络访问、响应校验、缓存、重试、离线处理统一到可检查的规则中。

用途与总体架构 应用通过唯一的类型化 ApiClient 端口与服务器通信;该端口的传输层只调用 fetch,为每次请求设置截止时间,用 valibot schema 校验每个响应,并且从不抛出拒绝。服务端数据存放在 TanStack Query 缓存中,每个资源在 src/api/ 下定义一次,在 model hook 中读取,只在重试可能奏效时重试,由 React Native 的焦点与连接性事件保持新鲜,并如实反映离线状态。技能附带一个零依赖检查器用于验证规则。

必须成立的规则 网络接缝唯一:fetch、XMLHttpRequest、WebSocket、EventSource、sendBeacon 只能出现在 src/api/,且 fetch 仅在 src/api/fetch-api-client.ts 一个文件中;不允许使用 axios、ky 等 HTTP 客户端包。ApiClient 永不拒绝:request() 返回 Result<T, ApiFailure>,离线、超时、取消、HTTP 错误和无效响应体都是类型化值。每次尝试有截止时间(默认 15 秒,含响应体)并遵守调用方 signal,每个 queryFn 都传入 signal。每个请求命名一个 valibot schema,每个 2xx 响应体都经 safeParse 校验,无效响应只记录一次(方法、路径、问题路径,不含响应体);响应 schema 用 v.object 而非 v.strictObject,封闭集合用 v.fallback 包裹。基础 URL 来自配置且必须为 HTTPS(通过 parseApiBaseUrl 检查,开发环境外不得明文),不允许硬编码 URL 或全局明文开关。

查询、变更与缓存 每个资源在 src/api/<resource>/ 下有 -keys.ts、-schemas.ts、-queries.ts 和 -mutations.ts,禁止内联 key 数组或在别处写 queryFn。TanStack hook 只出现在 model hook 层,视图只接收普通 props,查询数据不得复制进 store 或 useState。每次应用运行只有一个 QueryClient,由 AppRoot 的 startApp 通过 useState 初始化器创建,绝不在模块级或渲染体内创建。查询只重试可重试失败(断网、超时、408、429、5xx),最多 3 次;变更多仅在带幂等键时重试。焦点与在线状态通过一个 ConnectivityPort 端口接入 focusManager 和 onlineManager。每个写操作必须声明对缓存的影响,或在 onSuccess/onSettled 中失效/设置相关 key;乐观写要先取消在途查询、快照,onError 时恢复快照,onSettled 时失效。离线时暂停而非失败,保留 online 模式,展示缓存数据并附离线提示。

使用方式 工作流程包括:判断应用是否有服务端;安装依赖(npx expo install expo-network 和 npm install -E @tanstack/react-query@5.104.0 valibot@1.5.0);复制 templates/ 下的 api、config、connectivity 和 test/api 模板;在 src/env.d.ts 声明 EXPO_PUBLIC_API_URL 并在 src/config/environment.ts 读取;在组合根添加 api 与 connectivity 服务;在根布局创建客户端并挂载 QueryProvider;逐资源替换 keys、schemas、queries、mutations;编写 model hook 和错误消息映射;按需补齐离线能力;编写测试并运行 npx jest 与 npm run typecheck;最后运行检查脚本直到输出 RESULT: PASS。

适用场景与限制 适用于已有服务端交互的 React Native/Expo 应用,尤其是需要严格校验、可预测重试、离线友好和可测试网络层的项目。检查器在无服务端的应用上输出 NOT APPLICABLE。技能规定特定版本(@tanstack/react-query@5.104.0、valibot@1.5.0,验证日期 2026-10-03),依赖 Expo 环境;EAS 环境变量的设置需要开发者自行执行,技能要求先停止并询问。技能本身不提供服务端实现,也不涉及计费或托管信息(暂未提供)。