#434

frontend/src/App.tsx

@@ -22,7 +22,7 @@ import { initialiseUserSession } from '@/lib/users'
 import { prepareHelpPage } from '@/lib/help'
 import { fetchLocales, isLocaleCode, legacyLocalePath,
 	 switchLocalePath, unlocalisedPath } from '@/lib/locales'
-import { localesKeys, sessionKeys } from '@/lib/queryKeys'
+import { isAuthorityDependentQuery, localesKeys, sessionKeys } from '@/lib/queryKeys'
 import { switchPostFilterLocale } from '@/lib/posts'
 import { switchWikiLocale } from '@/lib/wiki'
 import { useLocale } from '@/lib/useLocale'
@@ -63,7 +63,10 @@ const lazyPage = <Props extends object,> (
   })
   const Deferred = lazy (preload)
   // A preloaded page must render synchronously on the first hydration pass.
-  const Page = (props: Props) => createElement (loaded ?? Deferred, props)
+  const Page = (props: Props) => {
+    const [Component] = useState (() => loaded ?? Deferred)
+    return createElement (Component, props)
+  }
   return Object.assign (Page, { preload })
 }
 
@@ -77,7 +80,6 @@ const MaterialListPage = lazyPage (() => import ('@/pages/materials/MaterialList
 const MaterialNewPage = lazyPage (() => import ('@/pages/materials/MaterialNewPage'))
 const MaterialSyncSuppressionsPage = lazyPage (
     () => import ('@/pages/materials/MaterialSyncSuppressionsPage'))
-const CountsPage = lazyPage (() => import ('@/pages/CountsPage'))
 const CountsResourcePage = lazyPage (() => import ('@/pages/CountsResourcePage'))
 const MorePage = lazyPage (() => import ('@/pages/MorePage'))
 const GekanatorUnavailablePage = lazyPage (() => import ('@/pages/GekanatorUnavailablePage'))
@@ -196,8 +198,8 @@ export const pageRoutes = (
     { id: 'gekanator', path: 'gekanator', element: <GekanatorRoute user={user}/>,
       handle: { locale: 'ja', sitemap: ['static'], preload: locale => locale === 'ja'
 	  ? GekanatorPage.preload () : GekanatorUnavailablePage.preload () } },
-    { path: 'counts', element: <CountsPage/>,
-      handle: { preload: CountsPage.preload } },
+    { path: 'counts', element: <CountsResourcePage resource="posts"/>,
+      handle: { preload: CountsResourcePage.preload } },
     { path: 'counts/posts', element: <CountsResourcePage resource="posts"/>,
       handle: { preload: CountsResourcePage.preload } },
     { path: 'counts/tags', element: <CountsResourcePage resource="tags"/>,
@@ -276,10 +278,14 @@ const RoutedApp = ({ locales }: { locales: AvailableLocale[] }) => {
     const next = typeof action === 'function' ? action (authority.current) : action
     if (next?.id !== authority.current?.id || next?.role !== authority.current?.role)
     {
-      client.cancelQueries ()
-      client.removeQueries ({ predicate: query => query.queryKey[0] !== 'session' })
+      const filters = {
+	  predicate: (query: { queryKey: readonly unknown[] }) =>
+	      isAuthorityDependentQuery (query.queryKey) }
+      void client.cancelQueries (filters)
+      client.removeQueries (filters)
     }
     authority.current = next
+    client.setQueryData (sessionKeys.current, next)
     setUserState (next)
   }, [client])
   const [status, setStatus] = useState (200)