Fix demo

Author: djhi

examples/demo/src/dataProvider/index.ts

@@ -1,5 +1,4 @@
 import { DataProvider } from 'react-admin';
-import fakeServerFactory from '../fakeServer';
 
 export default (type: string) => {
     // The fake servers require to generate data, which can take some time.
@@ -29,7 +28,6 @@ export default (type: string) => {
 };
 
 const getDataProvider = async (type: string): Promise<DataProvider> => {
-    await fakeServerFactory(process.env.REACT_APP_DATA_PROVIDER || '');
     /**
      * This demo can work with either a fake REST server, or a fake GraphQL server.
      *

examples/demo/src/fakeServer/graphql.ts

@@ -1,12 +1,21 @@
-import { http } from 'msw';
-import { setupWorker } from 'msw/browser';
 import JsonGraphqlServer from 'json-graphql-server';
 import generateData from 'data-generator-retail';
+import { HttpResponse, HttpResponseResolver } from 'msw';
 
-const data = generateData();
-const restServer = JsonGraphqlServer({ data });
-const handler = restServer.getHandler();
+export default (): HttpResponseResolver => {
+    const data = generateData();
+    const server = JsonGraphqlServer({ data });
+    const graphqlHandler = server.getHandler();
 
-export const worker = setupWorker(http.all(/http:\/\/localhost:4000/, handler));
+    // Temporary workaround for MSW's graphql handler because json-graphql-server is not yet compatible with MSW
+    const handler: HttpResponseResolver = async ({ request }) => {
+        const body = await request.text();
+        const result = await graphqlHandler({
+            requestBody: body,
+        });
 
-export default () => worker;
+        return HttpResponse.json(JSON.parse(result.body));
+    };
+
+    return handler;
+};

examples/demo/src/fakeServer/index.ts

@@ -1,20 +1,23 @@
 // only install the mocks once
 // this is necessary with react@18 in StrictMode
 let fakeServer: any;
+import { http } from 'msw';
+import { setupWorker } from 'msw/browser';
 
-export default (type: string) => {
+export default async (type: string) => {
     if (!fakeServer) {
         switch (type) {
             case 'graphql':
-                fakeServer = import('./graphql').then(factory =>
+                fakeServer = await import('./graphql').then(factory =>
                     factory.default()
                 );
                 break;
             default:
-                fakeServer = import('./rest').then(factory =>
+                fakeServer = await import('./rest').then(factory =>
                     factory.default()
                 );
         }
     }
-    return fakeServer;
+    const worker = setupWorker(http.all(/http:\/\/localhost:4000/, fakeServer));
+    return worker;
 };

examples/demo/src/index.tsx

@@ -1,14 +1,16 @@
 import { createRoot } from 'react-dom/client';
 
 import App from './App';
-import { worker } from './fakeServer/graphql';
+import fakeServerWorker from './fakeServer';
 
 const container = document.getElementById('root');
 if (!container) {
     throw new Error('No container found');
 }
 const root = createRoot(container);
 
-worker.start({ onUnhandledRequest: 'bypass' }).then(() => {
-    root.render(<App />);
-});
+fakeServerWorker(process.env.REACT_APP_DATA_PROVIDER ?? '')
+    .then(worker => worker.start({ onUnhandledRequest: 'bypass' }))
+    .then(() => {
+        root.render(<App />);
+    });