#140

frontend/src/components/PostList.tsx

@@ -11,10 +11,11 @@ type Props = { posts:     Post[]
 export default (({ posts, onClick }: Props) => (
     <div className="flex flex-wrap gap-6 p-4">
       {posts.map ((post, i) => (
-	  <PrefetchLink to={`/posts/${ post.id }`}
+	  <PrefetchLink
-		key={post.id}
+	      to={`/posts/${ post.id }`}
-		className="w-40 h-40 overflow-hidden rounded-lg shadow-md hover:shadow-lg"
+	      key={post.id}
-		onClick={onClick}>
+	      className="w-40 h-40 overflow-hidden rounded-lg shadow-md hover:shadow-lg"
+	      onClick={onClick}>
 	    <img src={post.thumbnail || post.thumbnailBase || undefined}
 		 alt={post.title || post.url}
 		 title={post.title || post.url || undefined}

frontend/src/components/PrefetchLink.tsx

@@ -16,13 +16,13 @@ type Props = AnchorHTMLAttributes<HTMLAnchorElement> & {
 
 
 export default (({ to,
-		  replace,
+		   replace,
-		  className,
+		   className,
-		  onMouseEnter,
+		   onMouseEnter,
-		  onTouchStart,
+		   onTouchStart,
-		  onClick,
+		   onClick,
-		  cancelOnError = false,
+		   cancelOnError = false,
-		  ...rest }: Props) => {
+		   ...rest }: Props) => {
   const navigate = useNavigate ()
   const qc = useQueryClient ()
   const url = useMemo (() => (new URL (to, location.origin)).toString (), [to])

frontend/src/pages/posts/PostDetailPage.tsx

@@ -43,19 +43,19 @@ export default (({ user }: Props) => {
 	return next
       },
       onMutate: async () => {
-	await qc.cancelQueries ({ queryKey: ['post', String (id)] })
+	await qc.cancelQueries ({ queryKey: ['posts', String (id)] })
-	const prev = qc.getQueryData<any> (['post', String (id)])
+	const prev = qc.getQueryData<any> (['posts', String (id)])
-	qc.setQueryData (['post', String (id)],
+	qc.setQueryData (['posts', String (id)],
 			 (cur: any) => cur ? { ...cur, viewed: !(cur.viewed) } : cur)
 	return { prev }
       },
       onError: (...[, , ctx]) => {
 	if (ctx?.prev)
-	  qc.setQueryData (['post', String (id)], ctx.prev)
+	  qc.setQueryData (['posts', String (id)], ctx.prev)
 	toast ({ title: '失敗……', description: '通信に失敗しました……' })
       },
       onSuccess: () => {
-	qc.invalidateQueries ({ queryKey: ['posts'] })
+	qc.invalidateQueries ({ queryKey: ['posts', 'index'] })
 	qc.invalidateQueries ({ queryKey: ['related', String (id)] })
       } })