Better handling of a logged out user

packages/web/components/templates/NavigationLayout.tsx

@@ -22,6 +22,7 @@ import useWindowDimensions from '../../lib/hooks/useGetWindowDimensions'
 import { useAddItem } from '../../lib/networking/library_items/useLibraryItems'
 import { useHandleAddUrl } from '../../lib/hooks/useHandleAddUrl'
 import { useGetViewer } from '../../lib/networking/viewer/useGetViewer'
+import { useQueryClient } from '@tanstack/react-query'
 
 export type NavigationSection =
   | 'home'
@@ -45,12 +46,18 @@ type NavigationLayoutProps = {
 export function NavigationLayout(props: NavigationLayoutProps): JSX.Element {
   useApplyLocalTheme()
 
-  const { data: viewerData } = useGetViewer()
   const router = useRouter()
+  const queryClient = useQueryClient()
   const [showLogoutConfirmation, setShowLogoutConfirmation] = useState(false)
   const [showKeyboardCommandsModal, setShowKeyboardCommandsModal] =
     useState(false)
-  const addItem = useAddItem()
+  const {
+    data: viewerData,
+    isFetching,
+    isPending,
+    isError,
+    status,
+  } = useGetViewer()
 
   useRegisterActions(navigationCommands(router))
 
@@ -69,6 +76,12 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element {
     if (viewerData) {
       setupAnalytics(viewerData)
     }
+    if (!viewerData && !isPending) {
+      console.log('viewerData: ', viewerData, isFetching, isPending, status)
+      // there was an error loading, so lets log out
+      queryClient.clear()
+      router.push(`/login`)
+    }
   }, [viewerData])
 
   const showLogout = useCallback(() => {

packages/web/lib/logout.ts

@@ -1,7 +1,9 @@
+import { useQueryClient } from '@tanstack/react-query'
 import { deinitAnalytics } from './analytics'
 import { logoutMutation } from './networking/mutations/logoutMutation'
 
 export const logout = async () => {
+  const queryClient = useQueryClient()
   await logoutMutation()
   try {
     const result = await logoutMutation()
@@ -9,6 +11,7 @@ export const logout = async () => {
       throw new Error('Logout failed')
     }
     deinitAnalytics()
+    queryClient.clear()
     window.location.href = '/login'
   } catch {
     // TODO: display an error message instead