#140

frontend/src/pages/posts/PostDetailPage.tsx

@@ -13,6 +13,7 @@ import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
 import { SITE_TITLE } from '@/config'
 import { fetchPost, toggleViewedFlg } from '@/lib/posts'
+import { postsKeys } from '@/lib/queryKeys'
 import { cn } from '@/lib/utils'
 import NotFound from '@/pages/NotFound'
 import ServiceUnavailable from '@/pages/ServiceUnavailable'
@@ -26,12 +27,13 @@ type Props = { user: User | null }
 
 export default (({ user }: Props) => {
   const { id } = useParams ()
+  const postId = String (id ?? '')
+  const postKey = postsKeys.show (postId)
 
   const { data: post, isError: errorFlg, error } = useQuery ({
-      enabled:          Boolean (id),
-      queryKey:         ['posts', String (id)],
-      queryFn:          () => fetchPost (String (id)),
-      placeholderData:  undefined })
+      enabled:  Boolean (id),
+      queryKey: postKey,
+      queryFn:  () => fetchPost (postId) })
 
   const qc = useQueryClient ()
 
@@ -39,25 +41,25 @@ export default (({ user }: Props) => {
 
   const changeViewedFlg = useMutation ({
       mutationFn: async () => {
-	const next = !(post!.viewed)
-	await toggleViewedFlg (id!, next)
+	const cur = qc.getQueryData<any> (postKey)
+	const next = !(cur?.viewed)
+	await toggleViewedFlg (postId, next)
 	return next
       },
       onMutate: async () => {
-	await qc.cancelQueries ({ queryKey: ['posts', String (id)] })
-	const prev = qc.getQueryData<any> (['posts', String (id)])
-	qc.setQueryData (['posts', String (id)],
+	await qc.cancelQueries ({ queryKey: postKey })
+	const prev = qc.getQueryData<any> (postKey)
+	qc.setQueryData (postKey,
 			 (cur: any) => cur ? { ...cur, viewed: !(cur.viewed) } : cur)
 	return { prev }
       },
       onError: (...[, , ctx]) => {
 	if (ctx?.prev)
-	  qc.setQueryData (['posts', String (id)], ctx.prev)
+	  qc.setQueryData (postKey, ctx.prev)
 	toast ({ title: '失敗……', description: '通信に失敗しました……' })
       },
       onSuccess: () => {
-	qc.invalidateQueries ({ queryKey: ['posts', 'index'] })
-	qc.invalidateQueries ({ queryKey: ['related', String (id)] })
+	qc.invalidateQueries ({ queryKey: postsKeys.root })
       } })
 
   useEffect (() => {
@@ -115,14 +117,14 @@ export default (({ user }: Props) => {
 		  </Tab>
 		  {['admin', 'member'].some (r => user?.role === r) && (
 		      <Tab name="編輯">
-			<PostEditForm post={post}
-				      onSave={newPost => {
-					qc.setQueryData (['posts', String (id)],
-							 (prev: any) => newPost ?? prev)
-					qc.invalidateQueries ({ queryKey: ['posts', 'index'] })
-					qc.invalidateQueries ({ queryKey: ['related', String (id)] })
-					toast ({ description: '更新しました．' })
-				      }}/>
+			<PostEditForm
+			    post={post}
+			    onSave={newPost => {
+			      qc.setQueryData (postsKeys.show (postId),
+					       (prev: any) => newPost ?? prev)
+			      qc.invalidateQueries ({ queryKey: postsKeys.root })
+			      toast ({ description: '更新しました．' })
+			    }}/>
 		      </Tab>)}
 		</TabGroup>
 	      </>)