プリフェッチ実装（#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/pages/wiki/WikiDetailPage.tsx

@@ -1,4 +1,5 @@
-import { useEffect, useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { useEffect, useMemo } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useLocation, useNavigate, useParams } from 'react-router-dom'
 
@@ -12,10 +13,11 @@ import MainArea from '@/components/layout/MainArea'
 import { SITE_TITLE } from '@/config'
 import { WikiIdBus } from '@/lib/eventBus/WikiIdBus'
 import { fetchPosts } from '@/lib/posts'
+import { postsKeys, tagsKeys, wikiKeys } from '@/lib/queryKeys'
 import { fetchTagByName } from '@/lib/tags'
 import { fetchWikiPage, fetchWikiPageByTitle } from '@/lib/wiki'
 
-import type { Post, Tag, WikiPage } from '@/types'
+import type { Tag } from '@/types'
 
 
 export default () => {
@@ -25,76 +27,57 @@ export default () => {
   const location = useLocation ()
   const navigate = useNavigate ()
 
-  const defaultTag = { name: title, category: 'general' } as Tag
-
-  const [posts, setPosts] = useState<Post[]> ([])
-  const [tag, setTag] = useState (defaultTag)
-  const [wikiPage, setWikiPage] = useState<WikiPage | null | undefined> (undefined)
+  const defaultTag = useMemo (() => ({ name: title, category: 'general' } as Tag), [title])
 
   const query = new URLSearchParams (location.search)
-  const version = query.get ('version')
+  const version = query.get ('version') || undefined
+
+  const { data: wikiPage, isLoading: loading } = useQuery ({
+      enabled:  Boolean (title) && !(/^\d+$/.test (title)),
+      queryKey: wikiKeys.show (title, { version }),
+      queryFn:  () => fetchWikiPageByTitle (title, { version }) })
+
+  const effectiveTitle = wikiPage?.title ?? title
+
+  const { data: tag } = useQuery ({
+      enabled:  Boolean (effectiveTitle),
+      queryKey: tagsKeys.show (effectiveTitle),
+      queryFn:  () => fetchTagByName (effectiveTitle) })
+
+  const { data } = useQuery ({
+      enabled:  Boolean (effectiveTitle) && !(version),
+      queryKey: postsKeys.index ({ tags: effectiveTitle, match: 'all', page: 1, limit: 8 }),
+      queryFn:  () => fetchPosts ({ tags: effectiveTitle, match: 'all', page: 1, limit: 8 }) })
+  const posts = data?.posts || []
 
   useEffect (() => {
-    if (/^\d+$/.test (title))
-      {
-	void (async () => {
-	  setWikiPage (undefined)
-	  try
-	  {
-	    const data = await fetchWikiPage (title)
-	    navigate (`/wiki/${ encodeURIComponent(data.title) }`, { replace: true })
-	  }
-	  catch
-	  {
-	    ;
-	  }
-	}) ()
+    if (!(wikiPage))
+      return
 
-	return
-      }
+    WikiIdBus.set (wikiPage.id)
 
-    void (async () => {
-      setWikiPage (undefined)
-      try
-      {
-	const data = await fetchWikiPageByTitle (title, version ? { version } : { })
-	if (data.title !== title)
-	  navigate (`/wiki/${ encodeURIComponent(data.title) }`, { replace: true })
-	setWikiPage (data)
-	WikiIdBus.set (data.id)
-      }
-      catch
-      {
-	setWikiPage (null)
-      }
-    }) ()
+    if (wikiPage.title !== title)
+      navigate (`/wiki/${ encodeURIComponent(wikiPage.title) }`, { replace: true })
+
+    return () => WikiIdBus.set (null)
+  }, [wikiPage, title, navigate])
+
+  useEffect (() => {
+    if (!(/^\d+$/.test (title)))
+      return
 
-    setPosts ([])
     void (async () => {
       try
       {
-	const data = await fetchPosts ({ tags: title, match: 'all', limit: 8 })
-	setPosts (data.posts)
+	const data = await fetchWikiPage (title, { })
+	navigate (`/wiki/${ encodeURIComponent(data.title) }`, { replace: true })
       }
       catch
       {
 	;
       }
     }) ()
-
-    void (async () => {
-      try
-      {
-	setTag (await fetchTagByName (title))
-      }
-      catch
-      {
-	setTag (defaultTag)
-      }
-    }) ()
-
-    return () => WikiIdBus.set (null)
-  }, [title, location.search])
+  }, [title, navigate])
 
   return (
       <MainArea>
@@ -104,7 +87,8 @@ export default () => {
 	</Helmet>
 
 	{(wikiPage && version) && (
-	    <div className="text-sm flex gap-3 items-center justify-center border border-gray-700 rounded px-2 py-1 mb-4">
+	    <div className="text-sm flex gap-3 items-center justify-center
+			    border border-gray-700 rounded px-2 py-1 mb-4">
 	      {wikiPage.pred ? (
 		  <PrefetchLink to={`/wiki/${ encodeURIComponent (title) }?version=${ wikiPage.pred }`}>
 		    &lt; 古
@@ -119,15 +103,13 @@ export default () => {
 	    </div>)}
 
 	<PageTitle>
-	  <TagLink tag={tag}
+	  <TagLink tag={tag ?? defaultTag}
 		   withWiki={false}
 		   withCount={false}
 		   {...(version && { to: `/wiki/${ encodeURIComponent (title) }` })}/>
 	</PageTitle>
 	<div className="prose mx-auto p-4">
-	  {wikiPage === undefined
-	   ? 'Loading...'
-	   : <WikiBody title={title} body={wikiPage?.body}/>}
+	  {loading ? 'Loading...' : <WikiBody title={title} body={wikiPage?.body}/>}
 	</div>
 
 	{(!(version) && posts.length > 0) && (