PostHog 前端 Queries 架构解析声明式查询节点、JSON 编辑器与数据请求管线【免费下载链接】posthog:hedgehog: PostHog is the leading platform for building self-driving products. Our developer tools – AI observability, analytics, session replay, flags, experiments, error tracking, logs, and more – capture all the context agents need to diagnose problems, uncover opportunities, and ship fixes. Steer it all from Slack, web, desktop, or the MCP.项目地址: https://gitcode.com/GitHub_Trending/po/posthog导读frontend/src/queries/是 PostHog 前端用于构建数据查询型 UI的核心目录它把一次数据分析事件列表、趋势图、漏斗、HogQL 查询等统一建模为可序列化的 JSON 查询节点Query Node再通过通用的Query组件自动路由到对应渲染组件、通过QueryEditor以 JSON JSON Schema 的方式编辑、通过query.ts统一走后端/api/query执行并支持同步/异步轮询两种模式。阅读本文后你将掌握 PostHog 查询节点的组织方式、如何在任意 React 界面中嵌入并控制一个查询、如何理解 DataTable 等子组件的渲染约定以及查询数据从前端组件到后端执行的完整链路。本文以 frontend/src/queries/README.md 为骨架结合该目录下源码展开。目录结构与核心概念README 将该目录划分为几个职责清晰的组成部分路径职责Query/通用组件根据查询节点的kind自动路由到正确的渲染组件QueryEditor/通用 JSON 编辑器带 Schema 校验与更新并运行按钮nodes/每个子目录对应一种查询kind的 React 组件集合examples.ts用于 Storybook 的各种查询示例query.ts发起 API 调用、获取任意查询数据schema.jsonJSON Schema供查询编辑器使用由schema:build生成schema/前端作者定义的查询 TypeScript 类型编译为 schema.jsonutils.ts类型收窄type narrowing工具函数其核心设计思想是查询即数据。一个查询不是一堆零散的 props而是一个带有kind字段的纯 JSON 对象组件层负责把它渲染出来用户对 UI 的每一次修改都会通过setQuery回调改写这个 JSON再由数据节点逻辑logic重新发起请求。这也让查询可以被保存、共享、导出、甚至在仪表盘之间复用。Query按 kind 自动路由的通用渲染组件Query/Query.tsx导出的QueryQ extends Node是 README 中描述的那个内部路由到正确节点的通用组件。它的最简用法即 README 所写Query query{} setQuery{} /但实际 props 远比这两项丰富。Query.tsx 中定义了完整的QueryPropsProp含义uniqueKey可选用于标识查询同时作为 DataNode logic 的 keyquery要渲染的查询可以是Node对象也可以是JSON 字符串甚至是nullsetQuery受控模式下更新查询的回调不传则组件内部维护 local statecontext向部分查询节点传递自定义内容如自定义表格列cachedResults共享/导出场景下传入的缓存结果此时数据节点逻辑隐式变为只读readOnly禁用一切查询修改embedded精简 UI只展示数据inSharedMode禁用弹窗等交互editMode是否可以编辑 insightfiltersOverride/variablesOverride仪表盘层覆盖查询中的过滤条件与 HogQL 变量dataAttr透传给底层 LemonTable 的 contenteditable="false">【免费下载链接】posthog:hedgehog: PostHog is the leading platform for building self-driving products. Our developer tools – AI observability, analytics, session replay, flags, experiments, error tracking, logs, and more – capture all the context agents need to diagnose problems, uncover opportunities, and ship fixes. Steer it all from Slack, web, desktop, or the MCP.项目地址: https://gitcode.com/GitHub_Trending/po/posthog创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 PostHog 前端 Queries 架构解析：声明式查询节点、JSON 编辑器与数据请求管线
PostHog 前端 Queries 架构解析声明式查询节点、JSON 编辑器与数据请求管线【免费下载链接】posthog:hedgehog: PostHog is the leading platform for building self-driving products. Our developer tools – AI observability, analytics, session replay, flags, experiments, error tracking, logs, and more – capture all the context agents need to diagnose problems, uncover opportunities, and ship fixes. Steer it all from Slack, web, desktop, or the MCP.项目地址: https://gitcode.com/GitHub_Trending/po/posthog导读frontend/src/queries/是 PostHog 前端用于构建数据查询型 UI的核心目录它把一次数据分析事件列表、趋势图、漏斗、HogQL 查询等统一建模为可序列化的 JSON 查询节点Query Node再通过通用的Query组件自动路由到对应渲染组件、通过QueryEditor以 JSON JSON Schema 的方式编辑、通过query.ts统一走后端/api/query执行并支持同步/异步轮询两种模式。阅读本文后你将掌握 PostHog 查询节点的组织方式、如何在任意 React 界面中嵌入并控制一个查询、如何理解 DataTable 等子组件的渲染约定以及查询数据从前端组件到后端执行的完整链路。本文以 frontend/src/queries/README.md 为骨架结合该目录下源码展开。目录结构与核心概念README 将该目录划分为几个职责清晰的组成部分路径职责Query/通用组件根据查询节点的kind自动路由到正确的渲染组件QueryEditor/通用 JSON 编辑器带 Schema 校验与更新并运行按钮nodes/每个子目录对应一种查询kind的 React 组件集合examples.ts用于 Storybook 的各种查询示例query.ts发起 API 调用、获取任意查询数据schema.jsonJSON Schema供查询编辑器使用由schema:build生成schema/前端作者定义的查询 TypeScript 类型编译为 schema.jsonutils.ts类型收窄type narrowing工具函数其核心设计思想是查询即数据。一个查询不是一堆零散的 props而是一个带有kind字段的纯 JSON 对象组件层负责把它渲染出来用户对 UI 的每一次修改都会通过setQuery回调改写这个 JSON再由数据节点逻辑logic重新发起请求。这也让查询可以被保存、共享、导出、甚至在仪表盘之间复用。Query按 kind 自动路由的通用渲染组件Query/Query.tsx导出的QueryQ extends Node是 README 中描述的那个内部路由到正确节点的通用组件。它的最简用法即 README 所写Query query{} setQuery{} /但实际 props 远比这两项丰富。Query.tsx 中定义了完整的QueryPropsProp含义uniqueKey可选用于标识查询同时作为 DataNode logic 的 keyquery要渲染的查询可以是Node对象也可以是JSON 字符串甚至是nullsetQuery受控模式下更新查询的回调不传则组件内部维护 local statecontext向部分查询节点传递自定义内容如自定义表格列cachedResults共享/导出场景下传入的缓存结果此时数据节点逻辑隐式变为只读readOnly禁用一切查询修改embedded精简 UI只展示数据inSharedMode禁用弹窗等交互editMode是否可以编辑 insightfiltersOverride/variablesOverride仪表盘层覆盖查询中的过滤条件与 HogQL 变量dataAttr透传给底层 LemonTable 的 contenteditable="false">【免费下载链接】posthog:hedgehog: PostHog is the leading platform for building self-driving products. Our developer tools – AI observability, analytics, session replay, flags, experiments, error tracking, logs, and more – capture all the context agents need to diagnose problems, uncover opportunities, and ship fixes. Steer it all from Slack, web, desktop, or the MCP.项目地址: https://gitcode.com/GitHub_Trending/po/posthog创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考