Merge pull request #355 from social-tw/Issue/FetchingMethod

[Issue][Frontend] Refactor the method of fetching data using @tanstack/react-query

packages/frontend/src/pages/PostDetails/index.tsx

@@ -11,11 +11,7 @@ import { useQuery } from '@tanstack/react-query'
 import CommentForm from './CommentForm'
 import CommentList from './CommentList'
 import { PostStatus } from '@/types/Post'
-
-async function fetchPostById(postId: string) {
-    const response = await fetch(`${SERVER}/api/post/${postId}`)
-    return await response.json()
-}
+import { fetchSinglePost } from '@/utils/api'
 
 const PostDetails: React.FC = () => {
     const { id } = useParams()
@@ -32,7 +28,7 @@ const PostDetails: React.FC = () => {
         queryKey: ['post', id],
         queryFn: async () => {
             if (!id) return undefined
-            const post = await fetchPostById(id)
+            const post = await fetchSinglePost(id)
             return {
                 id: post._id,
                 postId: post.postId,

packages/frontend/src/utils/api.ts

@@ -10,6 +10,7 @@ import {
     FetchVotesByEpochKeysResponse,
     SortKeys,
 } from '../types/api'
+import { RelayRawPost } from '@/types/Post'
 
 export async function fetchRelayConfig() {
     const res = await fetch(`${SERVER}/api/config`)
@@ -24,21 +25,16 @@ export async function fetchLogin() {
 export async function fetchCommentsByPostId(
     postId: string,
 ): Promise<RelayRawComment[]> {
+    if (!postId) return []
     const queryParams = new URLSearchParams()
+    queryParams.append('postId', postId)
+    const res = await fetch(`${SERVER}/api/comment?${queryParams.toString()}`)
+    return await res.json()
+}
 
-    if (postId) {
-        queryParams.append('postId', postId)
-    }
-
-    const response = await fetch(
-        `${SERVER}/api/comment?${queryParams.toString()}`,
-    )
-
-    if (!response.ok) {
-        throw new Error(`HTTP error! status: ${await response.json()}`)
-    }
-
-    return await response.json()
+export async function fetchSinglePost(postId: string): Promise<RelayRawPost> {
+    const res = await fetch(`${SERVER}/api/post/${postId}`)
+    return res.json()
 }
 
 export async function fetchPostsByEpochKeys({