refactor: rewrite useUser with RQ

packages/web/src/graphql/queries/get-user.js

@@ -1,18 +0,0 @@
-import { gql } from '@apollo/client';
-export const GET_USER = gql`
-  query GetUser($id: String!) {
-    getUser(id: $id) {
-      id
-      fullName
-      email
-      role {
-        id
-        key
-        name
-        isAdmin
-      }
-      createdAt
-      updatedAt
-    }
-  }
-`;

packages/web/src/hooks/useUser.js

@@ -1,19 +1,17 @@
-import * as React from 'react';
-import { useLazyQuery } from '@apollo/client';
-import { GET_USER } from 'graphql/queries/get-user';
-export default function useUser(userId) {
-  const [getUser, { data, loading }] = useLazyQuery(GET_USER);
-  React.useEffect(() => {
-    if (userId) {
-      getUser({
-        variables: {
-          id: userId,
-        },
+import { useQuery } from '@tanstack/react-query';
+import api from 'helpers/api';
+
+export default function useUser({ userId }) {
+  const query = useQuery({
+    queryKey: ['user', userId],
+    queryFn: async ({ signal }) => {
+      const { data } = await api.get(`/v1/admin/users/${userId}`, {
+        signal,
       });
-    }
-  }, [userId]);
-  return {
-    user: data?.getUser,
-    loading,
-  };
+      return data;
+    },
+    enabled: !!userId,
+  });
+
+  return query;
 }

packages/web/src/pages/EditUser/index.jsx

@@ -28,7 +28,8 @@ export default function EditUser() {
   const formatMessage = useFormatMessage();
   const [updateUser, { loading }] = useMutation(UPDATE_USER);
   const { userId } = useParams();
-  const { user, loading: userLoading } = useUser(userId);
+  const { data: userData, loading: isUserLoading } = useUser({ userId });
+  const user = userData?.data;
   const { data, loading: isRolesLoading } = useRoles();
   const roles = data?.data;
   const enqueueSnackbar = useEnqueueSnackbar();
@@ -73,7 +74,7 @@ export default function EditUser() {
         </Grid>
 
         <Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
-          {userLoading && (
+          {isUserLoading && (
             <Stack direction="column" gap={2}>
               <Skeleton variant="rounded" height={55} />
               <Skeleton variant="rounded" height={55} />
@@ -82,7 +83,7 @@ export default function EditUser() {
             </Stack>
           )}
 
-          {!userLoading && (
+          {!isUserLoading && (
             <Form defaultValues={user} onSubmit={handleUserUpdate}>
               <Stack direction="column" gap={2}>
                 <TextField