プリフェッチ実装（#140） (#256)

Merge branch 'main' into feature/140

#140

Merge remote-tracking branch 'origin/main' into feature/140

#140

#140

#140

#140

#140

Merge remote-tracking branch 'origin/main' into feature/140

#140

#140

#140

#140

#140

#140

#140

#140

#140

#140

#140

Merge remote-tracking branch 'origin/main' into feature/140

Merge remote-tracking branch 'origin/main' into feature/140

#140 ぼちぼち

Merge remote-tracking branch 'origin/main' into feature/140

#140

#140

#140

Co-authored-by: miteruzo <miteruzo@naver.com>
Reviewed-on: #256

frontend/src/components/TopNav.tsx

@@ -1,3 +1,4 @@
+import { useQuery } from '@tanstack/react-query'
 import { AnimatePresence, motion } from 'framer-motion'
 import { Fragment, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { useLocation } from 'react-router-dom'
@@ -6,6 +7,7 @@ import Separator from '@/components/MenuSeparator'
 import PrefetchLink from '@/components/PrefetchLink'
 import TopNavUser from '@/components/TopNavUser'
 import { WikiIdBus } from '@/lib/eventBus/WikiIdBus'
+import { tagsKeys, wikiKeys } from '@/lib/queryKeys'
 import { fetchTagByName } from '@/lib/tags'
 import { cn } from '@/lib/utils'
 import { fetchWikiPage } from '@/lib/wiki'
@@ -44,11 +46,26 @@ export default (({ user }: Props) => {
       visible:  false })
   const [menuOpen, setMenuOpen] = useState (false)
   const [openItemIdx, setOpenItemIdx] = useState (-1)
-  const [postCount, setPostCount] = useState<number | null> (null)
   const [wikiId, setWikiId] = useState<number | null> (WikiIdBus.get ())
 
+  const wikiIdStr = String (wikiId ?? '')
+
+  const { data: wikiPage } = useQuery ({
+      enabled: Boolean (wikiIdStr),
+      queryKey: wikiKeys.show (wikiIdStr, { }),
+      queryFn: () => fetchWikiPage (wikiIdStr, { }) })
+
+  const effectiveTitle = wikiPage?.title ?? ''
+
+  const { data: tag } = useQuery ({
+      enabled: Boolean (effectiveTitle),
+      queryKey: tagsKeys.show (effectiveTitle),
+      queryFn: () => fetchTagByName (effectiveTitle) })
+
+  const postCount = tag?.postCount ?? 0
+
   const wikiPageFlg = Boolean (/^\/wiki\/(?!new|changes)[^\/]+/.test (location.pathname) && wikiId)
-  const wikiTitle = location.pathname.split ('/')[2]
+  const wikiTitle = location.pathname.split ('/')[2] ?? ''
   const menu: Menu = [
       { name: '広場', to: '/posts', subMenu: [
 	  { name: '一覧', to: '/posts' },
@@ -113,26 +130,6 @@ export default (({ user }: Props) => {
 	location.pathname.startsWith (item.base || item.to))))
   }, [location])
 
-  useEffect (() => {
-    if (!(wikiId))
-      return
-
-    const fetchPostCount = async () => {
-      try
-      {
-	const wikiPage = await fetchWikiPage (String (wikiId ?? ''))
-	const tag = await fetchTagByName (wikiPage.title)
-
-	setPostCount (tag.postCount)
-      }
-      catch
-      {
-	setPostCount (0)
-      }
-    }
-    fetchPostCount ()
-  }, [wikiId])
-
   return (
       <>
 	<nav className="px-3 flex justify-between items-center w-full min-h-[48px]