feat(graphql): 由 Vercel Serverless function 驱动的 GraphQL API

[ANGJustinl]

API 文档参见: https://members-visualization.vercel.app/api/docs
Playground位于: https://members-visualization.vercel.app/api/graphql

描述

1. ♻️ 创建 GraphQL API 架构

• 架构变更：使用 Vercel Serverless API (/api/graphql)。
• 客户端更新：更新了 client.js，现在通过 fetch 请求后端 API。

2. 📝 文档结构调整

• 路径迁移：将 GraphQL API 文档从根目录移至 /api/docs，降低对普通用户的干扰。
• 入口调整：将 API 文档入口从主导航栏移至"相关链接"下拉菜单中。
• 内容更新：更新了 API 文档以反映新的 Serverless 架构，增加了 curl/fetch/Python 的调用示例。

部署相关 (后端部分需要部署Vercel平台)

关于 Vercel 部署

无需额外配置，只需将代码合并至 main 分支。Vercel 会自动读取 vercel.json 和 api 目录进行部署。

• Vercel 预设环境变量 VERCEL=1 会被构建脚本自动识别，从而正确设置网站根路径。

关于本地开发

由于 API 现在的运行依赖于 Serverless Function 环境，在本地开发时如果需要调试 API 相关功能，建议使用 Vercel CLI：

npm i -g vercel
vercel dev

如果直接运行 npm run docs:dev，页面浏览正常，但涉及 GraphQL 的数据请求可能会因为没有后端环境而失败（除非配置了代理）。

---

Check List

• 修复 Vercel 资源加载路径
• 迁移 GraphQL 到 Serverless 模式
• 更新 API 文档及路由
• 构建测试通过

[ANGJustinl]

[Edit Require] 文档中调用示例部分还需要改为实际的url

[Copilot]

Pull request overview

该 PR 将原本的 GraphQL 能力调整为由 Vercel Serverless Function 提供的后端 API（/api/graphql），并同步更新前端调用方式与文档入口/路径，以适配 Vercel 部署与本地 vercel dev 调试流程。

Changes:

• 新增 Vercel 部署配置（vercel.json），并加入 Serverless Function 的运行时配置。
• 新增 Serverless GraphQL API（schema/resolvers/dataSource + handler），前端 GraphQL client 改为 fetch('/api/graphql') 调用。
• 调整/新增 GraphQL API 文档路径与站点导航入口（迁移到 /api/docs）。

Reviewed changes

Copilot reviewed 14 out of 15 changed files in this pull request and generated 13 comments.

Show a summary per file

File	Description
vercel.json	配置 Vercel 的 VitePress 构建输出与函数超时等参数
package.json	增加 graphql 依赖以支持后端 schema 执行
package-lock.json	锁文件更新以反映依赖变更
docs/.vitepress/config.mjs	增加对 VERCEL 环境的 base 路径判断，并调整 API 文档入口位置
docs/api/docs.md	新增（或迁移后的）GraphQL API 文档页面（目标路径 /api/docs）
docs/graphql-api.md	新增根目录的 GraphQL 文档页（与“迁移到 /api/docs”的目标存在重叠）
docs/.vitepress/graphql/client.js	新增 fetch-based GraphQL 客户端封装与便捷查询方法
docs/.vitepress/graphql/index.js	GraphQL 客户端入口导出文件
docs/.vitepress/graphql/README.md	GraphQL 相关实现说明文档
docs/.vitepress/theme/graphql-demo/GraphQLDemo.vue	GraphQL 查询演示组件（UI + 调用 client）
api/package.json	将 api/ 目录设为 ESM 并声明函数依赖
api/graphql.js	Vercel Serverless Function：GraphQL handler + GraphiQL + CORS
api/_lib/schema.js	GraphQL schema（GraphQL.js）定义
api/_lib/resolvers.js	GraphQL resolvers 业务逻辑实现
api/_lib/dataSource.js	Serverless 侧数据加载与缓存逻辑（从静态数据源 fetch）

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.