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

@@ -1,20 +1,18 @@
-import axios from 'axios'
-import toCamel from 'camelcase-keys'
-import { useEffect, useMemo, useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { useMemo } from 'react'
 import ReactMarkdown from 'react-markdown'
-import { Link } from 'react-router-dom'
 import remarkGFM from 'remark-gfm'
 
+import PrefetchLink from '@/components/PrefetchLink'
 import SectionTitle from '@/components/common/SectionTitle'
 import SubsectionTitle from '@/components/common/SubsectionTitle'
-import { API_BASE_URL } from '@/config'
+import { wikiKeys } from '@/lib/queryKeys'
 import remarkWikiAutoLink from '@/lib/remark-wiki-autolink'
+import { fetchWikiPages } from '@/lib/wiki'
 
 import type { FC } from 'react'
 import type { Components } from 'react-markdown'
 
-import type { WikiPage } from '@/types'
-
 type Props = { title: string
 	       body?: string }
 
@@ -24,7 +22,7 @@ const mdComponents = { h1:  ({ children }) => <SectionTitle>{children}</SectionT
 		       ul:  ({ children }) => <ul className="list-disc pl-6">{children}</ul>,
 		       a:   (({ href, children }) => (
 				['/', '.'].some (e => href?.startsWith (e))
-			        ? <Link to={href!}>{children}</Link>
+			        ? <PrefetchLink to={href!}>{children}</PrefetchLink>
 			        : (
 				    <a href={href}
 				       target="_blank"
@@ -34,26 +32,15 @@ const mdComponents = { h1:  ({ children }) => <SectionTitle>{children}</SectionT
 
 
 export default (({ title, body }: Props) => {
-  const [pageNames, setPageNames] = useState<string[]> ([])
+  const { data } = useQuery ({
+      enabled: Boolean (body),
+      queryKey: wikiKeys.index ({ }),
+      queryFn: () => fetchWikiPages ({ }) })
+  const pageNames = (data ?? []).map (page => page.title).sort ((a, b) => b.length - a.length)
 
   const remarkPlugins = useMemo (
       () => [() => remarkWikiAutoLink (pageNames), remarkGFM], [pageNames])
 
-  useEffect (() => {
-    void (async () => {
-      try
-      {
-	const res = await axios.get (`${ API_BASE_URL }/wiki`)
-	const data: WikiPage[] = toCamel (res.data as any, { deep: true })
-	setPageNames (data.map (page => page.title).sort ((a, b) => b.length - a.length))
-      }
-      catch
-      {
-	setPageNames ([])
-      }
-    }) ()
-  }, [])
-
   return (
       <ReactMarkdown components={mdComponents} remarkPlugins={remarkPlugins}>
 	{body || `このページは存在しません。[新規作成してください](/wiki/new?title=${ encodeURIComponent (title) })。`}