native-data-fetching

native-data-fetching skill 概览

native-data-fetching 实际能帮你解决什么

native-data-fetching 是一份面向 Expo 的指南，专门用于在 React Native 和 Expo 应用中实现与排查网络请求问题。它最适合这样的场景：你需要的不是泛泛而谈的“写个 fetch 调用”，而是要处理更完整的数据获取问题，例如 API 请求、认证请求头、缓存策略、离线行为、按环境切换的 base URL，以及 Expo Router 的数据加载器。

适合 Frontend Development 团队的场景

如果你正在开发依赖远程数据的移动端功能或 Expo Web 功能，并且希望采用符合 Expo 生态的约定，那么 native-data-fetching for Frontend Development 会非常合适。尤其是在你需要在原生 fetch、React Query 或 SWR 这类数据层库，以及 Expo Router 的路由级 loader 之间做选择时，它的参考价值很高。

真实要解决的工作任务

大多数用户实际想完成的，通常是以下四类任务之一：

• 上线一个可靠的 API 集成
• 修复异常或不稳定的网络请求流程
• 为某个页面或路由选择合理的数据获取模式
• 避开 Expo 场景下配置、认证和 loader 的常见坑

这也是 native-data-fetching 比随便扫一眼仓库更有价值的地方：它把网络请求当成实现决策来处理，而不只是给你一段代码片段。

核心差异点与限制

它最明显的特点是：明确站在 Expo 生态的一侧。原始内容明确推荐使用 expo/fetch 而不是 axios，讨论范围也不止基础请求，还覆盖了缓存、离线支持、token 处理以及 Expo Router loaders。它还补充了一份聚焦 useLoaderData 的参考资料，专门说明 Expo web 在 SDK 55+ 下的 server/static 执行模型。

主要限制也很明确：这不是一个完整的网络框架。它本质上是一份带建议和示例的 skill 文档，所以最终效果会高度依赖你的 prompt 质量，以及你的应用架构是否已经相对清晰。

如何使用 native-data-fetching skill

native-data-fetching 的安装上下文

从 Expo skills 仓库安装这个 skill：

npx skills add https://github.com/expo/skills --skill native-data-fetching

安装后，建议先看这两个文件：

• SKILL.md
• references/expo-router-loaders.md

按这个顺序阅读，先建立通用的网络请求思路，再补上 Expo Router web 应用里 loader 的特殊执行模型。

什么时候该调用 native-data-fetching skill

只要任务里包含以下内容，就适合使用 native-data-fetching skill：

• 调用外部 API
• 提交表单或 JSON 数据
• 添加认证请求头或 token 刷新逻辑
• 排查超时、HTTP 错误或响应格式异常
• 在原生 fetch、React Query、SWR 或 loaders 之间做选择
• 处理离线/缓存行为
• 配置基于环境的 API URL
• 实现 Expo Router 的路由级数据加载

只要任务涉及网络状态、请求生命周期或远程数据架构，就应该尽早调用它，而不是等 bug 出现后再补救。

你需要给 skill 提供哪些输入

如果你提供以下信息，输出质量通常会明显更高：

• 正在开发的 screen、route 或 feature
• 目标运行平台：iOS、Android、web，或三端都要
• 请求类型：GET、POST、mutation flow、polling、preload 等
• API 细节：endpoint 结构、认证方式、预期响应、错误返回约定
• 数据是否需要缓存、刷新、重试，或支持离线
• 你当前使用的是 Expo Router、React Query、SWR，还是原生 React state
• 应用里已有的环境配置或 base URL 规则

缺少这些上下文时，skill 依然能生成代码，但很可能会选错数据获取模式。

把模糊需求写成高质量 prompt

弱 prompt：

Fetch user data for my screen.

更强的 prompt：

Use native-data-fetching to implement a profile screen in an Expo app.
Target platforms: iOS and Android.
Need: authenticated GET /me request with Bearer token, loading state, 401 handling, retry on network failure, and stale data shown while refetching.
Current stack: Expo Router + React Query.
Return: recommended pattern, code, and where to place config for the API base URL.

后者效果更好，因为它给了 skill 足够的信息，去判断应该用直接的 fetch 逻辑、query library，还是更适合路由的数据加载模式。

