Fix error after being logged out and logging in again

packages/ra-core/src/auth/useCheckAuth.spec.tsx

@@ -3,6 +3,7 @@ import { useState, useEffect } from 'react';
 import expect from 'expect';
 import { screen, render, waitFor } from '@testing-library/react';
 import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom';
+import { QueryClientProvider, QueryClient } from 'react-query';
 import { createMemoryHistory } from 'history';
 
 import { useCheckAuth } from './useCheckAuth';
@@ -53,6 +54,8 @@ const authProvider: AuthProvider = {
     getPermissions: () => Promise.reject('not authenticated'),
 };
 
+const queryClient = new QueryClient();
+
 describe('useCheckAuth', () => {
     afterEach(() => {
         notify.mockClear();
@@ -63,7 +66,9 @@ describe('useCheckAuth', () => {
         render(
             <HistoryRouter history={history}>
                 <AuthContext.Provider value={authProvider}>
-                    <TestComponent params={{ token: true }} />
+                    <QueryClientProvider client={queryClient}>
+                        <TestComponent params={{ token: true }} />
+                    </QueryClientProvider>
                 </AuthContext.Provider>
             </HistoryRouter>
         );
@@ -79,7 +84,9 @@ describe('useCheckAuth', () => {
         render(
             <HistoryRouter history={history}>
                 <AuthContext.Provider value={authProvider}>
-                    <TestComponent params={{ token: false }} />
+                    <QueryClientProvider client={queryClient}>
+                        <TestComponent params={{ token: false }} />
+                    </QueryClientProvider>
                 </AuthContext.Provider>
             </HistoryRouter>
         );
@@ -95,10 +102,12 @@ describe('useCheckAuth', () => {
         render(
             <HistoryRouter history={history}>
                 <AuthContext.Provider value={authProvider}>
-                    <TestComponent
-                        params={{ token: false }}
-                        logoutOnFailure={false}
-                    />
+                    <QueryClientProvider client={queryClient}>
+                        <TestComponent
+                            params={{ token: false }}
+                            logoutOnFailure={false}
+                        />
+                    </QueryClientProvider>
                 </AuthContext.Provider>
             </HistoryRouter>
         );
@@ -114,10 +123,12 @@ describe('useCheckAuth', () => {
         render(
             <HistoryRouter history={history}>
                 <AuthContext.Provider value={authProvider}>
-                    <TestComponent
-                        params={{ token: false }}
-                        disableNotification
-                    />
+                    <QueryClientProvider client={queryClient}>
+                        <TestComponent
+                            params={{ token: false }}
+                            disableNotification
+                        />
+                    </QueryClientProvider>
                 </AuthContext.Provider>
             </HistoryRouter>
         );
@@ -138,7 +149,9 @@ describe('useCheckAuth', () => {
                         checkAuth: () => Promise.reject({ message: false }),
                     }}
                 >
-                    <TestComponent />
+                    <QueryClientProvider client={queryClient}>
+                        <TestComponent />
+                    </QueryClientProvider>
                 </AuthContext.Provider>
             </HistoryRouter>
         );
@@ -155,7 +168,9 @@ describe('useCheckAuth', () => {
             <HistoryRouter history={history}>
                 <BasenameContextProvider basename="/foo">
                     <AuthContext.Provider value={authProvider}>
-                        <TestComponent params={{ token: false }} />
+                        <QueryClientProvider client={queryClient}>
+                            <TestComponent params={{ token: false }} />
+                        </QueryClientProvider>
                     </AuthContext.Provider>
                 </BasenameContextProvider>
             </HistoryRouter>

packages/ra-core/src/auth/useLogout.spec.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import { MemoryRouter, Routes, Route } from 'react-router-dom';
+import { QueryClient } from 'react-query';
+import expect from 'expect';
+
+import { useGetOne } from '../dataProvider';
+import useLogout from './useLogout';
+import { CoreAdminContext } from '../core/CoreAdminContext';
+
+describe('useLogout', () => {
+    it('should clear the QueryClient cache', async () => {
+        const LogoutButton = () => {
+            const logout = useLogout();
+            return <button onClick={logout}>Logout</button>;
+        };
+        const dataProvider = {
+            getOne: () => Promise.resolve({ data: { id: 1, title: 'foo' } }),
+        } as any;
+        const queryClient = new QueryClient();
+        const Content = () => {
+            const { data } = useGetOne('posts', { id: 1 });
+            return <div>{data?.title}</div>;
+        };
+        const Login = () => <div>Login</div>;
+        render(
+            <MemoryRouter>
+                <CoreAdminContext
+                    dataProvider={dataProvider}
+                    queryClient={queryClient}
+                >
+                    <Routes>
+                        <Route path="/" element={<Content />} />
+                        <Route path="/login" element={<Login />} />
+                    </Routes>
+
+                    <LogoutButton />
+                </CoreAdminContext>
+            </MemoryRouter>
+        );
+        await screen.findByText('foo');
+        expect(
+            queryClient.getQueryData(['posts', 'getOne', { id: '1' }])
+        ).toEqual({
+            id: 1,
+            title: 'foo',
+        });
+        fireEvent.click(screen.getByText('Logout'));
+        await screen.findByText('Login');
+        expect(
+            queryClient.getQueryData(['posts', 'getOne', { id: '1' }])
+        ).toBeUndefined();
+    });
+});

packages/ra-core/src/auth/useLogout.ts

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef } from 'react';
 import { useLocation, useNavigate, Path } from 'react-router-dom';
+import { useQueryClient } from 'react-query';
 
 import useAuthProvider, { defaultAuthParams } from './useAuthProvider';
 import { useResetStore } from '../store';
@@ -26,6 +27,7 @@ import { removeDoubleSlashes } from '../routing/useCreatePath';
  */
 const useLogout = (): Logout => {
     const authProvider = useAuthProvider();
+    const queryClient = useQueryClient();
     const resetStore = useResetStore();
     const navigate = useNavigate();
     // useNavigate forces rerenders on every navigation, even if we don't use the result
@@ -64,6 +66,7 @@ const useLogout = (): Logout => {
             authProvider.logout(params).then(redirectToFromProvider => {
                 if (redirectToFromProvider === false) {
                     resetStore();
+                    queryClient.clear();
                     // do not redirect
                     return;
                 }
@@ -94,10 +97,11 @@ const useLogout = (): Logout => {
                 }
                 navigateRef.current(newLocation, newLocationOptions);
                 resetStore();
+                queryClient.clear();
 
                 return redirectToFromProvider;
             }),
-        [authProvider, resetStore, loginUrl]
+        [authProvider, resetStore, loginUrl, queryClient]
     );
 
     const logoutWithoutProvider = useCallback(
@@ -113,9 +117,10 @@ const useLogout = (): Logout => {
                 }
             );
             resetStore();
+            queryClient.clear();
             return Promise.resolve();
         },
-        [resetStore, location, navigate, loginUrl]
+        [resetStore, location, navigate, loginUrl, queryClient]
     );
 
     return authProvider ? logout : logoutWithoutProvider;