Refactor interceptors as middlewares

Makefile

@@ -18,6 +18,9 @@ run-msw:
 run-fetch-mock:
 	@NODE_ENV=development VITE_MOCK=fetch-mock npm run dev
 
+run-sinon:
+	@NODE_ENV=development VITE_MOCK=sinon npm run dev
+
 watch:
 	@NODE_ENV=development npm run build --watch
 

UPGRADE.md

@@ -39,4 +39,32 @@ server.init(data);
 +        { id: 3, title: 'boz' },
 +    ],
 +});
+```
+
+## Request and Response Interceptors Have Been Replaced By Middlewares
+
+Fakerest used to have request and response interceptors. We replaced those with middlewares. They allow much more use cases.
+
+Migrate your request interceptors:
+
+```diff
+-restServer.addRequestInterceptor(function(request) {
++restServer.addMiddleware(async function(request, context, next) {
+    var start = (request.params._start - 1) || 0;
+    var end = request.params._end !== undefined ? (request.params._end - 1) : 19;
+    request.params.range = [start, end];
+-    return request; // always return the modified input
++    return next(request, context);
+});
+```
+
+Migrate your response interceptors:
+
+```diff
+-restServer.addResponseInterceptor(function(response) {
++restServer.addMiddleware(async function(request, context, next) {
++    const response = await next(request, context);
+    response.body = { data: response.body, status: response.status };
+    return response;
+});
 ```

example/App.tsx

@@ -2,16 +2,31 @@ import React from 'react';
 import {
     Admin,
     Create,
+    type DataProvider,
     EditGuesser,
     ListGuesser,
     Resource,
     ShowGuesser,
+    required,
+    AutocompleteInput,
 } from 'react-admin';
-import { dataProvider } from './dataProvider';
+import { QueryClient } from 'react-query';
 
-export const App = () => {
+const queryClient = new QueryClient({
+    defaultOptions: {
+        queries: {
+            refetchOnWindowFocus: false,
+        },
+    },
+});
+
+export const App = ({ dataProvider }: { dataProvider: DataProvider }) => {
     return (
-        <Admin dataProvider={dataProvider}>
+        <Admin
+            dataProvider={dataProvider}
+            authProvider={authProvider}
+            queryClient={queryClient}
+        >
             <Resource
                 name="books"
                 list={ListGuesser}
@@ -24,18 +39,28 @@ export const App = () => {
                 list={ListGuesser}
                 edit={EditGuesser}
                 show={ShowGuesser}
+                recordRepresentation={(record) =>
+                    `${record.first_name} ${record.last_name}`
+                }
             />
         </Admin>
     );
 };
 
 import { Edit, ReferenceInput, SimpleForm, TextInput } from 'react-admin';
+import authProvider from './authProvider';
 
 export const BookCreate = () => (
     <Create>
         <SimpleForm>
-            <ReferenceInput source="author_id" reference="authors" />
-            <TextInput source="title" />
+            <ReferenceInput source="author_id" reference="authors">
+                <AutocompleteInput validate={required()} />
+            </ReferenceInput>
+            <TextInput
+                source="title"
+                validate={required()}
+                defaultValue="Anna Karenina"
+            />
         </SimpleForm>
     </Create>
 );

example/authProvider.ts

@@ -0,0 +1,51 @@
+import { type AuthProvider, HttpError } from 'react-admin';
+import data from './users.json';
+
+/**
+ * This authProvider is only for test purposes. Don't use it in production.
+ */
+export const authProvider: AuthProvider = {
+    login: ({ username, password }) => {
+        const user = data.users.find(
+            (u) => u.username === username && u.password === password,
+        );
+
+        if (user) {
+            const { password, ...userToPersist } = user;
+            localStorage.setItem('user', JSON.stringify(userToPersist));
+            return Promise.resolve();
+        }
+
+        return Promise.reject(
+            new HttpError('Unauthorized', 401, {
+                message: 'Invalid username or password',
+            }),
+        );
+    },
+    logout: () => {
+        localStorage.removeItem('user');
+        return Promise.resolve();
+    },
+    checkError: (error) => {
+        const status = error.status;
+        if (status === 401 || status === 403) {
+            localStorage.removeItem('auth');
+            return Promise.reject();
+        }
+        // other error code (404, 500, etc): no need to log out
+        return Promise.resolve();
+    },
+    checkAuth: () =>
+        localStorage.getItem('user') ? Promise.resolve() : Promise.reject(),
+    getPermissions: () => {
+        return Promise.resolve(undefined);
+    },
+    getIdentity: () => {
+        const persistedUser = localStorage.getItem('user');
+        const user = persistedUser ? JSON.parse(persistedUser) : null;
+
+        return Promise.resolve(user);
+    },
+};
+
+export default authProvider;

example/dataProvider.ts

@@ -1,3 +1,19 @@
 import simpleRestProvider from 'ra-data-simple-rest';
+import { fetchUtils } from 'react-admin';
 
-export const dataProvider = simpleRestProvider('http://localhost:3000');
+const httpClient = (url: string, options: any = {}) => {
+    if (!options.headers) {
+        options.headers = new Headers({ Accept: 'application/json' });
+    }
+    const persistedUser = localStorage.getItem('user');
+    const user = persistedUser ? JSON.parse(persistedUser) : null;
+    if (user) {
+        options.headers.set('Authorization', `Bearer ${user.id}`);
+    }
+    return fetchUtils.fetchJson(url, options);
+};
+
+export const dataProvider = simpleRestProvider(
+    'http://localhost:3000',
+    httpClient,
+);

example/fetchMock.ts

@@ -1,16 +1,52 @@
 import fetchMock from 'fetch-mock';
-import FakeRest from 'fakerest';
+import { FetchMockServer, withDelay } from 'fakerest';
 import { data } from './data';
+import { dataProvider as defaultDataProvider } from './dataProvider';
 
 export const initializeFetchMock = () => {
-    const restServer = new FakeRest.FetchServer({
+    const restServer = new FetchMockServer({
         baseUrl: 'http://localhost:3000',
+        data,
+        loggingEnabled: true,
     });
     if (window) {
         // @ts-ignore
         window.restServer = restServer; // give way to update data in the console
     }
-    restServer.init(data);
-    restServer.toggleLogging(); // logging is off by default, enable it
+
+    restServer.addMiddleware(withDelay(300));
+    restServer.addMiddleware(async (request, context, next) => {
+        if (!request.headers?.get('Authorization')) {
+            return new Response(null, { status: 401 });
+        }
+        return next(request, context);
+    });
+    restServer.addMiddleware(async (request, context, next) => {
+        if (context.collection === 'books' && request.method === 'POST') {
+            if (
+                restServer.collections[context.collection].getCount({
+                    filter: {
+                        title: context.requestJson?.title,
+                    },
+                }) > 0
+            ) {
+                throw new Response(
+                    JSON.stringify({
+                        errors: {
+                            title: 'An article with this title already exists. The title must be unique.',
+                        },
+                    }),
+                    {
+                        status: 400,
+                        statusText: 'Title is required',
+                    },
+                );
+            }
+        }
+
+        return next(request, context);
+    });
     fetchMock.mock('begin:http://localhost:3000', restServer.getHandler());
 };
+
+export const dataProvider = defaultDataProvider;

example/index.tsx

@@ -5,19 +5,44 @@ import { App } from './App';
 switch (import.meta.env.VITE_MOCK) {
     case 'fetch-mock':
         import('./fetchMock')
-            .then(({ initializeFetchMock }) => {
+            .then(({ initializeFetchMock, dataProvider }) => {
                 initializeFetchMock();
+                return dataProvider;
             })
-            .then(() => {
-                ReactDom.render(<App />, document.getElementById('root'));
+            .then((dataProvider) => {
+                ReactDom.render(
+                    <App dataProvider={dataProvider} />,
+                    document.getElementById('root'),
+                );
+            });
+        break;
+    case 'sinon':
+        import('./sinon')
+            .then(({ initializeSinon, dataProvider }) => {
+                initializeSinon();
+                return dataProvider;
+            })
+            .then((dataProvider) => {
+                ReactDom.render(
+                    <App dataProvider={dataProvider} />,
+                    document.getElementById('root'),
+                );
             });
         break;
     default:
         import('./msw')
-            .then(({ worker }) => {
-                return worker.start();
+            .then(({ worker, dataProvider }) => {
+                return worker
+                    .start({
+                        quiet: true,
+                        onUnhandledRequest: 'bypass',
+                    })
+                    .then(() => dataProvider);
             })
-            .then(() => {
-                ReactDom.render(<App />, document.getElementById('root'));
+            .then((dataProvider) => {
+                ReactDom.render(
+                    <App dataProvider={dataProvider} />,
+                    document.getElementById('root'),
+                );
             });
 }

example/msw.ts

@@ -1,10 +1,48 @@
 import { setupWorker } from 'msw/browser';
-import { getMswHandlers } from '../src/FakeRest';
+import { HttpResponse } from 'msw';
+import { MswServer, withDelay } from '../src/FakeRest';
 import { data } from './data';
+import { dataProvider as defaultDataProvider } from './dataProvider';
 
-export const worker = setupWorker(
-    ...getMswHandlers({
-        baseUrl: 'http://localhost:3000',
-        data,
-    }),
-);
+const restServer = new MswServer({
+    baseUrl: 'http://localhost:3000',
+    data,
+});
+
+restServer.addMiddleware(withDelay(300));
+restServer.addMiddleware(async (request, context, next) => {
+    if (!request.headers?.get('Authorization')) {
+        throw new Response(null, { status: 401 });
+    }
+    return next(request, context);
+});
+
+restServer.addMiddleware(async (request, context, next) => {
+    if (context.collection === 'books' && request.method === 'POST') {
+        if (
+            restServer.collections[context.collection].getCount({
+                filter: {
+                    title: context.requestJson?.title,
+                },
+            }) > 0
+        ) {
+            throw new Response(
+                JSON.stringify({
+                    errors: {
+                        title: 'An article with this title already exists. The title must be unique.',
+                    },
+                }),
+                {
+                    status: 400,
+                    statusText: 'Title is required',
+                },
+            );
+        }
+    }
+
+    return next(request, context);
+});
+
+export const worker = setupWorker(...restServer.getHandlers());
+
+export const dataProvider = defaultDataProvider;