如何为 native-data-fetching 选择正确的数据获取模式

一个实用的判断路径是：

• 一次性请求或简单流程，使用原生 fetch 或 expo/fetch
• 如果你更在意缓存失效、后台刷新和请求去重，就用 React Query 或 SWR
• 如果路由需要在 Expo web 中先加载数据再渲染，尤其是在 SDK 55+ 下，就用 Expo Router loaders

这也是 native-data-fetching guide 价值最高的用法之一：在动手实现前，先让它帮你做模式选择。

使用 Expo Router loader 时要注意的点

如果你在使用 useLoaderData，仓库里附带的参考文档非常重要。Expo Router web 中的 loaders 采用双重执行模型：

• 首次页面加载时，loader 可以在服务端执行
• 客户端导航时，浏览器会通过 HTTP 去拉取 loader data

这意味着，请求上下文、部署方式和配置会随着 "server" 与 "static" 输出模式不同而变化。如果你的任务涉及 loaders，请务必一并说明：

• Expo SDK 版本
• web output mode
• 是否需要 headers/cookies/request access
• hosting model

否则生成的方案可能会默认你的环境具备实际并没有的能力。

节省时间的仓库阅读路径

如果你只是想快速完成一次 native-data-fetching usage 评估，不要在仓库里随便乱翻。推荐按这个顺序看：

1. SKILL.md，先了解适用范围和偏好
2. 如果应用用了 Expo Router 数据加载，再看 references/expo-router-loaders.md
3. 回到你自己项目里的 API client、auth utilities 和环境配置文件

上游 skill 本身并不长，真正耗时的通常不是阅读它，而是把它正确映射到你当前应用的架构里。

native-data-fetching 的实用落地流程

一个比较稳妥的工作流是：

1. 先让它推荐模式
2. 再让它生成具体的请求层或 hook
3. 补上 error/loading/empty states
4. 加入 auth 和环境配置处理
5. 测试失败场景
6. 确认需要时，再加入缓存/离线优化

这样可以避免过度设计。很多团队一上来就堆高级缓存策略，却还没先确认 endpoint、auth 和 base URL 的行为是否正常。

会影响生成结果的偏好设置

原文明确建议避免 axios，优先使用 expo/fetch。如果你仍然要求用 axios，那其实是在逆着这个 skill 的默认偏好走。如果你的代码库已经统一采用 axios，最好直接说明，这样输出才会基于你的现有栈做适配，而不是和你的项目实践对着干。

一开始就该说清楚的常见请求细节

如果你希望首版输出就能直接拿来用，建议补充这些实现细节：

• 是 JSON 还是 multipart/form-data
• 必需的 headers
• token 来源与刷新方式
• timeout 或 retry 的预期
• 非 2xx 响应是否会返回 JSON 错误体
• UI 应该阻塞等待、流式展示，还是先渲染旧数据再刷新

这些细节往往比 endpoint 路径本身更关键。

native-data-fetching skill 常见问题

native-data-fetching 只适用于 Expo 应用吗？

它在 Expo 和 React Native 场景里最有价值，尤其是因为它偏向 expo/fetch，同时还包含 Expo Router loader 的专项参考。有些 fetch 模式本身属于通用 Web 知识，但这个 skill 的整体设计明显是围绕 Expo 生态调过的。

native-data-fetching 对新手友好吗？

友好，前提是你的目标足够具体。只要你能说清楚页面、endpoint 和预期行为，新手也能很好地使用 native-data-fetching skill。但如果你只是想做完全开放式的学习，它的帮助会有限，因为它默认你已经在实际实现或调试某个功能。

它和普通的 coding prompt 有什么区别？

通用 prompt 也许能返回一段能跑的 fetch 代码，但常常会漏掉生态层面的关键选择，比如优先用 expo/fetch、采用合适的数据加载模型，或者考虑 Expo Router loader 的执行方式。相比之下，当你同样在意架构选择和框架适配，而不只是语法时，native-data-fetching guide 会更合适。

什么情况下不该用 native-data-fetching？

