Add MSW frontend integration example with React components using @objectstack/client

[Copilot]

Adds complete example demonstrating MSW (Mock Service Worker) integration in frontend React components for API mocking and CRUD operations. Components use the official @objectstack/client package for all API calls, following ObjectStack best practices.

Implementation

React Components

• UserManagement.tsx - Full CRUD with form validation, error states
• UserList.tsx - Simplified component using custom hooks pattern

Data Hooks (useObjectData.ts) - Using @objectstack/client

• useObjectData<T> - Data fetching with auto-load, error handling, refetch using client.data.find() and client.data.get()
• useCreateData<T> - Mutation with success/error callbacks using client.data.create()
• useUpdateData<T> - Partial updates using client.data.update()
• useDeleteData - Delete operations using client.data.delete()
• useMetadata<T> - Metadata retrieval using client.meta.getObject() with fallback support

Demo App (demo.tsx)

• MSW initialization with ObjectStackServer protocol adapter
• Complete request handler setup for GET/POST/PATCH/DELETE
• Tab-based UI comparing implementation patterns

Usage Patterns

Custom Hooks (Recommended) - Using ObjectStack Client

const { data: users, loading, error, refetch } = useObjectData<User[]>('user');
const { execute: createUser } = useCreateData('user', {
  onSuccess: () => refetch(),
});

await createUser({ name: 'John', email: 'john@example.com' });

Documentation

• GUIDE_CN.md - Complete Chinese guide with API reference
• QUICKSTART.md - 5-minute integration guide
• ARCHITECTURE.md - Data flow diagrams and extensibility patterns
• SUMMARY.md - File navigation and use cases

Configuration

• Added @objectstack/client dependency for API calls
• Added React 18 and @types/react dependencies
• Enabled JSX in tsconfig.json
• Unified exports in src/index.ts

Key Features

✅ Official Client Integration - All hooks use @objectstack/client for API calls
✅ Best Practices - Follows ObjectStack recommended patterns
✅ Multi-baseUrl Support - Client instances managed per baseUrl
✅ Backward Compatible - Maintains existing hook interfaces

Original prompt

设计事例，如何在前端组件中使用msw数据源进行模拟api进行数据操作

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
spec	Error		Jan 25, 2026 5:32pm

[hotlong]

@copilot 确认msw api规范与spec中约定的api标准协议是否一致？

[Copilot]

@copilot 确认msw api规范与spec中约定的api标准协议是否一致？

是的，MSW API 规范与 spec 中的标准协议一致。

经过验证：

API 端点完全一致 ✅

• MSW 实现使用与 plugin-hono-server 和 ObjectStackRuntimeProtocol 相同的路由规范：
  • GET /api/v1 - Discovery
  • GET /api/v1/meta/* - Metadata Protocol
  • GET/POST/PATCH/DELETE /api/v1/data/:object - Data Protocol
  • GET /api/v1/ui/view/:object - UI Protocol

响应格式一致 ✅

• 当前实现遵循 Runtime Protocol 的简化响应格式
• 返回直接数据或 { error } 结构
• 与 Hono Server Plugin 的实现方式完全相同

参考对比:

• MSW Plugin: packages/plugin-msw/src/msw-plugin.ts (L194-310)
• Hono Server: packages/plugin-hono-server/src/index.ts (L47-90)
• Runtime Protocol: packages/runtime/src/protocol.ts

注：packages/spec/src/api/contract.zod.ts 中定义的 envelope 格式（success, error, meta 等）是更完整的规范，但当前 Runtime 实现尚未采用该格式。MSW 与现有实现保持一致。

[hotlong]

前端组件应使用 @objectstack/client调用 api

[hotlong]

前端组件应使用 @objectstack/client调用 api

@copilot

[Copilot]

前端组件应使用 @objectstack/client调用 api

@copilot

已完成重构。所有自定义 Hooks 现在都使用 @objectstack/client 进行 API 调用：

更新的 Hooks:

• useObjectData → 使用 client.data.find() / client.data.get()
• useCreateData → 使用 client.data.create()
• useUpdateData → 使用 client.data.update()
• useDeleteData → 使用 client.data.delete()
• useMetadata → 使用 client.meta.getObject()

变更详情:

• 添加了 @objectstack/client 依赖
• 移除了所有直接的 fetch() 调用
• 更新了文档说明使用官方客户端

提交: 8f71609