feat: add @objectstack/client dependency to crm-app and update lockfile

Author: hotlong

examples/crm-app/package.json

@@ -20,6 +20,7 @@
     "@object-ui/plugin-grid": "workspace:*",
     "@object-ui/react": "workspace:*",
     "@object-ui/types": "workspace:*",
+    "@objectstack/client": "^0.4.1",
     "@objectstack/core": "^0.6.1",
     "@objectstack/runtime": "^0.6.1",
     "clsx": "^2.1.1",

examples/crm-app/src/App.tsx

@@ -10,6 +10,7 @@ import { ObjectGrid } from '@object-ui/plugin-grid';
 import { dataSource } from './config/dataSource';
 import { registerPlaceholders } from '@object-ui/components';
 import { SidebarNav } from './components/SidebarNav';
+import { client } from './client';
 
 // Schemas
 import { dashboardSchema } from './schemas/dashboard';
@@ -57,12 +58,8 @@ const ContactDetailPage = () => {
 
     useEffect(() => {
         setLoading(true);
-        // Using the MSW intercepted endpoint
-        fetch(`/api/v1/data/contact/${id}`)
-            .then(res => {
-                if (!res.ok) throw new Error("Not found");
-                return res.json();
-            })
+        // Using the ObjectStack Client
+        client.data.get('contact', id!)
             .then(setContact)
             .catch(() => setContact(null))
             .finally(() => setLoading(false));
@@ -85,11 +82,7 @@ const OpportunityDetailPage = () => {
 
     useEffect(() => {
         setLoading(true);
-        fetch(`/api/v1/data/opportunity/${id}`)
-            .then(res => {
-                if (!res.ok) throw new Error("Not found");
-                return res.json();
-            })
+        client.data.get('opportunity', id!)
             .then(setOpportunity)
             .catch(() => setOpportunity(null))
             .finally(() => setLoading(false));

examples/crm-app/src/client.ts

@@ -0,0 +1,10 @@
+import { ObjectStackClient } from '@objectstack/client';
+
+export const client = new ObjectStackClient({
+  baseUrl: '/api/v1'
+});
+
+export const initClient = async () => {
+    await client.connect();
+    console.log('[Client] Connected to ObjectStack');
+}

examples/crm-app/src/config/dataSource.ts

@@ -1,7 +1,7 @@
 import { ObjectStackAdapter } from '@object-ui/data-objectstack';
 
 export const dataSource = new ObjectStackAdapter({
-  baseUrl: typeof window !== 'undefined' ? window.location.origin : 'http://localhost:3000',
+  baseUrl: '/api/v1',
   // In a real app we would have token management, but for MSW mock we might not need auth or use a dummy token.
   token: 'mock-token',
   fetch: (globalThis.fetch as any), // Ensure we use the global fetch which Mocks/Browsers patch

examples/crm-app/src/main.tsx

@@ -4,12 +4,14 @@ import App from './App';
 import './index.css';
 
 import { startMockServer } from './mocks/runtime';
+import { initClient } from './client';
 
 async function enableMocking() {
   if (process.env.NODE_ENV !== 'development') {
     return;
   }
-  return startMockServer();
+  await startMockServer();
+  await initClient(); // Ensure client is connected after server starts
 }
 
 enableMocking().then(() => {