如果任务与远程数据无关，比如纯本地 state、UI 样式、动画，或者完全不涉及数据请求的导航逻辑，就没必要用它。另外，如果你需要的是完整的后端 API 设计，或高级服务端基础设施方案，这个 skill 的范围也太窄了。

如果项目已经在用 React Query 或 SWR，还值得配合它使用吗？

值得，事实上这正是它的强项之一。告诉 skill 你当前使用的是哪一个库，以及是否要保留现有的 query keys、失效策略和缓存规则。这样它给出的建议更可能是在扩展你现有的数据层，而不是粗暴替换。

native-data-fetching 能完整覆盖 Expo Router loaders 吗？

它覆盖了最关键的采用决策点，并且提供了一个聚焦参考文档，但并没有囊括所有边界情况。如果 loaders 是你应用的核心机制，那么在实现生产级行为前，最好直接查看 references/expo-router-loaders.md，确认里面的配置和执行细节。

如何提升 native-data-fetching skill 的使用效果

给 native-data-fetching 提供架构上下文，而不只是 endpoint

最能明显提升结果质量的一点，是告诉 skill 这次请求在你的应用里处于哪一层：

• component
• custom hook
• query layer
• route loader
• shared API client

这样它生成的代码才能贴合你的结构，而不是给出一段脱离上下文的孤立示例。

先让它做决策，再让它写代码

一种效果很好的提问方式是：

Use native-data-fetching to choose the best approach for this feature.
Compare plain fetch vs React Query vs Expo Router loader for my constraints.
Then implement the winning option.

这样能显著减少返工，因为第一轮输出先沉淀的是设计决策，而不只是生成代码。

把你真正关心的失败场景写进去

如果你不主动提失败处理，得到的往往只是偏乐观的示例。想让结果更接近生产环境，可以直接点明这些问题：

• 401 token 过期
• 设备离线
• 网络连接慢
• 页面 focus 时重复请求
• JSON payload 格式错误
• 服务端 500 且带错误信息

这些约束会推动 skill 给出更稳健的实现方案。

常见失败点：平台假设含糊不清

很多糟糕的网络请求建议，问题都出在把 native 和 web 的前提混在一起。你要明确说明是：

• 仅 native
• 仅 web
• 通用 universal app
• 使用 loaders 的 Expo Router web
• static export 还是 server rendering

因为不同 setup 下，loader 行为、请求上下文和部署限制都会变化。

常见失败点：配置和 base URL 处理不清楚

如果你省略环境细节，生成的代码就很容易把 URL 写死，或者把配置放到错误的层级。建议提供：

• dev/staging/prod 的 base URL 规则
• 是否已经存在 env vars
• 当前配置文件放在哪里
• 请求是否按平台区分

这些信息能让真实项目中的 native-data-fetching install 和落地过程顺畅很多。

用真实的响应约定提升输出质量

相比只说“返回用户数据”，下面这种描述会更有帮助：

GET /me returns 200 { id, name, avatarUrl }.
401 returns { error: "token_expired" }.
500 may return HTML from an upstream proxy.

这能帮助 skill 生成更安全的解析和错误处理逻辑，尤其适合排查不稳定 API 时使用。

在第一次回答后继续迭代

拿到首轮输出后，可以继续追问：

• convert this to React Query
• adapt this to Expo Router loader usage
• add optimistic mutation handling
• refactor into a reusable API client
• harden error states for offline mode

第一轮回答应该先把模式定下来；后续几轮再逐步贴合你应用的真实约束。

当 Web 渲染方式很关键时，去读 loader 参考文档

如果你的项目用了路由级数据加载，最快的提升方式就是先读 references/expo-router-loaders.md，然后在 prompt 里直接使用它的术语：useLoaderData、"server" vs "static"、request access 和 hosting model。这样得到的 native-data-fetching usage 输出，会比一句泛泛的“渲染前加载数据”准确得多。

让 native-data-fetching 聚焦在网络请求工作本身

这个 skill 在 prompt 聚焦远程数据问题时表现最好。如果你把网络请求、状态管理、UI 改版和导航重构一次性全塞进同一个请求里，结果通常会变浅。更好的做法是拆开任务，先让 native-data-fetching 把 API 和数据层处理扎实。