可观测性后端【免费下载链接】highlighthighlight.io: The open source, full-stack monitoring platform. Error monitoring, session replay, logging, distributed tracing, and more.项目地址https://gitcode.com/gh_mirrors/hi/highlight点击查看免费下载本篇技术指南聚焦 highlight.io 开源全栈可观测平台error monitoring、session replay、logging、distributed tracing前端app.highlight.io中 Apollo Client GraphQL 定义的组织方式与维护流程。你将掌握查询与变更定义分别存放在哪里、修改后如何触发 graphql-codegen 自动重新生成前端 Hooks 与 TypeScript 类型、watch 模式如何在开发时实时同步以及最终生成产物schemas / operations / hooks在 React 组件中的实际用法。一、核心问题前端 GraphQL 定义放在哪里在前端frontend/目录即 app.highlight.io 所运行的 React Vite Apollo Client 应用中Apollo Client 的 GraphQL 操作定义集中托管在 frontend/src/graph/operators 目录下并按“查询”与“变更”两种操作类型拆分为两个文件查询Query定义frontend/src/graph/operators/query.gql变更Mutation定义frontend/src/graph/operators/mutation.gql这两个.gql文件是整个前端数据访问层的事实来源source of truth。它们同时承担两类职责作为 Apollo Client 运行时实际发送的 GraphQL 文档作为 graphql-codegen 的输入文档documents驱动前端 Hooks 与其他 TypeScript 定义的生成。以query.gql为例文件中既包含可复用的 Fragment也包含实际查询。文件开头定义的SessionPayloadFragment展示了典型 Fragment 写法从SessionPayload类型中选取events、errors含结构化堆栈structured_stack_trace、request_id等字段、rage_clicks、session_comments含作者与附件信息以及last_user_interaction_time见 frontend/src/graph/operators/query.gql。mutation.gql则定义了平台中几乎所有的写操作例如将错误组标记为已读、将 Session 标记为已读、静默评论线程、更新计费计划、切换错误组状态等见 frontend/src/graph/operators/mutation.gql。其写法遵循标准 GraphQL mutation 语法例如mutation MarkErrorGroupAsViewed($error_secure_id: String!, $viewed: Boolean!) { markErrorGroupAsViewed(error_secure_id: $error_secure_id, viewed: $viewed) { secure_id viewed } }二、修改定义后会发生什么自动重新生成这是本流程中最关键的行为约定修改这两个文件就会重新生成前端 Hooks 和其他 TypeScript 定义。具体机制是当本地前端开发服务器运行时graphql-codegen 会以 watch 模式监听这两个.gql文件一旦发生变更便重新生成代码。从 frontend/package.json 中的 scripts 可以看到codegen: graphql-codegen --config codegen.yml, dev:gql: graphql-codegen --config --watch codegen.yml, dev: run-p --print-label --race dev:**其中dev通过run-pnpm-run-all并行启动包括dev:gql在内的多个开发进程dev:gql即携带--watch参数的 codegen 进程。因此只要按开发文档启动了前端这个监听进程就会一直运行——你保存.gql文件的瞬间生成的 Hooks 与类型便已更新无需手动执行任何命令。前端完整的本地运行方式参见 开发部署指南。三、codegen 配置逐项解析代码生成行为由 frontend/codegen.yml 统一控制。该配置的三个关键部分决定了生成的输入、输出与形态Schema 来源schema: ../backend/private-graph/graph/schema.graphqls即类型定义直接取自后端私有 GraphQL 服务的 schema 文件保证前端生成类型与后端契约严格一致。输入文档documents: src/**/**.gql即扫描frontend/src下所有.gql文件涵盖operators目录中的两个定义文件以及页面内可能存在的内联.gql文件。三份输出产物均由overwrite: true强制覆盖src/graph/generated/schemas.tsx基于 schema 与文档生成的基础 TypeScript 类型。其中通过scalars配置把后端自定义标量映射为前端友好的类型Any: any、Timestamp: string、Int64: number、StringArray: string[]保证Timestamp这类字段在 TypeScript 中被当作字符串处理。src/graph/generated/operations.tsx基于文档生成的操作级类型使用typescript-operations插件并通过named-operations-objectuseConsts: true为每个操作生成命名常量。src/graph/generated/hooks.tsx使用typescript-react-apollo插件生成 React Hooks配置withHOC: false、withComponent: false、withHooks: true即只生成 Hooks 形态的封装不生成 HOC 与 render-prop 组件。此外配置还通过hooks.afterAllFileWrite钩子对生成文件统一执行prettier --write保证生成代码风格与手写代码一致。四、生成产物与真实使用方式每次保存.gql文件后frontend/src/graph/generated 目录下的三个文件会被重新生成schemas.tsxGraphQL 类型的 TypeScript 映射operations.tsx每个 query/mutation 的参数与返回类型hooks.tsx可直接在组件中使用的 React Hooks。以 frontend/src/graph/generated/hooks.tsx 中的useMarkErrorGroupAsViewedMutation为例生成代码为每个 mutation 提供了完整注释、useMarkErrorGroupAsViewedMutation导出以及底层Apollo.useMutation调用并带有DocumentNode常量如MarkErrorGroupAsViewedDocument。实际页面中通过相对路径引用生成产物例如 frontend/src/pages/Internal/InternalPage.tsx 中的导入import { ... } from ../../graph/generated/hooks也就是说日常业务开发流程是先写.gql定义 → codegen 自动生成 Hooks → 在组件中导入并使用全程不需要手写任何类型或请求封装。五、新增或修改操作的标准操作步骤在 highlight.io 前端新增一个 GraphQL 操作按以下步骤即可确认操作类型读取数据写入frontend/src/graph/operators/query.gql写入数据创建、更新、删除、标记状态等写入frontend/src/graph/operators/mutation.gql。编写操作使用与后端schema.graphqls一致的字段名与参数类型。建议充分利用 Fragment 复用公共字段子集减少重复。保存文件若开发服务器已运行dev:gql的 watch 进程会立即重新生成schemas.tsx、operations.tsx、hooks.tsx若未运行可手动执行yarn codegen参见 frontend/package.json。校验生成结果确认frontend/src/graph/generated/hooks.tsx中出现了对应的useXxxQuery/useXxxMutation且参数类型正确注意Timestamp映射为string、Int64映射为number。在组件中使用从../../graph/generated/hooks导入生成的 Hook 并传入变量。六、常见注意事项不要手改生成目录frontend/src/graph/generated下三个文件是纯生成产物任何手写修改都会在下次 codegen 时被overwrite: true覆盖务必只修改operators中的源定义。字段必须与后端 schema 对齐由于codegen.yml直接以backend/private-graph/graph/schema.graphqls为 schema前端引用的字段若与后端不一致codegen 会直接报错这实际上起到“契约校验”的作用。Scalar 映射决定类型体验Any、Timestamp、Int64、StringArray四个标量的映射是提升类型体验的关键新增自定义标量时需同步在codegen.yml的scalars中补充映射。mutation 的命名约定定义中的操作名如MarkErrorGroupAsViewed会直接决定生成 Hooks 的名称命名时使用 PascalCase 动词短语便于检索。综上highlight.io 前端将“GraphQL 定义 → 类型/请求层”的生成链路收敛为两个.gql源文件与一个codegen.yml配置配合 watch 模式实现了修改即生效的开发体验理解并善用这条链路是参与 app.highlight.io 前端开发时最基础也最高效的一环。赞分享可观测性后端【免费下载链接】highlighthighlight.io: The open source, full-stack monitoring platform. Error monitoring, session replay, logging, distributed tracing, and more.项目地址https://gitcode.com/gh_mirrors/hi/highlight点击查看免费下载相关推荐chart.xkcd与Apollo Client集成GraphQL数据驱动的图表chart.xkcd与Apollo Client集成GraphQL数据驱动的图表 项目介绍 chart.xkcd是一个轻量级的图表库用于创建xkcd风格的漫数据可视化前端UI组件如何在Next.js中集成Vercel AI SDK与Apollo Client构建AI驱动的GraphQL应用如何在Next.js中集成Vercel AI SDK与Apollo Client构建AI驱动的GraphQL应用 Vercel AI SDK是一个强大的开源库人工智能AI 应用AI Agent工具调用MCP Clients使用 linera-indexer-graphql-client 生成与维护 Indexer GraphQL Schema使用 linera indexer graphql client 生成与维护 Indexer GraphQL Schema 导读 本文围绕 Linera 协议仓区块链Web3上一篇MoviePilot微交互设计细节处的用户体验提升下一篇pip install headroom-ai 报 Unsupported compiler 怎么修复创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考