为使用 Relay 的 React 组件提供规范写法、调试思路与代码审查建议。
这是一个开源的纯提示型 Relay 最佳实践技能,材料未显示需要密钥、联网、执行代码或访问本地数据,整体风险较低。主要需注意其 README 提到可参考本地文档或从 GitHub 原始内容获取文档,但作为 skill 描述本身未体现自动执行这些动作。
材料明确标注无需密钥或环境变量;未见要求输入 API token、账号凭证或其他敏感认证信息,凭证泄露/滥用风险低。
系统检查项标注为 prompt-only,且远程端点为无。README 仅提到可从 raw.githubusercontent.com 获取较旧版本文档,这更像人工参考路径说明,未显示该 skill 会自动向外发送用户数据。
作为纯提示型技能,材料未显示会在本机启动进程、执行脚本、安装依赖或调用系统命令;未见超出文本指导范围的执行权限。
未声明读写本地文件、数据库、剪贴板或其他资源的能力。虽然 README 提到可阅读 node_modules 下文档路径,但这属于说明性内容,不构成已授予的数据访问能力。
来源指向 GitHub 上的 facebook/relay 开源仓库,源码可审计,且与声明功能高度相关,属于降低风险的正面证据。虽给出的 star/维护状态信息有限且许可证未声明,但未见闭源、不明来源或可疑分发红旗。
复制安装指令,让 AI 自动完成配置 · 推荐新手
请帮我安装 askskill 上的 "relay-best-practices" 技能: 1. 下载 https://raw.githubusercontent.com/facebook/relay/main/skills/relay-best-practices/SKILL.md 2. 保存为 ~/.claude/skills/relay-best-practices/SKILL.md 3. 装好后重载技能,告诉我可以用了
请审查这段使用 useFragment 和 graphql 的 React 组件代码,指出不符合 Relay 最佳实践的地方,并给出修改后的版本与原因。
返回具体问题清单、符合规范的重构代码,以及每项修改背后的 Relay 原则说明。
我在 usePaginationFragment 中点击加载更多后列表没有追加数据,请根据这段代码帮我分析可能原因,并给出排查步骤和修复建议。
输出针对连接配置、游标、片段定义和缓存行为的诊断意见,并附可执行修复方案。
请用通俗方式解释 Relay 中 fragments、queries、mutations、preloaded queries 的关系,并说明在 React 项目里分别该在什么场景使用。
给出结构清晰的概念说明、使用场景对比,以及常见误区与反模式提醒。
Relay is a GraphQL client for React that enforces colocated, composable, and type-safe data fetching. Its core insight is that each component should declare exactly what data it needs via GraphQL fragments, and Relay handles the rest — fetching, caching, consistency, and updates.
This skill provides opinionated guidance on which patterns to prefer. For detailed API documentation, read the relevant page from the doc map below.
Relay ships LLM-friendly docs in node_modules/relay-runtime/llm-docs/
(available after v20.1.1). For older versions, fetch the same files from
https://raw.githubusercontent.com/facebook/relay/main/website/docs/.
Paths below are relative to this directory (<llm-docs>/). Read the relevant
page before writing Relay code. Key docs:
| Topic | Path |
|---|---|
| Core concepts & philosophy | principles-and-architecture/thinking-in-relay.mdx |
| Fragments | guided-tour/rendering/fragments.mdx |
| Queries | guided-tour/rendering/queries.mdx |
| Mutations | guided-tour/updating-data/graphql-mutations.mdx |
| Pagination | guided-tour/list-data/pagination.mdx |
| Refetching | guided-tour/refetching/refetching-queries-with-different-data.mdx |
useFragment | api-reference/hooks/use-fragment.mdx |
usePreloadedQuery | api-reference/hooks/use-preloaded-query.mdx |
useQueryLoader / loadQuery | api-reference/hooks/load-query.mdx |
useMutation | api-reference/hooks/use-mutation.mdx |
usePaginationFragment | api-reference/hooks/use-pagination-fragment.mdx |
@throwOnFieldError | guides/throw-on-field-error-directive.mdx |
@catch directive | guides/catch-directive.mdx |
| Semantic nullability | guides/semantic-nullability.mdx |
| Relay Resolvers | guides/relay-resolvers/introduction.mdx |
| Testing | guides/testing-relay-components.mdx |
| Compiler setup | getting-started/compiler.mdx |
| Compiler configuration | getting-started/compiler-config.mdx |
| Lint rules (ESLint plugin) | getting-started/lint-rules.mdx |
These principles are the foundation of every decision below. When in doubt, refer back to them.
Relay uses an ahead-of-time compiler that reads graphql tagged template
literals in your code and generates runtime artifacts and TypeScript/Flow types.
The compiler looks for its config in these locations (checked in order):
relay.config.{json,js,mjs,ts} in the project root"relay" key in package.jsonSee <llm-docs>/getting-started/compiler-config.mdx for the full config schema.
You can also emit a JSON Schema for the config by running
npx relay-compiler config-json-schema.
Run npx relay-compiler after any change to the contents of a graphql tagged
template literal or the docblock of a Relay Resolver. Some projects add this as
…
使用 MockDeviceKit 在无实体眼镜硬件时进行功能联调与测试验证
将自然语言数据需求转成高质量 SQL,并按方言优化复杂查询性能。