GraphQL问答服务

yd-mcp反应聊天演示

一个轻量级的React（Vite+TypeScript）演示，向Cloudflare Worker发送GraphQL请求。UI模仿您共享的终端屏幕截图：键入一个自然语言问题，Worker发出GraphQL变异，例如 { askQuestion { answer } }，答案出现在问题的正下方。

技术栈

• React 18与Vite 5结合，实现快速本地开发
• graphql-request 作为最小的GraphQL客户端
• Cloudflare Workers（包括示例脚本）作为问答端点

入门

1. 安装deps
   复制

   npm install
   

2. 配置环境 –复制 .env.example 到 .env 并设置您的Worker URL（和可选的承载令牌）：
   复制

   cp .env.example .env
   

3. 在本地运行
   复制

   npm run dev
   

   Vite继续奔跑 http://localhost:5173 默认情况下。

请求/响应格式（GraphQL）

浏览器和Worker通过GraphQL进行通信。等效 curl 请求：

curl -X POST $WORKER/graphql \
  -H "Content-Type: application/json" \
  -d '{
    "query":"mutation($question:String!){ askQuestion(question:$question){ answer askedAt }}",
    "variables":{"question":"解释下什么是云计算"}
  }'

Worker使用标准的GraphQL JSON进行回复：

{
  "data": {
    "askQuestion": {
      "answer": "云计算是一种通过互联网提供计算资源的模式...",
      "askedAt": "2025-11-08T15:30:00.000Z"
    }
  }
}

React组件呈现 question 和 answer 像堆叠的聊天泡泡一样配对。

Cloudflare工作人员示例

workers/chat-graphql-worker.ts 暴露上面显示的确切GraphQL模式：它检查 askQuestion 突变并返回罐装 answer。用AI调用、搜索结果或任何其他数据源替换占位符逻辑。

部署Worker（基本流程）：

1. 安装牧马人并登录– npm i -g wrangler && wrangler login.
2. 将脚本复制到Worker项目中（或将其作为模块导入）。
3. 更新您的 wrangler.toml 设置所需的路由和绑定。
4. wrangler deploy 出版。

环境变量

下一步

• 将示例答案生成器与实际的AI/搜索管道交换，并在需要时保持对话。
• 添加身份验证（例如Cloudflare Access或JWT），并通过以下方式在请求标头中转发令牌 VITE_WORKER_API_TOKEN.
• 通过流式响应、markdown渲染或引用来增强UI。