chore: replace restful api to graphql (#1472)

goodjoblife · Jan 11, 2025 · cfd317b · cfd317b
1 parent 24e1eb4
commit cfd317b
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 49 deletions.
diff --git a/src/apis/experiencesApi.js b/src/apis/experiencesApi.js
@@ -3,39 +3,24 @@ import fetchUtil from 'utils/fetchUtil';
 
 import graphqlClient from 'utils/graphqlClient';
 import {
+  queryExperienceRepliesGql,
   deleteExpereinceLikeGql,
   createExperienceLikeGql,
   queryExperienceGql,
   queryExperienceLikeGql,
+  changeExperienceStatusGql,
   queryRelatedExperiencesGql,
   queryExperienceCountGql,
 } from 'graphql/experience';
 import { getPopularExperiencesQuery } from 'graphql/popularExperience';
 import { deleteReplyLike, createReplyLike } from 'graphql/reply';
 
-const getExperienceReplyOptions = {
-  start: 0,
-  limit: 100,
-};
-
-export const getExperienceReply = options => {
-  const finalOptions = {
-    ...getExperienceReplyOptions,
-    ...options,
-  };
-
-  const { experienceId, start, limit, token } = finalOptions;
-
-  const url = `/experiences/${experienceId}/replies`;
-
-  return fetchUtil(url).get({
-    query: {
-      start,
-      limit,
-    },
+export const queryExperienceReplies = async ({ id, token }) =>
+  graphqlClient({
+    query: queryExperienceRepliesGql,
+    variables: { id },
     token,
-  });
-};
+  }).then(data => data.experience.replies);
 
 export const postExperienceReply = ({ id, comment, token }) =>
   fetchUtil(`/experiences/${id}/replies`).post({
@@ -131,11 +116,10 @@ export const getPopularExperiences = () =>
     query: getPopularExperiencesQuery,
   }).then(data => data.popular_experiences);
 
-export const patchExperience = ({ id, status, token }) =>
-  fetchUtil(`/experiences/${id}`).patch({
-    body: {
-      status,
-    },
+export const changeExperienceStatus = ({ id, status, token }) =>
+  graphqlClient({
+    query: changeExperienceStatusGql,
+    variables: { input: { id, status } },
     token,
   });
 

diff --git a/src/apis/timeAndSalaryApi.js b/src/apis/timeAndSalaryApi.js
@@ -3,7 +3,7 @@ import graphqlClient from 'utils/graphqlClient';
 import {
   getSearchCompanyQuery,
   getSearchJobTitleQuery,
-  changeSalaryWorkTimeStatus,
+  changeSalaryWorkTimeStatusGql,
 } from 'graphql/timeAndSalary';
 
 const endpoint = '/workings';
@@ -23,9 +23,9 @@ export const fetchSearchJobTitle = ({ jobTitle }) =>
 export const postWorkings = ({ body, token }) =>
   fetchUtil(endpoint).post({ body, token });
 
-export const patchWorking = ({ id, status, token }) =>
+export const changeSalaryWorkTimeStatus = ({ id, status, token }) =>
   graphqlClient({
-    query: changeSalaryWorkTimeStatus,
+    query: changeSalaryWorkTimeStatusGql,
     variables: { input: { id, status } },
     token,
   });
diff --git a/src/components/ExperienceDetail/MessageBoard/CommentBlock.js b/src/components/ExperienceDetail/MessageBoard/CommentBlock.js
@@ -14,7 +14,7 @@ const formatDate = d => {
 
 const CommentBlock = ({ reply, toggleReplyLike }) => {
   return (
-    <section className={styles.container} id={`reply-${reply._id}`}>
+    <section className={styles.container} id={`reply-${reply.id}`}>
       <div className={styles.reaction}>
         <ThumbsUp
           count={reply.like_count}
@@ -36,7 +36,14 @@ const CommentBlock = ({ reply, toggleReplyLike }) => {
 };
 
 CommentBlock.propTypes = {
-  reply: PropTypes.object.isRequired,
+  reply: PropTypes.shape({
+    content: PropTypes.string.isRequired,
+    created_at: PropTypes.string.isRequired,
+    floor: PropTypes.number.isRequired,
+    id: PropTypes.string.isRequired,
+    like_count: PropTypes.number.isRequired,
+    liked: PropTypes.bool,
+  }).isRequired,
   toggleReplyLike: PropTypes.func.isRequired,
 };
 

diff --git a/src/components/ExperienceDetail/MessageBoard/index.js b/src/components/ExperienceDetail/MessageBoard/index.js
@@ -83,7 +83,7 @@ const MessageBoard = ({ experienceId }) => {
             <hr />
             {repliesState.value.map(reply => (
               <CommentBlock
-                key={reply._id}
+                key={reply.id}
                 reply={reply}
                 toggleReplyLike={async () => {
                   await likeReply(reply);

diff --git a/src/components/ExperienceDetail/hooks/useQueryReplies.js b/src/components/ExperienceDetail/hooks/useQueryReplies.js
@@ -1,19 +1,17 @@
 import { useAsyncFn } from 'react-use';
 import { useToken } from 'hooks/auth';
-import { getExperienceReply as getExperienceReplyApi } from 'apis/experiencesApi';
+import { queryExperienceReplies } from 'apis/experiencesApi';
 
 const useQueryReplies = experienceId => {
   const token = useToken();
-  return useAsyncFn(async () => {
-    const result = await getExperienceReplyApi({
-      experienceId,
-      start: 0,
-      limit: 100,
-      token,
-    });
-
-    return result.replies;
-  }, [experienceId, token]);
+  return useAsyncFn(
+    () =>
+      queryExperienceReplies({
+        id: experienceId,
+        token,
+      }),
+    [experienceId, token],
+  );
 };
 
 export default useQueryReplies;
diff --git a/src/components/Me/useQuery.js b/src/components/Me/useQuery.js
@@ -3,10 +3,10 @@ import { useAsyncFn } from 'react-use';
 import { useToken } from 'hooks/auth';
 import { queryMyPublishesApi } from 'apis/me';
 import {
-  patchExperience as patchExperienceApi,
   patchReply as patchReplyApi,
+  changeExperienceStatus,
 } from 'apis/experiencesApi';
-import { patchWorking as patchWorkingApi } from 'apis/timeAndSalaryApi';
+import { changeSalaryWorkTimeStatus } from 'apis/timeAndSalaryApi';
 
 export const useFetchMyPublishes = () => {
   const token = useToken();
@@ -22,7 +22,7 @@ export const useToggleExperienceStatus = () => {
   const token = useToken();
   return useCallback(
     o => {
-      return patchExperienceApi({
+      return changeExperienceStatus({
         id: o.id,
         status: o.status === 'published' ? 'hidden' : 'published',
         token,
@@ -36,7 +36,7 @@ export const useToggleSalaryWorkTimeStatus = () => {
   const token = useToken();
   return useCallback(
     o => {
-      return patchWorkingApi({
+      return changeSalaryWorkTimeStatus({
         id: o.id,
         status: o.status === 'published' ? 'hidden' : 'published',
         token,

diff --git a/src/graphql/experience.js b/src/graphql/experience.js
@@ -85,6 +85,21 @@ export const queryExperienceLikeGql = /* GraphQL */ `
   }
 `;
 
+export const queryExperienceRepliesGql = /* GraphQL */ `
+  query($id: ID!) {
+    experience(id: $id) {
+      replies {
+        id
+        content
+        like_count
+        floor
+        created_at
+        liked
+      }
+    }
+  }
+`;
+
 export const createInterviewExperience = /* GraphQL */ `
   mutation CreateInterviewExperience($input: CreateInterviewExperienceInput!) {
     createInterviewExperience(input: $input) {
@@ -175,3 +190,13 @@ export const queryExperienceCountGql = /* GraphQL */ `
     experienceCount
   }
 `;
+
+export const changeExperienceStatusGql = /* GraphQL */ `
+  mutation($input: ChangeExperienceStatusInput!) {
+    changeExperienceStatus(input: $input) {
+      experience {
+        id
+      }
+    }
+  }
+`;
diff --git a/src/graphql/timeAndSalary.js b/src/graphql/timeAndSalary.js
@@ -17,7 +17,7 @@ export const getSearchJobTitleQuery = /* GraphQL */ `
   }
 `;
 
-export const changeSalaryWorkTimeStatus = /* GraphQL */ `
+export const changeSalaryWorkTimeStatusGql = /* GraphQL */ `
   mutation($input: ChangeSalaryWorkTimeStatusInput!) {
     changeSalaryWorkTimeStatus(input: $input) {
       salary_work_time {