refactor(web): improve API hooks (#1818)

Author: airslice

web/src/app/features/AccountSetting/hooks.ts

@@ -1,4 +1,8 @@
-import { useMeFetcher } from "@reearth/services/api";
+import {
+  useMe,
+  useMeMutations,
+  useUserMutations
+} from "@reearth/services/api/user";
 import { useCallback } from "react";
 
 type UpdatePasswordType = {
@@ -7,41 +11,41 @@ type UpdatePasswordType = {
 };
 
 export default () => {
-  const { useMeQuery, useUpdatePassword, useDeleteUser, useUpdateLanguage } =
-    useMeFetcher();
-  const { me: data } = useMeQuery();
+  const { updatePassword, updateLanguage } = useMeMutations();
+  const { deleteUser } = useUserMutations();
+  const { me: data } = useMe();
 
   const passwordPolicy = window.REEARTH_CONFIG?.passwordPolicy;
 
   const handleUpdateUserPassword = useCallback(
     async ({ password, passwordConfirmation }: UpdatePasswordType) => {
       try {
-        await useUpdatePassword({ password, passwordConfirmation });
+        await updatePassword({ password, passwordConfirmation });
       } catch (error) {
         console.error("Failed to update password:", error);
       }
     },
-    [useUpdatePassword]
+    [updatePassword]
   );
 
   const handleDeleteUser = useCallback(async () => {
     try {
       const userId = data.id;
-      if (userId) await useDeleteUser({ userId });
+      if (userId) await deleteUser({ userId });
     } catch (error) {
       console.error("Failed to delete user:", error);
     }
-  }, [data.id, useDeleteUser]);
+  }, [data.id, deleteUser]);
 
   const handleUpdateUserLanguage = useCallback(
     async ({ lang }: { lang: string }) => {
       try {
-        await useUpdateLanguage(lang);
+        await updateLanguage(lang);
       } catch (error) {
         console.error("Failed to update language:", error);
       }
     },
-    [useUpdateLanguage]
+    [updateLanguage]
   );
 
   return {

web/src/app/features/AssetsManager/hooks.ts

@@ -1,6 +1,6 @@
 import useLoadMore from "@reearth/app/hooks/useLoadMore";
 import { ManagerLayout } from "@reearth/app/ui/components/ManagerBase";
-import { useAssetsFetcher } from "@reearth/services/api";
+import { useAssetMutations, useAssets } from "@reearth/services/api/asset";
 import { AssetSortField, SortDirection } from "@reearth/services/gql";
 import { useT } from "@reearth/services/i18n";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -107,10 +107,9 @@ export default ({
   }, []);
 
   // assets
-  const { useAssetsQuery, useRemoveAssets, useCreateAssets } =
-    useAssetsFetcher();
+  const { removeAssets, createAssets } = useAssetMutations();
   const { assets, hasMoreAssets, isRefetching, endCursor, loading, fetchMore } =
-    useAssetsQuery({
+    useAssets({
       workspaceId: workspaceId ?? "",
       projectId,
       pagination: {
@@ -207,14 +206,14 @@ export default ({
   const handleAssetsCreate = useCallback(
     async (files?: FileList) => {
       if (!files) return;
-      await useCreateAssets({
+      await createAssets({
         workspaceId: workspaceId ?? "",
         projectId,
         file: files,
         coreSupport: true
       });
     },
-    [useCreateAssets, workspaceId, projectId]
+    [createAssets, workspaceId, projectId]
   );
 
   // upload
@@ -300,12 +299,12 @@ export default ({
 
   const handleAssetDelete = useCallback(async () => {
     if (selectedAssetIds.length) {
-      const { status } = await useRemoveAssets(selectedAssetIds);
+      const { status } = await removeAssets(selectedAssetIds);
       if (status === "success") {
         selectAsset([]);
       }
     }
-  }, [selectedAssetIds, useRemoveAssets]);
+  }, [selectedAssetIds, removeAssets]);
 
   return {
     filteredAssets,

web/src/app/features/CreateWorkspaceModal/index.tsx

@@ -6,7 +6,10 @@ import {
   TextInput,
   Typography
 } from "@reearth/app/lib/reearth-ui";
-import { useWorkspaceFetcher } from "@reearth/services/api";
+import {
+  useWorkspaceMutations,
+  useWorkspaces
+} from "@reearth/services/api/workspace";
 import { useT } from "@reearth/services/i18n";
 import { useAddWorkspaceModal } from "@reearth/services/state";
 import { styled, useTheme } from "@reearth/services/theme";
@@ -19,8 +22,7 @@ const AddWorkspaceModal: FC = () => {
 
   const navigate = useNavigate();
   const [addWorkspaceModal, setAddWorkspaceModal] = useAddWorkspaceModal();
-  const { useCreateWorkspace: addWorkspace, useWorkspacesQuery } =
-    useWorkspaceFetcher();
+  const { createWorkspace } = useWorkspaceMutations();
 
   const [workspaceNameConfirm, setWorkspaceNameConfirm] = useState<string>("");
 
@@ -29,14 +31,14 @@ const AddWorkspaceModal: FC = () => {
   }, [setAddWorkspaceModal]);
 
   const handleAddWorkspace = useCallback(async () => {
-    const { data } = await addWorkspace({
+    const { data } = await createWorkspace({
       name: workspaceNameConfirm
     });
     setAddWorkspaceModal(false);
     navigate(`/dashboard/${data?.id}`);
-  }, [addWorkspace, workspaceNameConfirm, setAddWorkspaceModal, navigate]);
+  }, [createWorkspace, workspaceNameConfirm, setAddWorkspaceModal, navigate]);
 
-  const { workspaces } = useWorkspacesQuery();
+  const { workspaces } = useWorkspaces();
   const isDuplicatedName: boolean | undefined = useMemo(() => {
     const name = workspaceNameConfirm.trim();
     if (!name) return false;

web/src/app/features/Dashboard/ContentsContainer/Members/AddMemberModal.tsx

@@ -7,7 +7,8 @@ import {
   TextInput,
   Typography
 } from "@reearth/app/lib/reearth-ui";
-import { useMeFetcher, useWorkspaceFetcher } from "@reearth/services/api";
+import { useSearchUser } from "@reearth/services/api/user";
+import { useWorkspaceMutations } from "@reearth/services/api/workspace";
 import { Role } from "@reearth/services/gql";
 import { useT } from "@reearth/services/i18n";
 import { Workspace } from "@reearth/services/state";
@@ -28,7 +29,6 @@ const AddMemberModal: FC<AddMemberModalProps> = ({
 }) => {
   const t = useT();
   const theme = useTheme();
-  const { useSearchUser } = useMeFetcher();
 
   const [userNotFoundWarningVisible, setUserNotFoundWarningVisible] =
     useState(false);
@@ -81,19 +81,19 @@ const AddMemberModal: FC<AddMemberModalProps> = ({
     }
   }, [user]);
 
-  const { useAddMemberToWorkspace: addMember } = useWorkspaceFetcher();
+  const { addMemberToWorkspace } = useWorkspaceMutations();
 
   const handleAddMembersToWorkspace = useCallback(async () => {
     if (searchResult.length === 0 || !workspace?.id) return;
     for (const user of searchResult) {
-      await addMember({
+      await addMemberToWorkspace({
         workspaceId: workspace.id,
         userId: user.id,
         role: Role.Reader
       });
     }
     onClose();
-  }, [searchResult, workspace, addMember, onClose]);
+  }, [searchResult, workspace, addMemberToWorkspace, onClose]);
 
   const handleRemoveUserFromSearchResult = useCallback((userId: string) => {
     setSearchResult((prev) => prev.filter((u) => u.id !== userId));

web/src/app/features/Dashboard/ContentsContainer/Members/DeleteMemberWarningModal.tsx

@@ -5,7 +5,7 @@ import {
   ModalPanel,
   Typography
 } from "@reearth/app/lib/reearth-ui";
-import { useWorkspaceFetcher } from "@reearth/services/api";
+import { useWorkspaceMutations } from "@reearth/services/api/workspace";
 import { WorkspaceMember } from "@reearth/services/gql";
 import { useT } from "@reearth/services/i18n";
 import { Workspace } from "@reearth/services/state";
@@ -27,13 +27,13 @@ const DeleteMemberWarningModal: FC<DeleteMemberWarningModalProps> = ({
 }) => {
   const t = useT();
 
-  const { useRemoveMemberFromWorkspace: removeMember } = useWorkspaceFetcher();
+  const { removeMemberFromWorkspace } = useWorkspaceMutations();
   const onRemoveMember = useCallback(
     (userId: string) => {
       if (!userId || !workspace?.id) return;
-      removeMember({ workspaceId: workspace?.id, userId });
+      removeMemberFromWorkspace({ workspaceId: workspace?.id, userId });
     },
-    [workspace?.id, removeMember]
+    [workspace?.id, removeMemberFromWorkspace]
   );
   const handleRemoveMember = useCallback(() => {
     if (!member?.user?.id) return;

web/src/app/features/Dashboard/ContentsContainer/Members/UpdateRoleModal.tsx

@@ -1,6 +1,6 @@
 import { Button, Modal, ModalPanel } from "@reearth/app/lib/reearth-ui";
 import { InputField, SelectField } from "@reearth/app/ui/fields";
-import { useWorkspaceFetcher } from "@reearth/services/api";
+import { useWorkspaceMutations } from "@reearth/services/api/workspace";
 import { Role, WorkspaceMember } from "@reearth/services/gql";
 import { useT } from "@reearth/services/i18n";
 import { Workspace } from "@reearth/services/state";
@@ -32,17 +32,23 @@ const UpdateRoleModal: FC<UpdateRoleModalProps> = ({
 
   const [localRole, setLocalRole] = useState(member.role);
 
-  const { useUpdateMemberOfWorkspace: updateMember } = useWorkspaceFetcher();
+  const { updateMemberOfWorkspace } = useWorkspaceMutations();
 
   const handleUpdateRole = useCallback(async () => {
     if (!workspace?.id || !member.user?.id || !localRole) return;
-    await updateMember({
+    await updateMemberOfWorkspace({
       workspaceId: workspace.id,
       userId: member.user.id,
       role: localRole
     });
     onClose();
-  }, [workspace?.id, member.user?.id, localRole, updateMember, onClose]);
+  }, [
+    workspace?.id,
+    member.user?.id,
+    localRole,
+    updateMemberOfWorkspace,
+    onClose
+  ]);
 
   return (
     <Modal visible={visible} size="small">

web/src/app/features/Dashboard/ContentsContainer/Members/index.tsx

@@ -1,5 +1,6 @@
 import { Button, TextInput, Typography } from "@reearth/app/lib/reearth-ui";
-import { useMeFetcher, useWorkspaceFetcher } from "@reearth/services/api";
+import { useMe } from "@reearth/services/api/user";
+import { useWorkspace } from "@reearth/services/api/workspace";
 import { appFeature } from "@reearth/services/config/appFeatureConfig";
 import { WorkspaceMember } from "@reearth/services/gql";
 import { useT } from "@reearth/services/i18n";
@@ -19,10 +20,8 @@ const ROLE_PRIORITY = { OWNER: 1, MAINTAINER: 2, WRITER: 3, READER: 4 };
 type Props = { currentWorkspace?: Workspace };
 
 const Members: FC<Props> = ({ currentWorkspace }) => {
-  const { workspace } = useWorkspaceFetcher().useWorkspaceQuery(
-    currentWorkspace?.id
-  );
-  const { me } = useMeFetcher().useMeQuery();
+  const { workspace } = useWorkspace(currentWorkspace?.id);
+  const { me } = useMe();
   const meId = me?.id;
   const meRole = useMemo(
     () => workspace?.members.find((m) => m.userId === meId)?.role,

web/src/app/features/Dashboard/ContentsContainer/Projects/Project/ProjectListViewItem.tsx

@@ -5,7 +5,7 @@ import {
   Typography
 } from "@reearth/app/lib/reearth-ui";
 import { formatRelativeTime } from "@reearth/app/utils/time";
-import { useMeFetcher } from "@reearth/services/api";
+import { useMe } from "@reearth/services/api/user";
 import { styled, useTheme } from "@reearth/services/theme";
 import { FC, MouseEvent, useMemo } from "react";
 
@@ -24,8 +24,7 @@ const ProjectListViewItem: FC<ProjectProps> = ({
   onProjectRemove
 }) => {
   const theme = useTheme();
-  const { useMeQuery } = useMeFetcher();
-  const { me } = useMeQuery();
+  const { me } = useMe();
 
   const createAt = useMemo(() => {
     return project.createdAt

web/src/app/features/Dashboard/ContentsContainer/Projects/Project/hooks.tsx

@@ -2,10 +2,14 @@ import useDoubleClick from "@reearth/app/hooks/useDoubleClick";
 import { PopupMenuItem } from "@reearth/app/lib/reearth-ui";
 import Tooltip from "@reearth/app/lib/reearth-ui/components/Tooltip";
 import {
-  useStorytellingFetcher,
-  useProjectFetcher
-} from "@reearth/services/api";
-import { toPublishmentStatus } from "@reearth/services/api/publishTypes";
+  useProjectImportExportMutations,
+  useProjectMutations
+} from "@reearth/services/api/project";
+import { toPublishmentStatus } from "@reearth/services/api/utils";
+import {
+  useStories,
+  useStoryMutations
+} from "@reearth/services/api/storytelling";
 import { useT } from "@reearth/services/i18n";
 import { MouseEvent, useCallback, useEffect, useMemo, useState } from "react";
 
@@ -27,9 +31,10 @@ export default ({
   onProjectRemove
 }: Props) => {
   const t = useT();
-  const { useStoriesQuery, usePublishStory } = useStorytellingFetcher();
-  const { useExportProject, usePublishProject } = useProjectFetcher();
-  const { stories } = useStoriesQuery(
+  const { publishStory } = useStoryMutations();
+  const { publishProject } = useProjectMutations();
+  const { exportProject } = useProjectImportExportMutations();
+  const { stories } = useStories(
     {
       sceneId: project?.sceneId
     },
@@ -67,8 +72,8 @@ export default ({
   const handleExportProject = useCallback(async () => {
     if (!project.id) return;
 
-    await useExportProject(project.id);
-  }, [useExportProject, project.id]);
+    await exportProject(project.id);
+  }, [exportProject, project.id]);
 
   useEffect(() => {
     setIsStarred(project.starred);
@@ -161,23 +166,17 @@ export default ({
   const handleProjectPublish = useCallback(
     async (projectId: string) => {
       if (projectPublished) {
-        await usePublishProject("unpublished", projectId);
+        await publishProject("unpublished", projectId);
       }
 
       if (storiesPublished && stories?.length) {
         const storyPromises = stories.map((story) =>
-          usePublishStory("unpublished", story.id)
+          publishStory("unpublished", story.id)
         );
         await Promise.all(storyPromises);
       }
     },
-    [
-      projectPublished,
-      stories,
-      storiesPublished,
-      usePublishProject,
-      usePublishStory
-    ]
+    [projectPublished, stories, storiesPublished, publishProject, publishStory]
   );
 
   const handleProjectRemove = useCallback(