Add MSW + React CRUD reference implementation by Copilot · Pull Request #165 · objectstack-ai/framework

Copilot · 2026-01-25T17:57:25Z

Demonstrates complete MSW browser integration with React components performing CRUD operations via @objectstack/client.

Implementation

New Example: examples/ui/msw-react-crud/

React Components: TaskList (read/delete), TaskForm (create/update), TaskItem (display)
MSW Handlers: Mock all ObjectStack API endpoints (discovery, metadata, data CRUD) with in-memory storage
Client Integration: All operations use @objectstack/client SDK methods

// MSW intercepts these calls transparently
const client = new ObjectStackClient({ baseUrl: '/api/v1' });
await client.connect();

const tasks = await client.data.find('task', { top: 100, sort: ['priority'] });
await client.data.create('task', { subject: 'New task', priority: 1 });
await client.data.update('task', id, { isCompleted: true });
await client.data.delete('task', id);

Stack: React 18 + TypeScript + Vite + MSW 2.0

Documentation: README (API patterns, endpoint mapping), QUICKSTART (setup), CHANGELOG

Configuration

Updated pnpm-workspace.yaml to include examples/ui/* packages for proper workspace resolution.

Original prompt

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.

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

vercel · 2026-01-25T17:57:30Z

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

Project	Deployment	Review	Updated (UTC)
spec	Error		Jan 26, 2026 0:30am

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

- Create objectstack.config.ts for declarative data model - Replace manual MSW handlers with auto-mocking MSWPlugin - Reduce browser.ts from 145 lines to 20 lines (86% reduction) - Add @objectstack/runtime dependency - Update QUICKSTART.md with simplified approach Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

- Create objectstack.config.ts for declarative data model - Add helper function to auto-generate MSW handlers from runtime - Remove plugin-msw dependency (browser incompatibility) - Update package.json and vite.config - Note: Vite workspace resolution issue with dynamic imports needs fix Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

github-actions · 2026-01-25T18:42:04Z

This PR is very large. Consider breaking it into smaller PRs for easier review.

- Create objectstack.config.ts for declarative data model - Add createMockHandlers.ts helper for auto-generating MSW handlers - Simplify browser.ts to 40 lines (from 145 lines = 72% reduction) - Remove complex runtime dependencies - Support client path compatibility (/api/v1/api/v1) - Tested and verified: Full CRUD operations working - Update QUICKSTART.md with simplified approach Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

…on-example-again

github-actions · 2026-01-26T00:29:40Z

This PR is very large. Consider breaking it into smaller PRs for easier review.

Copilot

Pull request overview

This PR adds a full React + MSW CRUD example wired to @objectstack/client, and wires the new example into the workspace configuration.

Changes:

Adds the examples/ui/msw-react-crud Vite+React+TypeScript app, including task CRUD components, MSW browser setup, and an objectstack.config.ts-driven mock API.
Updates pnpm-workspace.yaml and pnpm-lock.yaml to register the new example and its dependencies (React 18, Vite, MSW).
Documents the example with README, QUICKSTART, and CHANGELOG files plus local tooling config (tsconfig*, .gitignore).

Reviewed changes

Copilot reviewed 20 out of 21 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
pnpm-workspace.yaml	Registers `examples/ui/*` (including this example) as workspace packages and marks `msw` in `onlyBuiltDependencies` for consistent tooling.
pnpm-lock.yaml	Locks new dependencies for the example (React 18, Vite, MSW, plugin tooling) so the workspace installs reproducibly.
examples/ui/msw-react-crud/vite.config.ts	Defines Vite config for the example (React plugin, dev server on port 3000, and pre-bundling for `msw` modules).
examples/ui/msw-react-crud/tsconfig.node.json	TypeScript config for Node-side files (Vite config), aligned with ESNext/bundler resolution.
examples/ui/msw-react-crud/tsconfig.json	Strict TS config for the app source, enabling React JSX and common bundler-focused options.
examples/ui/msw-react-crud/src/types.ts	Declares `Task`, `CreateTaskInput`, and `UpdateTaskInput` interfaces to type CRUD operations in the UI.
examples/ui/msw-react-crud/src/mocks/createMockHandlers.ts	Implements an in-memory store and generates MSW handlers for discovery, metadata, and data CRUD endpoints from metadata.
examples/ui/msw-react-crud/src/mocks/browser.ts	Wires MSW browser worker startup, seeds initial task data, builds metadata from `objectstack.config.ts`, and starts the worker.
examples/ui/msw-react-crud/src/main.tsx	Bootstraps the app by starting the MSW worker and then rendering the React root component.
examples/ui/msw-react-crud/src/components/TaskList.tsx	React component that uses `@objectstack/client` to READ tasks, render a list, and perform delete/toggle-complete operations.
examples/ui/msw-react-crud/src/components/TaskItem.tsx	Presentational component for a single task row (priority badges, created date, edit/delete actions).
examples/ui/msw-react-crud/src/components/TaskForm.tsx	React form component demonstrating CREATE and UPDATE via `@objectstack/client` with basic validation and UX states.
examples/ui/msw-react-crud/src/App.tsx	High-level app shell that initializes the ObjectStack client, manages editing state, and composes `TaskForm` + `TaskList`.
examples/ui/msw-react-crud/src/App.css	Provides all layout and styling for the example (headers, task cards, buttons, states).
examples/ui/msw-react-crud/package.json	Defines the example package, its scripts, and runtime/dev dependencies (React 18, Vite 5, TypeScript, MSW, ObjectStack packages).
examples/ui/msw-react-crud/objectstack.config.ts	Declares the `task` object and basic app/navigation metadata used by the mock layer and to mirror ObjectStack conventions.
examples/ui/msw-react-crud/index.html	Basic HTML shell used by Vite to mount the React app at `#root`.
examples/ui/msw-react-crud/README.md	Main documentation for the example (features, structure, setup, API usage, and related resources); currently has minor mismatches with `package.json` and example paths.
examples/ui/msw-react-crud/QUICKSTART.md	Quick start guide that currently describes a plugin-based MSW integration; this does not match the manual handler approach used in this example.
examples/ui/msw-react-crud/CHANGELOG.md	Records the initial `1.0.0` release of the MSW + React CRUD example and its feature set.
examples/ui/msw-react-crud/.gitignore	Ignores node modules, build artifacts, editor/OS cruft, and the generated `public/mockServiceWorker.js` for this example.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

Copilot · 2026-01-26T00:33:57Z

+
+        store.delete(id);
+
+        return HttpResponse.json({ success: true }, { status: 204 });


The DELETE handler returns a 204 No Content status while still including a JSON body ({ success: true }), which is inconsistent with HTTP semantics and may confuse some clients or tooling. Consider either returning a 200 status with the JSON body, or keeping 204 and omitting the response body.

Suggested change

return HttpResponse.json({ success: true }, { status: 204 });

return HttpResponse.json({ success: true }, { status: 200 });

Copilot · 2026-01-26T00:33:57Z

+        const top = parseInt(url.searchParams.get('top') || '100');
+        const skip = parseInt(url.searchParams.get('$skip') || '0');
+
+        const records = Array.from(store.values());
+        const paginatedRecords = records.slice(skip, skip + top);
+
+        return HttpResponse.json({
+          '@odata.context': `${baseUrl}/data/$metadata#${objectName}`,
+          value: paginatedRecords,
+          count: records.length


The list handler ignores sort-related query parameters, but TaskList calls client.data.find('task', { top: 100, sort: ['priority', '-createdAt'] }), so the example UI suggests sorted results that the mock API does not actually implement. Either implement sorting in this handler (e.g., honoring the sort parameter) or remove the sort option from the client call so behavior matches the example.

Copilot · 2026-01-26T00:33:57Z

+- **@objectstack/plugin-msw** - MSW integration for ObjectStack
+- **react** - UI library
+- **msw** - Mock Service Worker for API mocking
+- **vite** - Build tool and dev server
+- **typescript** - Type safety
+


This dependencies list mentions @objectstack/plugin-msw, but this example's package.json does not declare or use that package, which can mislead users about required dependencies. Either add @objectstack/plugin-msw to this example's dependencies (and integrate it), or update the README to remove or clearly qualify this item.

Suggested change

- **@objectstack/plugin-msw** - MSW integration for ObjectStack

- **react** - UI library

- **msw** - Mock Service Worker for API mocking

- **vite** - Build tool and dev server

- **typescript** - Type safety

- **react** - UI library

- **msw** - Mock Service Worker for API mocking

- **vite** - Build tool and dev server

- **typescript** - Type safety

> Optional: **@objectstack/plugin-msw** provides a higher-level MSW integration for ObjectStack, but this example uses plain `msw` and does **not** require the plugin. For plugin usage, see the related `/examples/msw-demo`.

Copilot · 2026-01-26T00:33:58Z

+- [`/examples/msw-demo`](../../../msw-demo) - MSW plugin integration examples
+- [`/examples/todo`](../../../todo) - Todo app with ObjectStack Client


The relative links to /examples/msw-demo and /examples/todo appear to be incorrect: from examples/ui/msw-react-crud/README.md, ../../../msw-demo and ../../../todo resolve to the repo root, while these examples live under examples/msw-demo and examples/todo. Updating these to ../../msw-demo and ../../todo (or using absolute paths from the repo root) would make the links work.

Suggested change

- [`/examples/msw-demo`](../../../msw-demo) - MSW plugin integration examples

- [`/examples/todo`](../../../todo) - Todo app with ObjectStack Client

- [`/examples/msw-demo`](../../msw-demo) - MSW plugin integration examples

- [`/examples/todo`](../../todo) - Todo app with ObjectStack Client

Copilot · 2026-01-26T00:33:58Z

+# Quick Start Guide - Simplified MSW Integration
+
+This is the **simplified** version using `@objectstack/plugin-msw` that auto-mocks all API endpoints. No manual handler code required!
+
+## Prerequisites
+
+- Node.js 18 or later
+- pnpm package manager
+
+## Step 1: Install Dependencies
+
+From the repository root:
+
+```bash
+pnpm install
+```
+
+## Step 2: Build Required Packages
+
+Build the core packages:
+
+```bash
+# Build all required packages
+pnpm --filter @objectstack/spec build
+pnpm --filter @objectstack/runtime build
+pnpm --filter @objectstack/plugin-msw build
+pnpm --filter @objectstack/client build
+```
+
+## Step 3: Initialize MSW
+
+The MSW service worker file should already be initialized:
+
+```bash
+cd examples/ui/msw-react-crud
+npx msw init public/ --save
+```
+
+## Step 4: Start the Development Server
+
+```bash
+cd examples/ui/msw-react-crud
+pnpm dev
+```
+
+The application will start on `http://localhost:3000`
+
+## ✨ What's Different?
+
+### Before (Manual Approach) ❌
+
+You had to manually write 145+ lines of MSW handlers:
+
+```typescript
+// src/mocks/browser.ts - OLD WAY
+const handlers = [
+  http.get('/api/v1/data/task', ({ request }) => {
+    // Manual pagination, filtering, sorting...
+  }),
+  http.post('/api/v1/data/task', async ({ request }) => {
+    // Manual ID generation, validation...
+  }),
+  // ... more manual handlers
+];
+const worker = setupWorker(...handlers);
+await worker.start();
+```
+
+### After (Plugin Approach) ✅
+
+Now just **3 lines** with auto-mocking:
+
+```typescript
+// src/mocks/browser.ts - NEW WAY
+const mswPlugin = new MSWPlugin({ baseUrl: '/api/v1' });
+const runtime = new ObjectStackKernel([appConfig, mswPlugin]);
+await runtime.start();  // Auto-mocks ALL endpoints!
+```


This QUICKSTART describes a "simplified" setup using @objectstack/plugin-msw (MSWPlugin, ObjectStackKernel, auto-mocked endpoints), but the actual example code in this folder uses manual MSW handlers via createMockHandlers and does not reference the plugin. Consider either updating the Quick Start to match the current implementation, or clearly scoping it as an alternative plugin-based approach and pointing to the appropriate example and required dependencies.

Initial plan

acbdc35

Copilot AI assigned Copilot and hotlong Jan 25, 2026

Copilot started work on behalf of hotlong January 25, 2026 17:57 View session

vercel bot deployed to Preview January 25, 2026 17:59 View deployment

Add complete MSW + React CRUD example with ObjectStack Client

b6ffbba

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

vercel bot deployed to Preview January 25, 2026 18:04 View deployment

Add workspace configuration and CHANGELOG for MSW React example

cb60d98

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

vercel bot had a problem deploying to Preview January 25, 2026 18:06 Failure

Add Quick Start guide for MSW React CRUD example

7ddf1ab

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

vercel bot had a problem deploying to Preview January 25, 2026 18:08 Failure

Copilot AI changed the title ~~[WIP] Add complete example for MSW integration in React components~~ Add MSW + React CRUD reference implementation Jan 25, 2026

Copilot AI requested a review from hotlong January 25, 2026 18:10

Copilot finished work on behalf of hotlong January 25, 2026 18:10

Copilot AI and others added 3 commits January 25, 2026 18:27

Initial plan

7a0c222

hotlong closed this Jan 25, 2026

hotlong reopened this Jan 25, 2026

github-actions bot added documentation Improvements or additions to documentation dependencies Pull requests that update a dependency file tooling size/xl labels Jan 25, 2026

Copilot AI and others added 2 commits January 25, 2026 18:47

Merge pull request #166 from objectstack-ai/copilot/add-msw-integrati…

db9541f

…on-example-again

hotlong marked this pull request as ready for review January 26, 2026 00:29

Copilot AI review requested due to automatic review settings January 26, 2026 00:29

Copilot started reviewing on behalf of hotlong January 26, 2026 00:30 View session

vercel bot had a problem deploying to Preview January 26, 2026 00:30 Failure

hotlong merged commit 9fe557d into main Jan 26, 2026
13 of 16 checks passed

Copilot AI reviewed Jan 26, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add MSW + React CRUD reference implementation#165

Add MSW + React CRUD reference implementation#165
hotlong merged 9 commits intomainfrom
copilot/add-msw-integration-example

Copilot AI commented Jan 25, 2026 •

edited

Loading

Uh oh!

vercel bot commented Jan 25, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Jan 25, 2026

Uh oh!

github-actions bot commented Jan 26, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 26, 2026

Uh oh!

Copilot AI Jan 26, 2026

Uh oh!

Copilot AI Jan 26, 2026

Uh oh!

Copilot AI Jan 26, 2026

Uh oh!

Copilot AI Jan 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants


		store.delete(id);

		return HttpResponse.json({ success: true }, { status: 204 });

		- [`/examples/msw-demo`](../../../msw-demo) - MSW plugin integration examples
		- [`/examples/todo`](../../../todo) - Todo app with ObjectStack Client

Conversation

Copilot AI commented Jan 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Implementation

Configuration

Uh oh!

vercel bot commented Jan 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Jan 25, 2026

Uh oh!

github-actions bot commented Jan 26, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Copilot AI commented Jan 25, 2026 •

edited

Loading

vercel bot commented Jan 25, 2026 •

edited

Loading