Merge pull request #9908 from marmelab/upgrade-fakerest

Upgrade FakeRest to 4.0
marmelab · Jun 11, 2024 · 952e777 · 952e777
2 parents 0d211de + dbddd4c
commit 952e777
Show file tree

Hide file tree

Showing 16 changed files with 166 additions and 208 deletions.
diff --git a/examples/crm/src/dataProvider.ts b/examples/crm/src/dataProvider.ts
@@ -3,14 +3,14 @@ import { withLifecycleCallbacks } from 'react-admin';
 
 import generateData from './dataGenerator';
 
-const baseDataProvider = fakeRestDataProvider(generateData(), true);
+const baseDataProvider = fakeRestDataProvider(generateData(), true, 300);
 
 const TASK_MARKED_AS_DONE = 'TASK_MARKED_AS_DONE';
 const TASK_MARKED_AS_UNDONE = 'TASK_MARKED_AS_UNDONE';
 const TASK_DONE_NOT_CHANGED = 'TASK_DONE_NOT_CHANGED';
 let taskUpdateType = TASK_DONE_NOT_CHANGED;
 
-const augmentedDataProvider = withLifecycleCallbacks(baseDataProvider, [
+export const dataProvider = withLifecycleCallbacks(baseDataProvider, [
     {
         resource: 'contactNotes',
         afterCreate: async (result, dataProvider) => {
@@ -109,13 +109,3 @@ const augmentedDataProvider = withLifecycleCallbacks(baseDataProvider, [
         },
     },
 ]);
-
-export const dataProvider = new Proxy(augmentedDataProvider, {
-    get: (target, name: string) => (resource: string, params: any) =>
-        new Promise(resolve =>
-            setTimeout(
-                () => resolve(augmentedDataProvider[name](resource, params)),
-                300
-            )
-        ),
-});
diff --git a/examples/data-generator/src/types.ts b/examples/data-generator/src/types.ts
@@ -6,7 +6,7 @@ import type { Invoice } from './invoices';
 import type { Review } from './reviews';
 import { Settings } from './finalize';
 
-export interface Db {
+export interface Db extends Record<string, any> {
     customers: Customer[];
     categories: Category[];
     products: Product[];

diff --git a/examples/demo/package.json b/examples/demo/package.json
@@ -12,14 +12,13 @@
         "clsx": "^2.1.1",
         "data-generator-retail": "^5.0.0-alpha.0",
         "date-fns": "^3.6.0",
-        "fakerest": "^3.0.0",
+        "fakerest": "^4.0.0",
         "fetch-mock": "~9.11.0",
         "graphql": "^15.6.0",
         "graphql-tag": "^2.12.6",
         "inflection": "^3.0.0",
         "json-graphql-server": "~3.0.1",
         "query-string": "^7.1.3",
-        "ra-data-fakerest": "^5.0.0-alpha.0",
         "ra-data-graphql": "^5.0.0-alpha.0",
         "ra-data-graphql-simple": "^5.0.0-alpha.0",
         "ra-data-simple-rest": "^5.0.0-alpha.0",

diff --git a/examples/demo/src/dataProvider/rest.ts b/examples/demo/src/dataProvider/rest.ts
@@ -1,22 +1,3 @@
 import simpleRestProvider from 'ra-data-simple-rest';
 
-const restProvider = simpleRestProvider('http://localhost:4000');
-
-const delayedDataProvider = new Proxy(restProvider, {
-    get: (target, name, self) => {
-        // as we await for the dataProvider, JS calls then on it. We must trap that call or else the dataProvider will be called with the then method
-        if (name === 'then') {
-            return self;
-        }
-        return (resource: string, params: any) =>
-            new Promise(resolve =>
-                setTimeout(
-                    () =>
-                        resolve(restProvider[name as string](resource, params)),
-                    500
-                )
-            );
-    },
-});
-
-export default delayedDataProvider;
+export default simpleRestProvider('http://localhost:4000');
diff --git a/examples/demo/src/fakeServer/rest.ts b/examples/demo/src/fakeServer/rest.ts
@@ -1,15 +1,18 @@
-import FakeRest from 'fakerest';
+import { FetchMockAdapter, withDelay } from 'fakerest';
 import fetchMock from 'fetch-mock';
 import generateData from 'data-generator-retail';
 
 export default () => {
     const data = generateData();
-    const restServer = new FakeRest.FetchServer('http://localhost:4000');
+    const adapter = new FetchMockAdapter({
+        baseUrl: 'http://localhost:4000',
+        data,
+        loggingEnabled: true,
+        middlewares: [withDelay(500)],
+    });
     if (window) {
-        window.restServer = restServer; // give way to update data in the console
+        window.restServer = adapter.server; // give way to update data in the console
     }
-    restServer.init(data);
-    restServer.toggleLogging(); // logging is off by default, enable it
-    fetchMock.mock('begin:http://localhost:4000', restServer.getHandler());
+    fetchMock.mock('begin:http://localhost:4000', adapter.getHandler());
     return () => fetchMock.restore();
 };
diff --git a/examples/demo/src/fakerest.d.ts b/examples/demo/src/fakerest.d.ts
diff --git a/examples/simple/src/dataProvider.tsx b/examples/simple/src/dataProvider.tsx
@@ -5,7 +5,7 @@ import data from './data';
 import addUploadFeature from './addUploadFeature';
 import { queryClient } from './queryClient';
 
-const dataProvider = withLifecycleCallbacks(fakeRestProvider(data, true), [
+const dataProvider = withLifecycleCallbacks(fakeRestProvider(data, true, 300), [
     {
         resource: 'posts',
         beforeDelete: async ({ id }, dp) => {
@@ -111,23 +111,8 @@ const sometimesFailsDataProvider = new Proxy(uploadCapableDataProvider, {
     },
 });
 
-const delayedDataProvider = new Proxy(sometimesFailsDataProvider, {
-    get: (target, name) => (resource, params) => {
-        if (typeof name === 'symbol' || name === 'then') {
-            return;
-        }
-        return new Promise(resolve =>
-            setTimeout(
-                () =>
-                    resolve(sometimesFailsDataProvider[name](resource, params)),
-                300
-            )
-        );
-    },
-});
-
 interface ResponseError extends Error {
     status?: number;
 }
 
-export default delayedDataProvider;
+export default sometimesFailsDataProvider;
diff --git a/packages/ra-core/src/controller/list/InfiniteListBase.stories.tsx b/packages/ra-core/src/controller/list/InfiniteListBase.stories.tsx
@@ -40,21 +40,7 @@ const data = {
     ],
 };
 
-const baseDataProvider = fakeRestProvider(data);
-
-const dataProvider = new Proxy(baseDataProvider, {
-    get: (target, name) => (resource, params) => {
-        if (typeof name === 'symbol' || name === 'then') {
-            return;
-        }
-        return new Promise(resolve =>
-            setTimeout(
-                () => resolve(baseDataProvider[name](resource, params)),
-                300
-            )
-        );
-    },
-});
+const dataProvider = fakeRestProvider(data, undefined, 300);
 
 const BookListView = () => {
     const { data, isPending, sort, setSort, filterValues, setFilters } =

diff --git a/packages/ra-core/src/controller/list/ListBase.stories.tsx b/packages/ra-core/src/controller/list/ListBase.stories.tsx
@@ -39,21 +39,7 @@ const data = {
     ],
 };
 
-const baseDataProvider = fakeRestProvider(data, true);
-
-const dataProvider = new Proxy(baseDataProvider, {
-    get: (target, name) => (resource, params) => {
-        if (typeof name === 'symbol' || name === 'then') {
-            return;
-        }
-        return new Promise(resolve =>
-            setTimeout(
-                () => resolve(baseDataProvider[name](resource, params)),
-                300
-            )
-        );
-    },
-});
+const dataProvider = fakeRestProvider(data, true, 300);
 
 const BookListView = () => {
     const {

diff --git a/packages/ra-core/src/dataProvider/useDelete.spec.tsx b/packages/ra-core/src/dataProvider/useDelete.spec.tsx
@@ -289,22 +289,30 @@ describe('useDelete', () => {
             jest.spyOn(console, 'error').mockImplementation(() => {});
             render(<ErrorCasePessimistic />);
             screen.getByText('Delete first post').click();
-            await waitFor(() => {
-                expect(screen.queryByText('success')).toBeNull();
-                expect(screen.queryByText('something went wrong')).toBeNull();
-                expect(screen.queryByText('Hello')).not.toBeNull();
-                expect(screen.queryByText('World')).not.toBeNull();
-                expect(screen.queryByText('mutating')).not.toBeNull();
-            });
-            await waitFor(() => {
-                expect(screen.queryByText('success')).toBeNull();
-                expect(
-                    screen.queryByText('something went wrong')
-                ).not.toBeNull();
-                expect(screen.queryByText('Hello')).not.toBeNull();
-                expect(screen.queryByText('World')).not.toBeNull();
-                expect(screen.queryByText('mutating')).toBeNull();
-            });
+            await waitFor(
+                () => {
+                    expect(screen.queryByText('success')).toBeNull();
+                    expect(
+                        screen.queryByText('something went wrong')
+                    ).toBeNull();
+                    expect(screen.queryByText('Hello')).not.toBeNull();
+                    expect(screen.queryByText('World')).not.toBeNull();
+                    expect(screen.queryByText('mutating')).not.toBeNull();
+                },
+                { timeout: 4000 }
+            );
+            await waitFor(
+                () => {
+                    expect(screen.queryByText('success')).toBeNull();
+                    expect(
+                        screen.queryByText('something went wrong')
+                    ).not.toBeNull();
+                    expect(screen.queryByText('Hello')).not.toBeNull();
+                    expect(screen.queryByText('World')).not.toBeNull();
+                    expect(screen.queryByText('mutating')).toBeNull();
+                },
+                { timeout: 4000 }
+            );
         });
         it('when optimistic, displays result and success side effects right away', async () => {
             jest.spyOn(console, 'log').mockImplementation(() => {});

diff --git a/packages/ra-data-fakerest/README.md b/packages/ra-data-fakerest/README.md
@@ -90,6 +90,34 @@ const App = () => (
 );
 ```
 
+## Delay
+
+You can pass a delay in milliseconds as the third argument to the constructor. This will simulate a network delay for each request.
+
+```jsx
+// in src/App.js
+import * as React from "react";
+import { Admin, Resource } from 'react-admin';
+import fakeDataProvider from 'ra-data-fakerest';
+
+const dataProvider = fakeDataProvider({ /* data here */ }, false, 1000);
+
+const App = () => (
+    <Admin dataProvider={dataProvider}>
+        // ...
+    </Admin>
+);
+```
+
+## Inspecting the Data
+
+`ra-data-fakerest` makes its internal database accessible in the global scope under the `_database` key. You can use it to inspect the data in your browser console.
+
+```js
+_database.getOne('posts', 1);
+// { id: 1, title: 'FooBar' }
+```
+
 ## Features
 
 This data provider uses [FakeRest](https://github.com/marmelab/FakeRest) under the hood. That means that it offers the same features:

diff --git a/packages/ra-data-fakerest/package.json b/packages/ra-data-fakerest/package.json
@@ -37,7 +37,7 @@
         "watch": "tsc --outDir dist/esm --module es2015 --watch"
     },
     "dependencies": {
-        "fakerest": "^3.0.0"
+        "fakerest": "^4.0.0"
     },
     "devDependencies": {
         "@types/jest": "^29.5.2",