From ac66e45ddd8f688c3f49e4e0fc3121ded838d046 Mon Sep 17 00:00:00 2001
From: caichi <54824604+caichi-t@users.noreply.github.com>
Date: Tue, 19 Mar 2024 14:48:00 +0900
Subject: [PATCH] fix(web): improve the performance related to the group
 (#1104)

* remove redundant code

* fix:  jumping to ia new model when creating it

* fix: unify model and group

* remove redundant code

* fix: getGroups and getGroup

* add test for creating group

* fix: createGroup test behavior

* fix: default value bug

* fix: remove graphql api from GroupItem
---
 web/e2e/project/item/fields/group.spec.ts     |   2 +
 web/e2e/project/schema.spec.ts                |  44 +++-
 web/e2e/project/utils/group.ts                |   1 -
 .../molecules/Common/Form/GroupItem/hooks.ts  |  20 --
 .../molecules/Common/Form/GroupItem/index.tsx |  21 +-
 .../MultiValueField/MultiValueGroup/index.tsx |  18 +-
 .../molecules/Content/Details/index.tsx       |   8 +-
 .../ComplexFieldComponents/GroupField.tsx     |   7 +-
 .../molecules/Content/Form/index.tsx          |  42 ++--
 .../molecules/Model/ModelsList/Groups.tsx     |   9 +-
 .../molecules/Model/ModelsList/GroupsList.tsx |  13 +-
 .../molecules/Model/ModelsList/Models.tsx     |   9 +-
 .../molecules/Model/ModelsList/ModelsList.tsx |  17 +-
 web/src/components/molecules/Schema/index.tsx |  98 ++++----
 .../Project/Content/ContentDetails/hooks.ts   | 112 +++++-----
 .../Project/Content/ContentDetails/index.tsx  |   5 +-
 .../Project/Content/ContentList/index.tsx     |   1 +
 .../organisms/Project/ModelsMenu/hooks.ts     |  15 +-
 .../organisms/Project/ModelsMenu/index.tsx    |  23 +-
 .../organisms/Project/Schema/hooks.ts         | 210 +++++++++++-------
 .../organisms/Project/Schema/index.tsx        |  61 ++---
 web/src/gql/graphql-client-api.tsx            |  54 +----
 web/src/gql/queries/group.ts                  |  52 -----
 23 files changed, 359 insertions(+), 483 deletions(-)
 delete mode 100644 web/src/components/molecules/Common/Form/GroupItem/hooks.ts

diff --git a/web/e2e/project/item/fields/group.spec.ts b/web/e2e/project/item/fields/group.spec.ts
index 4a0671bfbc..91d0e465ed 100644
--- a/web/e2e/project/item/fields/group.spec.ts
+++ b/web/e2e/project/item/fields/group.spec.ts
@@ -116,6 +116,7 @@ test("Group field creating and updating has succeeded", async ({ page }) => {
   await expect(page.getByRole("alert").last()).toContainText("Successfully updated field!");
   await closeNotification(page);
   await page.getByText("Content").click();
+  await page.getByText("e2e model name").click();
   await page.getByRole("link", { name: "edit", exact: true }).click();
   await expect(page.getByRole("main")).toContainText("new text1(unique)");
   await expect(page.getByRole("main")).toContainText("new text1 description");
@@ -304,6 +305,7 @@ test("Group field editing has succeeded", async ({ page }) => {
   await closeNotification(page);
 
   await page.getByText("Content").click();
+  await page.getByText("e2e model name").click();
   await page.getByRole("button", { name: "plus New Item" }).click();
   await page.getByRole("button", { name: "plus New" }).click();
   await expect(page.getByRole("textbox").nth(0)).toHaveValue("text1");
diff --git a/web/e2e/project/schema.spec.ts b/web/e2e/project/schema.spec.ts
index a8846cca7d..6f97e7e358 100644
--- a/web/e2e/project/schema.spec.ts
+++ b/web/e2e/project/schema.spec.ts
@@ -33,14 +33,46 @@ test("Group CRUD has succeeded", async ({ page }) => {
   await crudGroup(page);
 });
 
+test("Group creating from adding field has succeeded", async ({ page }) => {
+  await createModel(page);
+  await page.locator("li").filter({ hasText: "Group" }).locator("div").first().click();
+  await page.getByRole("button", { name: "Create Group" }).click();
+  await expect(page.getByLabel("New Group")).toContainText("New Group");
+  await expect(page.getByRole("button", { name: "OK" })).toBeDisabled();
+
+  await page.getByLabel("New Group").locator("#name").click();
+  await page.getByLabel("New Group").locator("#name").fill("e2e group name");
+  await page.getByLabel("New Group").locator("#key").click();
+  await page.getByLabel("New Group").locator("#key").fill("e2e-group-key");
+  await page.getByRole("button", { name: "OK" }).click();
+  await expect(page.getByRole("alert").last()).toContainText("Successfully created group!");
+  await closeNotification(page);
+  await expect(
+    page.getByRole("menuitem", { name: "e2e group name" }).locator("span"),
+  ).toBeVisible();
+  await expect(page.getByText("e2e group name#e2e-group-key")).toBeVisible();
+  await expect(page.getByText("FieldsMeta Data")).not.toBeVisible();
+  await expect(
+    page.locator("li").filter({ hasText: "Reference" }).locator("div").first(),
+  ).not.toBeVisible();
+  await expect(
+    page.locator("li").filter({ hasText: "Group" }).locator("div").first(),
+  ).not.toBeVisible();
+  await page.locator("li").filter({ hasText: "Text" }).locator("div").first().click();
+  await handleFieldForm(page, "text");
+  await expect(page.getByRole("alert").last()).toContainText("Successfully created field!");
+  await closeNotification(page);
+  await page.getByText("e2e model name").click();
+  await page.locator("li").filter({ hasText: "Group" }).locator("div").first().click();
+  await expect(page.getByRole("heading", { name: "Create Group" })).toBeVisible();
+  await page.getByLabel("Select Group").click();
+  await expect(page.getByText("e2e group name #e2e-group-key")).toBeVisible();
+  await page.getByRole("button", { name: "Cancel" }).click();
+});
+
 test("Text field CRUD has succeeded", async ({ page }) => {
   await createModel(page);
-  await page
-    .locator("li")
-    .filter({ hasText: "TextHeading and titles, one-" })
-    .locator("div")
-    .first()
-    .click();
+  await page.locator("li").filter({ hasText: "Text" }).locator("div").first().click();
   await handleFieldForm(page, "text");
   await expect(page.getByRole("alert").last()).toContainText("Successfully created field!");
   await closeNotification(page);
diff --git a/web/e2e/project/utils/group.ts b/web/e2e/project/utils/group.ts
index 5ce159cc50..ce16a258a5 100644
--- a/web/e2e/project/utils/group.ts
+++ b/web/e2e/project/utils/group.ts
@@ -13,7 +13,6 @@ export async function createGroup(page: Page) {
   await page.getByRole("button", { name: "OK" }).click();
   await expect(page.getByRole("alert").last()).toContainText("Successfully created group!");
   await closeNotification(page);
-  await page.getByText("e2e group name").click();
   await expect(page.getByTitle("e2e group name")).toBeVisible();
   await expect(page.getByText("#e2e-group-key")).toBeVisible();
 }
diff --git a/web/src/components/molecules/Common/Form/GroupItem/hooks.ts b/web/src/components/molecules/Common/Form/GroupItem/hooks.ts
deleted file mode 100644
index c0ecf3d4e5..0000000000
--- a/web/src/components/molecules/Common/Form/GroupItem/hooks.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { useMemo } from "react";
-
-import { fromGraphQLGroup } from "@reearth-cms/components/organisms/DataConverters/schema";
-import { useGetGroupQuery, Group } from "@reearth-cms/gql/graphql-client-api";
-
-export default (groupId?: string) => {
-  const { data } = useGetGroupQuery({
-    fetchPolicy: "no-cache",
-    variables: { id: groupId ?? "" },
-    skip: !groupId,
-  });
-
-  const group = useMemo(() => {
-    return fromGraphQLGroup(data?.node as Group);
-  }, [data?.node]);
-
-  return {
-    group,
-  };
-};
diff --git a/web/src/components/molecules/Common/Form/GroupItem/index.tsx b/web/src/components/molecules/Common/Form/GroupItem/index.tsx
index 7ebd6bc343..1c3ce4142a 100644
--- a/web/src/components/molecules/Common/Form/GroupItem/index.tsx
+++ b/web/src/components/molecules/Common/Form/GroupItem/index.tsx
@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { useCallback, useMemo, MouseEvent } from "react";
+import { useCallback, useMemo, MouseEvent, useState, useEffect } from "react";
 
 import Collapse from "@reearth-cms/components/atoms/Collapse";
 import Icon from "@reearth-cms/components/atoms/Icon";
@@ -13,14 +13,12 @@ import {
 import { DefaultField } from "@reearth-cms/components/molecules/Content/Form/fields/FieldComponents";
 import { FIELD_TYPE_COMPONENT_MAP } from "@reearth-cms/components/molecules/Content/Form/fields/FieldTypesMap";
 import { FormItem, ItemAsset } from "@reearth-cms/components/molecules/Content/types";
-import { Field } from "@reearth-cms/components/molecules/Schema/types";
+import { Field, Group } from "@reearth-cms/components/molecules/Schema/types";
 import {
   AssetSortType,
   SortDirection,
 } from "@reearth-cms/components/organisms/Project/Asset/AssetList/hooks";
 
-import useHooks from "./hooks";
-
 type Props = {
   value?: string;
   onChange?: (value: string) => void;
@@ -68,6 +66,7 @@ type Props = {
   disableMoveUp?: boolean;
   disableMoveDown?: boolean;
   onGetAsset: (assetId: string) => Promise<string | undefined>;
+  onGroupGet: (id: string) => Promise<Group | undefined>;
 };
 
 const GroupItem: React.FC<Props> = ({
@@ -112,11 +111,21 @@ const GroupItem: React.FC<Props> = ({
   disableMoveUp,
   disableMoveDown,
   onGetAsset,
+  onGroupGet,
 }) => {
   const { Panel } = Collapse;
-  const { group } = useHooks(parentField?.typeProperty?.groupId);
 
-  const fields = useMemo(() => group?.schema.fields, [group?.schema.fields]);
+  const [fields, setFields] = useState<Field[]>();
+
+  useEffect(() => {
+    const handleFieldsSet = async (id: string) => {
+      const group = await onGroupGet(id);
+      setFields(group?.schema.fields);
+    };
+
+    if (parentField?.typeProperty?.groupId) handleFieldsSet(parentField.typeProperty.groupId);
+  }, [onGroupGet, parentField?.typeProperty?.groupId]);
+
   const itemGroupId = useMemo(() => value ?? "", [value]);
 
   const handleMoveUp = useCallback(
diff --git a/web/src/components/molecules/Common/MultiValueField/MultiValueGroup/index.tsx b/web/src/components/molecules/Common/MultiValueField/MultiValueGroup/index.tsx
index 040c8334ca..001a131341 100644
--- a/web/src/components/molecules/Common/MultiValueField/MultiValueGroup/index.tsx
+++ b/web/src/components/molecules/Common/MultiValueField/MultiValueGroup/index.tsx
@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import moment from "moment";
-import { useCallback, useEffect, useMemo } from "react";
+import { useCallback, useEffect } from "react";
 
 import Button from "@reearth-cms/components/atoms/Button";
 import { FormInstance } from "@reearth-cms/components/atoms/Form";
@@ -26,7 +26,6 @@ type Props = {
   onChange?: (value: string[]) => void;
   parentField: Field;
   form?: FormInstance<any>;
-  groups?: Group[];
   fields?: Field[];
   linkedItemsModalList?: FormItem[];
   linkItemModalTitle: string;
@@ -65,12 +64,12 @@ type Props = {
   setFileList: (fileList: UploadFile<File>[]) => void;
   setUploadModalVisibility: (visible: boolean) => void;
   onGetAsset: (assetId: string) => Promise<string | undefined>;
+  onGroupGet: (id: string) => Promise<Group | undefined>;
 };
 
 const MultiValueGroup: React.FC<Props> = ({
   className,
   parentField,
-  groups,
   form,
   fields,
   value = [],
@@ -108,6 +107,7 @@ const MultiValueGroup: React.FC<Props> = ({
   setFileList,
   setUploadModalVisibility,
   onGetAsset,
+  onGroupGet,
 }) => {
   const t = useT();
 
@@ -126,12 +126,7 @@ const MultiValueGroup: React.FC<Props> = ({
     [onChange, value],
   );
 
-  const group = useMemo<Group | undefined>(
-    () => groups?.find(g => g.id === parentField.typeProperty?.groupId),
-    [groups, parentField.typeProperty?.groupId],
-  );
-
-  const handleAdd = useCallback(() => {
+  const handleAdd = useCallback(async () => {
     const currentValues = value || [];
     const itemGroupId = newID();
 
@@ -143,6 +138,8 @@ const MultiValueGroup: React.FC<Props> = ({
 
     // set default value
     const newValues = { ...form?.getFieldsValue() };
+    if (!parentField.typeProperty?.groupId) return;
+    const group = await onGroupGet(parentField.typeProperty.groupId);
     group?.schema.fields.forEach((field: Field) => {
       const defaultValue = field.typeProperty?.defaultValue;
       const setValue = (value: any) => {
@@ -177,7 +174,7 @@ const MultiValueGroup: React.FC<Props> = ({
           break;
       }
     });
-  }, [form, group?.schema.fields, onChange, value]);
+  }, [form, onChange, onGroupGet, parentField.typeProperty?.groupId, value]);
 
   return (
     <div className={className}>
@@ -227,6 +224,7 @@ const MultiValueGroup: React.FC<Props> = ({
                 disableMoveUp={key === 0}
                 disableMoveDown={key === value.length - 1}
                 onGetAsset={onGetAsset}
+                onGroupGet={onGroupGet}
               />
             </FieldWrapper>
           );
diff --git a/web/src/components/molecules/Content/Details/index.tsx b/web/src/components/molecules/Content/Details/index.tsx
index 4ec82c27e7..f4aab54726 100644
--- a/web/src/components/molecules/Content/Details/index.tsx
+++ b/web/src/components/molecules/Content/Details/index.tsx
@@ -16,7 +16,7 @@ import {
   SortDirection,
 } from "@reearth-cms/components/organisms/Project/Asset/AssetList/hooks";
 
-export type Props = {
+type Props = {
   linkedItemsModalList?: FormItem[];
   showPublishAction?: boolean;
   requests: Request[];
@@ -40,7 +40,6 @@ export type Props = {
   commentsPanel?: JSX.Element;
   requestModalShown: boolean;
   addItemToRequestModalShown: boolean;
-  groups?: Group[];
   workspaceUserMembers: UserMember[];
   totalCount: number;
   page: number;
@@ -102,6 +101,7 @@ export type Props = {
   onAddItemToRequestModalClose: () => void;
   onAddItemToRequestModalOpen: () => void;
   onGetAsset: (assetId: string) => Promise<string | undefined>;
+  onGroupGet: (id: string) => Promise<Group | undefined>;
 };
 
 const ContentDetailsMolecule: React.FC<Props> = ({
@@ -129,7 +129,6 @@ const ContentDetailsMolecule: React.FC<Props> = ({
   requestModalShown,
   addItemToRequestModalShown,
   workspaceUserMembers,
-  groups,
   totalCount,
   page,
   pageSize,
@@ -173,6 +172,7 @@ const ContentDetailsMolecule: React.FC<Props> = ({
   onAddItemToRequestModalOpen,
   onAssetTableChange,
   onGetAsset,
+  onGroupGet,
 }) => {
   return (
     <ComplexInnerContents
@@ -192,7 +192,6 @@ const ContentDetailsMolecule: React.FC<Props> = ({
         ) : (
           <ContentForm
             item={item}
-            groups={groups}
             linkItemModalTitle={linkItemModalTitle}
             linkItemModalTotalCount={linkItemModalTotalCount}
             linkItemModalPage={linkItemModalPage}
@@ -254,6 +253,7 @@ const ContentDetailsMolecule: React.FC<Props> = ({
             onAddItemToRequestModalClose={onAddItemToRequestModalClose}
             workspaceUserMembers={workspaceUserMembers}
             onGetAsset={onGetAsset}
+            onGroupGet={onGroupGet}
           />
         )
       }
diff --git a/web/src/components/molecules/Content/Form/fields/ComplexFieldComponents/GroupField.tsx b/web/src/components/molecules/Content/Form/fields/ComplexFieldComponents/GroupField.tsx
index b86089009f..cabd94b897 100644
--- a/web/src/components/molecules/Content/Form/fields/ComplexFieldComponents/GroupField.tsx
+++ b/web/src/components/molecules/Content/Form/fields/ComplexFieldComponents/GroupField.tsx
@@ -15,7 +15,6 @@ import {
 interface GroupFieldProps {
   field: Field;
   form?: FormInstance<any>;
-  groups?: Group[];
   linkedItemsModalList?: FormItem[];
   linkItemModalTitle: string;
   formItemsData: FormItem[];
@@ -53,12 +52,12 @@ interface GroupFieldProps {
   setFileList: (fileList: UploadFile<File>[]) => void;
   setUploadModalVisibility: (visible: boolean) => void;
   onGetAsset: (assetId: string) => Promise<string | undefined>;
+  onGroupGet: (id: string) => Promise<Group | undefined>;
 }
 
 const GroupField: React.FC<GroupFieldProps> = ({
   field,
   form,
-  groups,
   linkedItemsModalList,
   linkItemModalTitle,
   formItemsData,
@@ -92,6 +91,7 @@ const GroupField: React.FC<GroupFieldProps> = ({
   setFileList,
   setUploadModalVisibility,
   onGetAsset,
+  onGroupGet,
 }) => {
   return (
     <Form.Item
@@ -102,7 +102,6 @@ const GroupField: React.FC<GroupFieldProps> = ({
         <MultiValueGroup
           parentField={field}
           form={form}
-          groups={groups}
           linkedItemsModalList={linkedItemsModalList}
           linkItemModalTitle={linkItemModalTitle}
           onSearchTerm={onSearchTerm}
@@ -136,6 +135,7 @@ const GroupField: React.FC<GroupFieldProps> = ({
           setFileList={setFileList}
           setUploadModalVisibility={setUploadModalVisibility}
           onGetAsset={onGetAsset}
+          onGroupGet={onGroupGet}
         />
       ) : (
         <GroupItem
@@ -173,6 +173,7 @@ const GroupField: React.FC<GroupFieldProps> = ({
           setFileList={setFileList}
           setUploadModalVisibility={setUploadModalVisibility}
           onGetAsset={onGetAsset}
+          onGroupGet={onGroupGet}
         />
       )}
     </Form.Item>
diff --git a/web/src/components/molecules/Content/Form/index.tsx b/web/src/components/molecules/Content/Form/index.tsx
index a6a570cffe..4b713abcee 100644
--- a/web/src/components/molecules/Content/Form/index.tsx
+++ b/web/src/components/molecules/Content/Form/index.tsx
@@ -38,9 +38,8 @@ import { AssetField, GroupField, ReferenceField } from "./fields/ComplexFieldCom
 import { DefaultField } from "./fields/FieldComponents";
 import { FIELD_TYPE_COMPONENT_MAP } from "./fields/FieldTypesMap";
 
-export interface Props {
+interface Props {
   item?: Item;
-  groups?: Group[];
   linkedItemsModalList?: FormItem[];
   showPublishAction?: boolean;
   requests: Request[];
@@ -119,11 +118,11 @@ export interface Props {
   onAddItemToRequestModalClose: () => void;
   onAddItemToRequestModalOpen: () => void;
   onGetAsset: (assetId: string) => Promise<string | undefined>;
+  onGroupGet: (id: string) => Promise<Group | undefined>;
 }
 
 const ContentForm: React.FC<Props> = ({
   item,
-  groups,
   linkedItemsModalList,
   showPublishAction,
   requests,
@@ -185,6 +184,7 @@ const ContentForm: React.FC<Props> = ({
   onAddItemToRequestModalClose,
   onAddItemToRequestModalOpen,
   onGetAsset,
+  onGroupGet,
 }) => {
   const t = useT();
   const [form] = Form.useForm();
@@ -328,16 +328,18 @@ const ContentForm: React.FC<Props> = ({
   const handleSubmit = useCallback(async () => {
     try {
       const modelFields = new Map((model?.schema.fields || []).map(field => [field.id, field]));
-      const groupIdsInCurrentModel = new Set();
-      model?.schema.fields?.forEach(field => {
-        if (field.type === "Group") groupIdsInCurrentModel.add(field.typeProperty?.groupId);
-      });
       const groupFields = new Map<string, Field>();
-      groups
-        ?.filter(group => groupIdsInCurrentModel.has(group.id))
-        .forEach(group => {
-          group?.schema.fields?.forEach(field => groupFields.set(field.id, field));
-        });
+      if (model) {
+        await Promise.all(
+          model.schema.fields.map(async field => {
+            if (field.typeProperty?.groupId) {
+              const group = await onGroupGet(field.typeProperty.groupId);
+              group?.schema.fields?.forEach(field => groupFields.set(field.id, field));
+            }
+          }),
+        );
+      }
+
       const values = await form.validateFields();
       const fields: ItemField[] = [];
       for (const [key, value] of Object.entries(values)) {
@@ -394,19 +396,7 @@ const ContentForm: React.FC<Props> = ({
     } catch (info) {
       console.log("Validate Failed:", info);
     }
-  }, [
-    model?.schema.fields,
-    model?.schema.id,
-    model?.metadataSchema?.fields,
-    model?.metadataSchema?.id,
-    groups,
-    form,
-    metaForm,
-    itemId,
-    inputValueGet,
-    onItemUpdate,
-    onItemCreate,
-  ]);
+  }, [model, form, metaForm, itemId, onGroupGet, inputValueGet, onItemUpdate, onItemCreate]);
 
   const handleMetaUpdate = useCallback(async () => {
     if (!itemId || !item?.metadata?.id) return;
@@ -573,7 +563,6 @@ const ContentForm: React.FC<Props> = ({
                   <GroupField
                     field={field}
                     form={form}
-                    groups={groups}
                     linkedItemsModalList={linkedItemsModalList}
                     linkItemModalTitle={linkItemModalTitle}
                     formItemsData={formItemsData}
@@ -607,6 +596,7 @@ const ContentForm: React.FC<Props> = ({
                     setFileList={setFileList}
                     setUploadModalVisibility={setUploadModalVisibility}
                     onGetAsset={onGetAsset}
+                    onGroupGet={onGroupGet}
                   />
                 </StyledFormItemWrapper>
               );
diff --git a/web/src/components/molecules/Model/ModelsList/Groups.tsx b/web/src/components/molecules/Model/ModelsList/Groups.tsx
index e2303363c5..58d4911a53 100644
--- a/web/src/components/molecules/Model/ModelsList/Groups.tsx
+++ b/web/src/components/molecules/Model/ModelsList/Groups.tsx
@@ -1,15 +1,12 @@
 import GroupsList from "@reearth-cms/components/molecules/Model/ModelsList/GroupsList";
-import { SelectedSchemaType } from "@reearth-cms/components/molecules/Schema";
 import FormModal from "@reearth-cms/components/molecules/Schema/FormModal";
 import { Group } from "@reearth-cms/components/molecules/Schema/types";
 
-export type Props = {
-  className?: string;
+type Props = {
   title: string;
   collapsed?: boolean;
   selectedKey?: string;
   groups?: Group[];
-  selectedSchemaType?: SelectedSchemaType;
   open: boolean;
   onModalOpen: () => void;
   onGroupKeyCheck: (key: string, ignoredKey?: string) => Promise<boolean>;
@@ -19,11 +16,9 @@ export type Props = {
 };
 
 const Groups: React.FC<Props> = ({
-  className,
   collapsed,
   selectedKey,
   groups,
-  selectedSchemaType,
   open,
   onModalOpen,
   onGroupKeyCheck,
@@ -34,10 +29,8 @@ const Groups: React.FC<Props> = ({
   return (
     <>
       <GroupsList
-        className={className}
         selectedKey={selectedKey}
         groups={groups}
-        selectedSchemaType={selectedSchemaType}
         collapsed={collapsed}
         onGroupSelect={onGroupSelect}
         onModalOpen={onModalOpen}
diff --git a/web/src/components/molecules/Model/ModelsList/GroupsList.tsx b/web/src/components/molecules/Model/ModelsList/GroupsList.tsx
index 15417c6078..2ef4fc6009 100644
--- a/web/src/components/molecules/Model/ModelsList/GroupsList.tsx
+++ b/web/src/components/molecules/Model/ModelsList/GroupsList.tsx
@@ -4,25 +4,20 @@ import { useCallback, useMemo } from "react";
 import Button from "@reearth-cms/components/atoms/Button";
 import Icon from "@reearth-cms/components/atoms/Icon";
 import Menu, { MenuInfo } from "@reearth-cms/components/atoms/Menu";
-import { SelectedSchemaType } from "@reearth-cms/components/molecules/Schema";
 import { Group } from "@reearth-cms/components/molecules/Schema/types";
 import { useT } from "@reearth-cms/i18n";
 
-export type Props = {
-  className?: string;
+type Props = {
   selectedKey?: string;
   groups?: Group[];
-  selectedSchemaType?: SelectedSchemaType;
   collapsed?: boolean;
   onModalOpen: () => void;
   onGroupSelect?: (groupId: string) => void;
 };
 
 const GroupsList: React.FC<Props> = ({
-  className,
   selectedKey,
   groups,
-  selectedSchemaType,
   collapsed,
   onModalOpen,
   onGroupSelect,
@@ -30,8 +25,8 @@ const GroupsList: React.FC<Props> = ({
   const t = useT();
 
   const selectedKeys = useMemo(() => {
-    return selectedSchemaType && selectedSchemaType === "group" && selectedKey ? [selectedKey] : [];
-  }, [selectedKey, selectedSchemaType]);
+    return selectedKey ? [selectedKey] : [];
+  }, [selectedKey]);
 
   const handleClick = useCallback(
     (e: MenuInfo) => {
@@ -41,7 +36,7 @@ const GroupsList: React.FC<Props> = ({
   );
 
   return (
-    <SchemaStyledMenu className={className}>
+    <SchemaStyledMenu>
       {collapsed ? (
         <StyledIcon icon="caretRight" />
       ) : (
diff --git a/web/src/components/molecules/Model/ModelsList/Models.tsx b/web/src/components/molecules/Model/ModelsList/Models.tsx
index dc9b68c59b..4172ef4994 100644
--- a/web/src/components/molecules/Model/ModelsList/Models.tsx
+++ b/web/src/components/molecules/Model/ModelsList/Models.tsx
@@ -1,16 +1,13 @@
 import ModelsList from "@reearth-cms/components/molecules/Model/ModelsList/ModelsList";
 import { Model } from "@reearth-cms/components/molecules/Model/types";
-import { SelectedSchemaType } from "@reearth-cms/components/molecules/Schema";
 import FormModal from "@reearth-cms/components/molecules/Schema/FormModal";
 import { ModelFormValues } from "@reearth-cms/components/molecules/Schema/types";
 
-export interface Props {
-  className?: string;
+interface Props {
   title: string;
   collapsed?: boolean;
   selectedKey?: string;
   models?: Model[];
-  selectedSchemaType?: SelectedSchemaType;
   open?: boolean;
   onModalOpen: () => void;
   onModelKeyCheck: (key: string, ignoredKey?: string | undefined) => Promise<boolean>;
@@ -21,11 +18,9 @@ export interface Props {
 }
 
 const Models: React.FC<Props> = ({
-  className,
   collapsed,
   selectedKey,
   models,
-  selectedSchemaType,
   open,
   onModalOpen,
   onModelKeyCheck,
@@ -37,10 +32,8 @@ const Models: React.FC<Props> = ({
   return (
     <>
       <ModelsList
-        className={className}
         selectedKey={selectedKey}
         models={models}
-        selectedSchemaType={selectedSchemaType}
         collapsed={collapsed}
         onModelSelect={onModelSelect}
         onModalOpen={onModalOpen}
diff --git a/web/src/components/molecules/Model/ModelsList/ModelsList.tsx b/web/src/components/molecules/Model/ModelsList/ModelsList.tsx
index 5c1e5c9c52..83944f4026 100644
--- a/web/src/components/molecules/Model/ModelsList/ModelsList.tsx
+++ b/web/src/components/molecules/Model/ModelsList/ModelsList.tsx
@@ -6,14 +6,11 @@ import Button from "@reearth-cms/components/atoms/Button";
 import Icon from "@reearth-cms/components/atoms/Icon";
 import Menu, { MenuInfo } from "@reearth-cms/components/atoms/Menu";
 import { Model } from "@reearth-cms/components/molecules/Model/types";
-import { SelectedSchemaType } from "@reearth-cms/components/molecules/Schema";
 import { useT } from "@reearth-cms/i18n";
 
-export type Props = {
-  className?: string;
+type Props = {
   selectedKey?: string;
   models?: Model[];
-  selectedSchemaType?: SelectedSchemaType;
   collapsed?: boolean;
   onModalOpen: () => void;
   onModelSelect: (modelId: string) => void;
@@ -21,10 +18,8 @@ export type Props = {
 };
 
 const ModelsList: React.FC<Props> = ({
-  className,
   selectedKey,
   models,
-  selectedSchemaType,
   collapsed,
   onModalOpen,
   onModelSelect,
@@ -51,12 +46,8 @@ const ModelsList: React.FC<Props> = ({
   );
 
   const selectedKeys = useMemo(() => {
-    return !selectedSchemaType
-      ? [selectedKey ?? ""]
-      : selectedSchemaType === "model" && selectedKey
-        ? [selectedKey]
-        : [];
-  }, [selectedKey, selectedSchemaType]);
+    return selectedKey ? [selectedKey] : [];
+  }, [selectedKey]);
 
   const items = useMemo(() => {
     return models
@@ -73,7 +64,7 @@ const ModelsList: React.FC<Props> = ({
   }, [collapsed, models]);
 
   return (
-    <SchemaStyledMenu className={className}>
+    <SchemaStyledMenu>
       {collapsed ? (
         <StyledIcon icon="caretRight" />
       ) : (
diff --git a/web/src/components/molecules/Schema/index.tsx b/web/src/components/molecules/Schema/index.tsx
index 84df1ff680..2fcf6de0f3 100644
--- a/web/src/components/molecules/Schema/index.tsx
+++ b/web/src/components/molecules/Schema/index.tsx
@@ -14,16 +14,13 @@ import ModelFieldList from "@reearth-cms/components/molecules/Schema/ModelFieldL
 import { Field, FieldType, Group } from "@reearth-cms/components/molecules/Schema/types";
 import { useT } from "@reearth-cms/i18n";
 
-export type Props = {
+type Props = {
+  data?: Model | Group;
   collapsed?: boolean;
-  model?: Model;
-  group?: Group;
-  onModelModalOpen: () => void;
-  onModelDeletionModalOpen: () => void;
-  onGroupModalOpen: () => void;
-  onGroupDeletionModalOpen: () => void;
+  onModalOpen: () => void;
+  onDeletionModalOpen: () => void;
   modelsMenu?: JSX.Element;
-  selectedSchemaType?: SelectedSchemaType;
+  selectedSchemaType: SelectedSchemaType;
   setIsMeta?: (isMeta: boolean) => void;
   onCollapse?: (collapse: boolean) => void;
   onFieldReorder: (data: Field[]) => Promise<void> | void;
@@ -36,13 +33,10 @@ export type Tab = "fields" | "meta-data";
 export type SelectedSchemaType = "model" | "group";
 
 const Schema: React.FC<Props> = ({
+  data,
   collapsed,
-  model,
-  group,
-  onModelModalOpen,
-  onModelDeletionModalOpen,
-  onGroupModalOpen,
-  onGroupDeletionModalOpen,
+  onModalOpen,
+  onDeletionModalOpen,
   modelsMenu,
   selectedSchemaType,
   setIsMeta,
@@ -55,41 +49,32 @@ const Schema: React.FC<Props> = ({
   const t = useT();
   const [tab, setTab] = useState<Tab>("fields");
 
-  const handleEdit = useCallback(() => {
-    selectedSchemaType === "model" ? onModelModalOpen() : onGroupModalOpen();
-  }, [onModelModalOpen, onGroupModalOpen, selectedSchemaType]);
-
-  const handleDelete = useCallback(() => {
-    selectedSchemaType === "model" ? onModelDeletionModalOpen() : onGroupDeletionModalOpen();
-  }, [onGroupDeletionModalOpen, onModelDeletionModalOpen, selectedSchemaType]);
-
   const dropdownItems = useMemo(
     () => [
       {
         key: "edit",
         label: t("Edit"),
         icon: <StyledIcon icon="edit" />,
-        onClick: handleEdit,
+        onClick: onModalOpen,
       },
       {
         key: "delete",
         label: t("Delete"),
         icon: <StyledIcon icon="delete" />,
-        onClick: handleDelete,
+        onClick: onDeletionModalOpen,
         danger: true,
       },
     ],
-    [handleDelete, handleEdit, t],
+    [onDeletionModalOpen, onModalOpen, t],
   );
 
   const DropdownMenu = useCallback(
-    () =>
-      model || group ? (
-        <Dropdown key="more" menu={{ items: dropdownItems }} placement="bottomRight">
-          <Button type="text" icon={<Icon icon="more" size={20} />} />
-        </Dropdown>
-      ) : null,
-    [dropdownItems, group, model],
+    () => (
+      <Dropdown key="more" menu={{ items: dropdownItems }} placement="bottomRight">
+        <Button type="text" icon={<Icon icon="more" size={20} />} />
+      </Dropdown>
+    ),
+    [dropdownItems],
   );
 
   const items: TabsProps["items"] = [
@@ -99,7 +84,7 @@ const Schema: React.FC<Props> = ({
       children: (
         <div>
           <ModelFieldList
-            fields={model?.schema.fields}
+            fields={data?.schema.fields}
             handleFieldUpdateModalOpen={onFieldUpdateModalOpen}
             onFieldReorder={onFieldReorder}
             onFieldDelete={onFieldDelete}
@@ -114,7 +99,7 @@ const Schema: React.FC<Props> = ({
         <div>
           <ModelFieldList
             isMeta={true}
-            fields={model?.metadataSchema?.fields}
+            fields={data && "metadataSchema" in data ? data?.metadataSchema?.fields : undefined}
             handleFieldUpdateModalOpen={onFieldUpdateModalOpen}
             onFieldReorder={onFieldReorder}
             onFieldDelete={onFieldDelete}
@@ -132,19 +117,6 @@ const Schema: React.FC<Props> = ({
     [selectedSchemaType, setIsMeta],
   );
 
-  const title = useMemo(
-    () => (selectedSchemaType === "model" ? model?.name : group?.name),
-    [group?.name, model?.name, selectedSchemaType],
-  );
-
-  const subTitle = useMemo(() => {
-    if (selectedSchemaType === "model") {
-      return model?.key ? `#${model.key}` : null;
-    } else {
-      return group?.key ? `#${group.key}` : null;
-    }
-  }, [group?.key, model?.key, selectedSchemaType]);
-
   return (
     <ComplexInnerContents
       left={
@@ -159,19 +131,27 @@ const Schema: React.FC<Props> = ({
       }
       center={
         <Content>
-          <PageHeader title={title} subTitle={subTitle} extra={[<DropdownMenu key="more" />]} />
-          {selectedSchemaType === "model" && (
-            <StyledTabs activeKey={tab} items={items} onChange={handleTabChange} />
-          )}
-          {selectedSchemaType === "group" && (
-            <GroupFieldsWrapper>
-              <ModelFieldList
-                fields={group?.schema?.fields}
-                handleFieldUpdateModalOpen={onFieldUpdateModalOpen}
-                onFieldReorder={onFieldReorder}
-                onFieldDelete={onFieldDelete}
+          {data && (
+            <>
+              <PageHeader
+                title={data.name}
+                subTitle={`#${data.key}`}
+                extra={[<DropdownMenu key="more" />]}
               />
-            </GroupFieldsWrapper>
+              {selectedSchemaType === "model" && (
+                <StyledTabs activeKey={tab} items={items} onChange={handleTabChange} />
+              )}
+              {selectedSchemaType === "group" && (
+                <GroupFieldsWrapper>
+                  <ModelFieldList
+                    fields={data?.schema?.fields}
+                    handleFieldUpdateModalOpen={onFieldUpdateModalOpen}
+                    onFieldReorder={onFieldReorder}
+                    onFieldDelete={onFieldDelete}
+                  />
+                </GroupFieldsWrapper>
+              )}
+            </>
           )}
         </Content>
       }
diff --git a/web/src/components/organisms/Project/Content/ContentDetails/hooks.ts b/web/src/components/organisms/Project/Content/ContentDetails/hooks.ts
index dd72a4fe6d..5bd35a9a8e 100644
--- a/web/src/components/organisms/Project/Content/ContentDetails/hooks.ts
+++ b/web/src/components/organisms/Project/Content/ContentDetails/hooks.ts
@@ -1,5 +1,5 @@
 import moment from "moment";
-import { useCallback, useMemo, useState, useRef } from "react";
+import { useCallback, useMemo, useState, useRef, useEffect } from "react";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
 
 import Notification from "@reearth-cms/components/atoms/Notification";
@@ -34,7 +34,7 @@ import {
   useUpdateItemMutation,
   useUpdateRequestMutation,
   useSearchItemLazyQuery,
-  useGetGroupsQuery,
+  useGetGroupLazyQuery,
   FieldType as GQLFieldType,
   StringOperator,
   ItemFieldInput,
@@ -75,7 +75,6 @@ export default () => {
   const [linkItemModalPageSize, setLinkItemModalPageSize] = useState<number>(10);
   const [referenceModelId, setReferenceModelId] = useState<string | undefined>(modelId);
 
-  const projectId = useMemo(() => currentProject?.id, [currentProject]);
   const titleId = useRef("");
   const t = useT();
 
@@ -181,16 +180,21 @@ export default () => {
     [data?.node],
   );
 
-  const { data: groupData } = useGetGroupsQuery({
-    variables: { projectId: projectId ?? "" },
-    skip: !projectId,
+  const [getGroup] = useGetGroupLazyQuery({
+    fetchPolicy: "cache-and-network",
   });
 
-  const groups = useMemo(() => {
-    return groupData?.groups
-      ?.map<Group | undefined>(group => (group ? fromGraphQLGroup(group as GQLGroup) : undefined))
-      .filter((group): group is Group => !!group);
-  }, [groupData?.groups]);
+  const handleGroupGet = useCallback(
+    async (id: string) => {
+      const res = await getGroup({
+        variables: {
+          id,
+        },
+      });
+      return fromGraphQLGroup(res.data?.node as GQLGroup);
+    },
+    [getGroup],
+  );
 
   const handleNavigateToModel = useCallback(
     (modelId?: string) => {
@@ -337,52 +341,56 @@ export default () => {
     [dateConvert],
   );
 
-  const initialFormValues: { [key: string]: any } = useMemo(() => {
-    const initialValues: { [key: string]: any } = {};
+  const [initialFormValues, setInitialFormValues] = useState<{ [key: string]: any }>({});
 
-    const updateInitialValues = (value: any, id: string, itemGroupId: string) => {
-      initialValues[id] = {
-        ...initialValues[id],
-        ...{ [itemGroupId]: value },
+  useEffect(() => {
+    const handleInitialValuesSet = async () => {
+      const initialValues: { [key: string]: any } = {};
+      const groupInitialValuesUpdate = (group: Group, itemGroupId: string) => {
+        group?.schema?.fields?.forEach(field => {
+          initialValues[field.id] = {
+            ...initialValues[field.id],
+            ...{ [itemGroupId]: valueGet(field) },
+          };
+        });
       };
-    };
 
-    const groupInitialValuesUpdate = (group: Group, itemGroupId: string) => {
-      group?.schema?.fields?.forEach(field => {
-        updateInitialValues(valueGet(field), field.id, itemGroupId);
-      });
-    };
-
-    if (currentItem) {
-      currentItem?.fields?.forEach(field => {
-        if (field.itemGroupId) {
-          initialValues[field.schemaFieldId] = {
-            ...initialValues[field.schemaFieldId],
-            ...{ [field.itemGroupId]: updateValueConvert(field) },
-          };
-        } else {
-          initialValues[field.schemaFieldId] = updateValueConvert(field);
-        }
-      });
-    } else {
-      currentModel?.schema.fields.forEach(field => {
-        if (field.type === "Group") {
-          if (field.multiple) {
-            initialValues[field.id] = [];
+      if (currentItem) {
+        currentItem?.fields?.forEach(field => {
+          if (field.itemGroupId) {
+            initialValues[field.schemaFieldId] = {
+              ...initialValues[field.schemaFieldId],
+              ...{ [field.itemGroupId]: updateValueConvert(field) },
+            };
           } else {
-            const id = newID();
-            initialValues[field.id] = id;
-            const group = groups?.find(group => group.id === field.typeProperty?.groupId);
-            if (group) groupInitialValuesUpdate(group, id);
+            initialValues[field.schemaFieldId] = updateValueConvert(field);
           }
-        } else {
-          initialValues[field.id] = valueGet(field);
-        }
-      });
-    }
+        });
+      } else if (currentModel) {
+        await Promise.all(
+          currentModel.schema.fields.map(async field => {
+            if (field.type === "Group") {
+              if (field.multiple) {
+                initialValues[field.id] = [];
+              } else {
+                const id = newID();
+                initialValues[field.id] = id;
+                if (field.typeProperty?.groupId) {
+                  const group = await handleGroupGet(field.typeProperty.groupId);
+                  if (group) groupInitialValuesUpdate(group, id);
+                }
+              }
+            } else {
+              initialValues[field.id] = valueGet(field);
+            }
+          }),
+        );
+      }
 
-    return initialValues;
-  }, [currentItem, currentModel?.schema.fields, groups, updateValueConvert, valueGet]);
+      setInitialFormValues(initialValues);
+    };
+    handleInitialValuesSet();
+  }, [currentItem, currentModel, handleGroupGet, updateValueConvert, valueGet]);
 
   const initialMetaFormValues: { [key: string]: any } = useMemo(() => {
     const initialValues: { [key: string]: any } = {};
@@ -519,7 +527,6 @@ export default () => {
     collapsedModelMenu,
     collapsedCommentsPanel,
     requestModalShown,
-    groups,
     addItemToRequestModalShown,
     workspaceUserMembers,
     linkItemModalTitle: model?.name ?? "",
@@ -552,5 +559,6 @@ export default () => {
     handleModalOpen,
     handleAddItemToRequestModalClose,
     handleAddItemToRequestModalOpen,
+    handleGroupGet,
   };
 };
diff --git a/web/src/components/organisms/Project/Content/ContentDetails/index.tsx b/web/src/components/organisms/Project/Content/ContentDetails/index.tsx
index 2bb075f2b9..d5101b638c 100644
--- a/web/src/components/organisms/Project/Content/ContentDetails/index.tsx
+++ b/web/src/components/organisms/Project/Content/ContentDetails/index.tsx
@@ -25,7 +25,6 @@ const ContentDetails: React.FC = () => {
     collapsedModelMenu,
     collapsedCommentsPanel,
     requestModalShown,
-    groups,
     addItemToRequestModalShown,
     workspaceUserMembers,
     linkItemModalTitle,
@@ -57,6 +56,7 @@ const ContentDetails: React.FC = () => {
     handleModalOpen,
     handleAddItemToRequestModalClose,
     handleAddItemToRequestModalOpen,
+    handleGroupGet,
   } = useHooks();
 
   const {
@@ -122,7 +122,6 @@ const ContentDetails: React.FC = () => {
       itemId={itemId}
       itemLoading={itemLoading}
       model={currentModel}
-      groups={groups}
       initialFormValues={initialFormValues}
       initialMetaFormValues={initialMetaFormValues}
       loading={itemCreationLoading || itemUpdatingLoading}
@@ -136,6 +135,7 @@ const ContentDetails: React.FC = () => {
           title={t("Content")}
           onModelSelect={handleNavigateToModel}
           displayGroups={false}
+          selectedSchemaType="model"
         />
       }
       onChange={handleAddItemToRequest}
@@ -171,6 +171,7 @@ const ContentDetails: React.FC = () => {
       onAddItemToRequestModalOpen={handleAddItemToRequestModalOpen}
       workspaceUserMembers={workspaceUserMembers}
       onGetAsset={handleGetAsset}
+      onGroupGet={handleGroupGet}
     />
   );
 };
diff --git a/web/src/components/organisms/Project/Content/ContentList/index.tsx b/web/src/components/organisms/Project/Content/ContentList/index.tsx
index d2f32b4a3a..0a65476a9e 100644
--- a/web/src/components/organisms/Project/Content/ContentList/index.tsx
+++ b/web/src/components/organisms/Project/Content/ContentList/index.tsx
@@ -73,6 +73,7 @@ const ContentList: React.FC = () => {
           title={t("Content")}
           collapsed={collapsedModelMenu}
           onModelSelect={handleModelSelect}
+          selectedSchemaType="model"
         />
       }
       viewsMenu={
diff --git a/web/src/components/organisms/Project/ModelsMenu/hooks.ts b/web/src/components/organisms/Project/ModelsMenu/hooks.ts
index 88e42d9e1b..4389a9ee13 100644
--- a/web/src/components/organisms/Project/ModelsMenu/hooks.ts
+++ b/web/src/components/organisms/Project/ModelsMenu/hooks.ts
@@ -23,10 +23,9 @@ import { useModel, useWorkspace, useProject } from "@reearth-cms/state";
 
 type Params = {
   modelId?: string;
-  groupId?: string;
 };
 
-export default ({ modelId, groupId }: Params) => {
+export default ({ modelId }: Params) => {
   const t = useT();
   const [, setCurrentModel] = useModel();
   const [currentWorkspace] = useWorkspace();
@@ -142,16 +141,6 @@ export default ({ modelId, groupId }: Params) => {
       .filter((group): group is Group => !!group);
   }, [groupData?.groups]);
 
-  const rawGroup = useMemo(
-    () => groupData?.groups?.find(node => node?.id === groupId),
-    [groupData?.groups, groupId],
-  );
-
-  const group = useMemo<Group | undefined>(
-    () => (rawGroup?.id ? fromGraphQLGroup(rawGroup as GQLGroup) : undefined),
-    [rawGroup],
-  );
-
   const handleGroupModalClose = useCallback(() => setGroupModalShown(false), []);
   const handleGroupModalOpen = useCallback(() => setGroupModalShown(true), []);
 
@@ -198,9 +187,7 @@ export default ({ modelId, groupId }: Params) => {
   );
 
   return {
-    model,
     models,
-    group,
     groups,
     modelModalShown,
     groupModalShown,
diff --git a/web/src/components/organisms/Project/ModelsMenu/index.tsx b/web/src/components/organisms/Project/ModelsMenu/index.tsx
index b3dccd7705..4beac08d1e 100644
--- a/web/src/components/organisms/Project/ModelsMenu/index.tsx
+++ b/web/src/components/organisms/Project/ModelsMenu/index.tsx
@@ -8,33 +8,27 @@ import { SelectedSchemaType } from "@reearth-cms/components/molecules/Schema";
 
 import useHooks from "./hooks";
 
-export interface Props {
-  className?: string;
+interface Props {
   title: string;
   collapsed?: boolean;
-  groupId?: string;
-  selectedSchemaType?: SelectedSchemaType;
+  selectedSchemaType: SelectedSchemaType;
   displayGroups?: boolean;
   onModelSelect: (modelId: string) => void;
   onGroupSelect?: (groupId: string) => void;
 }
 
 const ModelsMenu: React.FC<Props> = ({
-  className,
   title,
   collapsed,
-  groupId,
   selectedSchemaType,
   displayGroups,
   onModelSelect,
   onGroupSelect,
 }) => {
-  const { modelId } = useParams();
+  const { modelId: schemaId } = useParams();
 
   const {
-    model,
     models,
-    group,
     groups,
     modelModalShown,
     groupModalShown,
@@ -48,8 +42,7 @@ const ModelsMenu: React.FC<Props> = ({
     handleGroupKeyCheck,
     handleUpdateModelsOrder,
   } = useHooks({
-    modelId,
-    groupId,
+    modelId: selectedSchemaType === "model" ? schemaId : undefined,
   });
 
   return (
@@ -57,12 +50,10 @@ const ModelsMenu: React.FC<Props> = ({
       <ModelListHeader title={title} collapsed={collapsed} />
       <ModelListBody>
         <Models
-          className={className}
           title={title}
           collapsed={collapsed}
-          selectedKey={model?.id}
+          selectedKey={schemaId}
           models={models}
-          selectedSchemaType={selectedSchemaType}
           onModelSelect={onModelSelect}
           onModalOpen={handleModelModalOpen}
           open={modelModalShown}
@@ -73,12 +64,10 @@ const ModelsMenu: React.FC<Props> = ({
         />
         {displayGroups && (
           <Groups
-            className={className}
             title={title}
             collapsed={collapsed}
-            selectedKey={group?.id}
+            selectedKey={schemaId}
             groups={groups}
-            selectedSchemaType={selectedSchemaType}
             onGroupSelect={onGroupSelect}
             onModalOpen={handleGroupModalOpen}
             open={groupModalShown}
diff --git a/web/src/components/organisms/Project/Schema/hooks.ts b/web/src/components/organisms/Project/Schema/hooks.ts
index e63ace3500..a117339c00 100644
--- a/web/src/components/organisms/Project/Schema/hooks.ts
+++ b/web/src/components/organisms/Project/Schema/hooks.ts
@@ -18,6 +18,7 @@ import {
   useUpdateFieldsMutation,
   useGetModelsQuery,
   useGetGroupsQuery,
+  useGetGroupQuery,
   Model as GQLModel,
   Group as GQLGroup,
   useCheckGroupKeyAvailabilityLazyQuery,
@@ -36,16 +37,14 @@ export default () => {
   const t = useT();
   const { confirm } = Modal;
   const navigate = useNavigate();
-  const { projectId, workspaceId, modelId } = useParams();
+  const { projectId, workspaceId, modelId: schemaId } = useParams();
   const [currentModel, setCurrentModel] = useModel();
 
   const [fieldModalShown, setFieldModalShown] = useState(false);
-  const [groupId, setGroupId] = useState<string | undefined>(undefined);
   const [isMeta, setIsMeta] = useState(false);
   const [selectedField, setSelectedField] = useState<Field | null>(null);
   const [selectedType, setSelectedType] = useState<FieldType | null>(null);
   const [collapsed, setCollapsed] = useState(false);
-  const [selectedSchemaType, setSelectedSchemaType] = useState<SelectedSchemaType>("model");
   const { data: modelsData } = useGetModelsQuery({
     variables: {
       projectId: projectId ?? "",
@@ -73,34 +72,40 @@ export default () => {
       .filter((group): group is Group => !!group);
   }, [groupsData?.groups]);
 
-  const rawGroup = useMemo(
-    () => groupsData?.groups?.find(node => node?.id === groupId),
-    [groupsData?.groups, groupId],
-  );
+  const { data: groupData } = useGetGroupQuery({
+    fetchPolicy: "cache-and-network",
+    variables: {
+      id: schemaId ?? "",
+    },
+    skip: !schemaId,
+  });
 
-  const group = useMemo<Group | undefined>(
-    () => (rawGroup?.id ? fromGraphQLGroup(rawGroup as GQLGroup) : undefined),
-    [rawGroup],
+  const group = useMemo(() => fromGraphQLGroup(groupData?.node as GQLGroup), [groupData?.node]);
+
+  const selectedSchemaType: SelectedSchemaType = useMemo(
+    () => (group ? "group" : "model"),
+    [group],
   );
 
   useEffect(() => {
-    if (!modelId && currentModel) {
+    if (!schemaId && currentModel) {
       navigate(`/workspace/${workspaceId}/project/${projectId}/schema/${currentModel.id}`);
     }
-  }, [modelId, currentModel, navigate, workspaceId, projectId]);
+  }, [schemaId, currentModel, navigate, workspaceId, projectId]);
 
   const handleModelSelect = useCallback(
     (modelId: string) => {
-      setSelectedSchemaType("model");
       navigate(`/workspace/${workspaceId}/project/${projectId}/schema/${modelId}`);
     },
     [navigate, workspaceId, projectId],
   );
 
-  const handleGroupSelect = useCallback((groupId: string) => {
-    setSelectedSchemaType("group");
-    setGroupId(groupId);
-  }, []);
+  const handleGroupSelect = useCallback(
+    (groupId: string) => {
+      navigate(`/workspace/${workspaceId}/project/${projectId}/schema/${groupId}`);
+    },
+    [navigate, projectId, workspaceId],
+  );
 
   const handleFieldKeyUnique = useCallback(
     (key: string, fieldId?: string): boolean => {
@@ -112,26 +117,26 @@ export default () => {
   );
 
   const [createNewField, { loading: fieldCreationLoading }] = useCreateFieldMutation({
-    refetchQueries: ["GetModel", "GetGroups"],
+    refetchQueries: ["GetModel", "GetGroup"],
   });
 
   const [updateField, { loading: fieldUpdateLoading }] = useUpdateFieldMutation({
-    refetchQueries: ["GetModel", "GetGroups"],
+    refetchQueries: ["GetModel", "GetGroup"],
   });
 
   const [deleteFieldMutation] = useDeleteFieldMutation({
-    refetchQueries: ["GetModel", "GetGroups"],
+    refetchQueries: ["GetModel", "GetGroup"],
   });
 
   const handleFieldDelete = useCallback(
     async (fieldId: string) => {
-      if (!modelId && !groupId) return;
+      if (!schemaId) return;
       const options = {
         variables: {
           fieldId,
           metadata: isMeta,
-          modelId: selectedSchemaType === "model" ? modelId : undefined,
-          groupId: selectedSchemaType !== "model" ? groupId : undefined,
+          modelId: selectedSchemaType === "model" ? schemaId : undefined,
+          groupId: selectedSchemaType === "group" ? schemaId : undefined,
         },
       };
       const results = await deleteFieldMutation(options);
@@ -141,12 +146,12 @@ export default () => {
       }
       Notification.success({ message: t("Successfully deleted field!") });
     },
-    [modelId, groupId, isMeta, selectedSchemaType, deleteFieldMutation, t],
+    [schemaId, isMeta, selectedSchemaType, deleteFieldMutation, t],
   );
 
   const handleFieldUpdate = useCallback(
     async (data: FormValues) => {
-      if ((!modelId && !groupId) || !data.fieldId) return;
+      if (!schemaId || !data.fieldId) return;
       const options = {
         variables: {
           fieldId: data.fieldId,
@@ -159,8 +164,8 @@ export default () => {
           isTitle: data.isTitle,
           required: data.required,
           typeProperty: data.typeProperty as SchemaFieldTypePropertyInput,
-          modelId: selectedSchemaType === "model" ? modelId : undefined,
-          groupId: selectedSchemaType !== "model" ? groupId : undefined,
+          modelId: selectedSchemaType === "model" ? schemaId : undefined,
+          groupId: selectedSchemaType === "group" ? schemaId : undefined,
         },
       };
       const field = await updateField(options);
@@ -171,7 +176,7 @@ export default () => {
       Notification.success({ message: t("Successfully updated field!") });
       setFieldModalShown(false);
     },
-    [modelId, groupId, selectedSchemaType, updateField, t],
+    [schemaId, selectedSchemaType, updateField, t],
   );
 
   const [updateFieldsOrder] = useUpdateFieldsMutation({
@@ -180,15 +185,15 @@ export default () => {
 
   const handleFieldOrder = useCallback(
     async (fields: Field[]) => {
-      if (!modelId && !groupId) return;
+      if (!schemaId) return;
       const response = await updateFieldsOrder({
         variables: {
           updateFieldInput: fields.map((field, index) => ({
             fieldId: field.id,
             metadata: field.metadata,
             order: index,
-            modelId: selectedSchemaType === "model" ? modelId : undefined,
-            groupId: selectedSchemaType !== "model" ? groupId : undefined,
+            modelId: selectedSchemaType === "model" ? schemaId : undefined,
+            groupId: selectedSchemaType === "group" ? schemaId : undefined,
           })),
         },
       });
@@ -199,12 +204,12 @@ export default () => {
       Notification.success({ message: t("Successfully updated field!") });
       setFieldModalShown(false);
     },
-    [modelId, groupId, updateFieldsOrder, t, selectedSchemaType],
+    [schemaId, updateFieldsOrder, t, selectedSchemaType],
   );
 
   const handleFieldCreate = useCallback(
     async (data: FormValues) => {
-      if (!modelId && !groupId) return;
+      if (!schemaId) return;
       const options = {
         variables: {
           title: data.title,
@@ -217,8 +222,8 @@ export default () => {
           required: data.required,
           type: data.type as SchemaFieldType,
           typeProperty: data.typeProperty as SchemaFieldTypePropertyInput,
-          modelId: selectedSchemaType === "model" ? modelId : undefined,
-          groupId: selectedSchemaType !== "model" ? groupId : undefined,
+          modelId: selectedSchemaType === "model" ? schemaId : undefined,
+          groupId: selectedSchemaType === "group" ? schemaId : undefined,
         },
       };
       const field = await createNewField(options);
@@ -230,7 +235,7 @@ export default () => {
       Notification.success({ message: t("Successfully created field!") });
       setFieldModalShown(false);
     },
-    [modelId, groupId, selectedSchemaType, createNewField, t],
+    [schemaId, selectedSchemaType, createNewField, t],
   );
 
   const handleFieldModalClose = useCallback(() => {
@@ -265,21 +270,12 @@ export default () => {
     fetchPolicy: "no-cache",
   });
 
-  const handleGroupKeyCheck = useCallback(
-    async (key: string, ignoredKey?: string) => {
-      if (!projectId || !key) return false;
-      if (ignoredKey && key === ignoredKey) return true;
-      const response = await CheckGroupKeyAvailability({ variables: { projectId, key } });
-      return response.data ? response.data.checkGroupKeyAvailability.available : false;
-    },
-    [projectId, CheckGroupKeyAvailability],
-  );
-
   const { data: modelsByGroupData } = useModelsByGroupQuery({
+    fetchPolicy: "cache-and-network",
     variables: {
-      groupId: groupId ?? "",
+      groupId: schemaId ?? "",
     },
-    skip: !groupId,
+    skip: !schemaId || selectedSchemaType !== "group",
   });
 
   const [deleteGroup] = useDeleteGroupMutation({
@@ -310,9 +306,19 @@ export default () => {
       } else {
         Notification.success({ message: t("Successfully deleted group!") });
         handleGroupDeletionModalClose();
+        navigate(`/workspace/${workspaceId}/project/${projectId}/schema`);
       }
     },
-    [deleteGroup, group?.name, handleGroupDeletionModalClose, modelsByGroupData?.modelsByGroup, t],
+    [
+      deleteGroup,
+      group?.name,
+      handleGroupDeletionModalClose,
+      modelsByGroupData?.modelsByGroup,
+      navigate,
+      projectId,
+      t,
+      workspaceId,
+    ],
   );
 
   const [createNewGroup] = useCreateGroupMutation({
@@ -336,8 +342,11 @@ export default () => {
       }
       Notification.success({ message: t("Successfully created group!") });
       handleGroupModalClose();
+      navigate(
+        `/workspace/${workspaceId}/project/${projectId}/schema/${group.data?.createGroup.group.id}`,
+      );
     },
-    [projectId, createNewGroup, t, handleGroupModalClose],
+    [projectId, createNewGroup, t, handleGroupModalClose, navigate, workspaceId],
   );
 
   const [updateNewGroup] = useUpdateGroupMutation({
@@ -383,10 +392,10 @@ export default () => {
         });
       } else {
         setSelectedType(fieldType);
-        if (modelId) setFieldModalShown(true);
+        if (schemaId) setFieldModalShown(true);
       }
     },
-    [confirm, groups?.length, handleGroupModalClose, handleGroupModalOpen, modelId, t],
+    [confirm, groups?.length, handleGroupModalClose, handleGroupModalOpen, schemaId, t],
   );
 
   // model hooks
@@ -397,16 +406,6 @@ export default () => {
     fetchPolicy: "no-cache",
   });
 
-  const handleModelKeyCheck = useCallback(
-    async (key: string, ignoredKey?: string) => {
-      if (!projectId || !key) return false;
-      if (ignoredKey && key === ignoredKey) return true;
-      const response = await CheckModelKeyAvailability({ variables: { projectId, key } });
-      return response.data ? response.data.checkModelKeyAvailability.available : false;
-    },
-    [projectId, CheckModelKeyAvailability],
-  );
-
   const handleModelDeletionModalOpen = useCallback(
     () => setModelDeletionModalShown(true),
     [setModelDeletionModalShown],
@@ -474,18 +473,72 @@ export default () => {
     [updateNewModel, handleModelModalClose, t],
   );
 
-  const isModel = useMemo(() => selectedSchemaType === "model", [selectedSchemaType]);
+  const isGroup = useMemo(
+    () => groupModalShown || selectedSchemaType === "group",
+    [groupModalShown, selectedSchemaType],
+  );
+
+  const data = useMemo(() => (isGroup ? group : currentModel), [currentModel, group, isGroup]);
+
+  const handleKeyCheck = useCallback(
+    async (key: string, ignoredKey?: string) => {
+      if (!projectId || !key) return false;
+      if (ignoredKey && key === ignoredKey) return true;
+      if (isGroup) {
+        const response = await CheckGroupKeyAvailability({ variables: { projectId, key } });
+        return response.data ? response.data.checkGroupKeyAvailability.available : false;
+      } else {
+        const response = await CheckModelKeyAvailability({ variables: { projectId, key } });
+        return response.data ? response.data.checkModelKeyAvailability.available : false;
+      }
+    },
+    [CheckGroupKeyAvailability, CheckModelKeyAvailability, isGroup, projectId],
+  );
+
+  const handleModalOpen = useMemo(
+    () => (selectedSchemaType === "model" ? handleModelModalOpen : handleGroupModalOpen),
+    [handleGroupModalOpen, handleModelModalOpen, selectedSchemaType],
+  );
+
+  const handleModalClose = useMemo(
+    () => (isGroup ? handleGroupModalClose : handleModelModalClose),
+    [handleGroupModalClose, handleModelModalClose, isGroup],
+  );
+
+  const handleDeletionModalOpen = useMemo(
+    () =>
+      selectedSchemaType === "model" ? handleModelDeletionModalOpen : handleGroupDeletionModalOpen,
+    [handleGroupDeletionModalOpen, handleModelDeletionModalOpen, selectedSchemaType],
+  );
+
+  const handleDeletionModalClose = useMemo(
+    () => (isGroup ? handleGroupDeletionModalClose : handleModelDeletionModalClose),
+    [handleGroupDeletionModalClose, handleModelDeletionModalClose, isGroup],
+  );
+
+  const handleSchemaCreate = useMemo(
+    () => (isGroup ? handleGroupCreate : undefined),
+    [handleGroupCreate, isGroup],
+  );
+
+  const handleSchemaUpdate = useMemo(
+    () => (isGroup ? handleGroupUpdate : handleModelUpdate),
+    [handleGroupUpdate, handleModelUpdate, isGroup],
+  );
+
+  const handleSchemaDelete = useMemo(
+    () => (isGroup ? handleGroupDelete : handleModelDelete),
+    [handleGroupDelete, handleModelDelete, isGroup],
+  );
 
   return {
-    isModel,
+    data,
     models,
     groups,
-    group,
     isMeta,
     setIsMeta,
     fieldModalShown,
     selectedField,
-    currentModel,
     selectedType,
     collapsed,
     fieldCreationLoading,
@@ -502,26 +555,17 @@ export default () => {
     handleFieldUpdate,
     handleFieldOrder,
     handleFieldDelete,
-    // group
+    handleKeyCheck,
+    handleModalOpen,
+    handleDeletionModalOpen,
+    handleModalClose,
+    handleDeletionModalClose,
+    handleSchemaCreate,
+    handleSchemaUpdate,
+    handleSchemaDelete,
     groupModalShown,
     groupDeletionModalShown,
-    handleGroupModalOpen,
-    handleGroupDeletionModalOpen,
-    handleGroupModalClose,
-    handleGroupDeletionModalClose,
-    handleGroupDelete,
-    handleGroupCreate,
-    handleGroupUpdate,
-    handleGroupKeyCheck,
-    // modal
     modelModalShown,
     modelDeletionModalShown,
-    handleModelModalOpen,
-    handleModelModalClose,
-    handleModelDeletionModalOpen,
-    handleModelDeletionModalClose,
-    handleModelDelete,
-    handleModelUpdate,
-    handleModelKeyCheck,
   };
 };
diff --git a/web/src/components/organisms/Project/Schema/index.tsx b/web/src/components/organisms/Project/Schema/index.tsx
index 344a683667..00a04a18a5 100644
--- a/web/src/components/organisms/Project/Schema/index.tsx
+++ b/web/src/components/organisms/Project/Schema/index.tsx
@@ -38,15 +38,13 @@ const ProjectSchema: React.FC = () => {
   } = useAssetHooks(false);
 
   const {
-    isModel,
+    data,
     models,
     groups,
-    group,
     isMeta,
     setIsMeta,
     fieldModalShown,
     selectedField,
-    currentModel,
     selectedType,
     collapsed,
     fieldCreationLoading,
@@ -63,25 +61,18 @@ const ProjectSchema: React.FC = () => {
     handleFieldUpdate,
     handleFieldOrder,
     handleFieldDelete,
+    handleKeyCheck,
+    handleModalOpen,
+    handleModalClose,
+    handleDeletionModalOpen,
+    handleDeletionModalClose,
+    handleSchemaCreate,
+    handleSchemaUpdate,
+    handleSchemaDelete,
     groupModalShown,
     groupDeletionModalShown,
-    handleGroupModalOpen,
-    handleGroupModalClose,
-    handleGroupDeletionModalOpen,
-    handleGroupDeletionModalClose,
-    handleGroupDelete,
-    handleGroupCreate,
-    handleGroupUpdate,
-    handleGroupKeyCheck,
     modelModalShown,
     modelDeletionModalShown,
-    handleModelModalOpen,
-    handleModelDeletionModalOpen,
-    handleModelModalClose,
-    handleModelDeletionModalClose,
-    handleModelDelete,
-    handleModelUpdate,
-    handleModelKeyCheck,
   } = useHooks();
 
   return (
@@ -89,17 +80,13 @@ const ProjectSchema: React.FC = () => {
       <SchemaMolecule
         collapsed={collapsed}
         selectedSchemaType={selectedSchemaType}
-        model={currentModel}
-        group={group}
-        onModelModalOpen={handleModelModalOpen}
-        onModelDeletionModalOpen={handleModelDeletionModalOpen}
-        onGroupModalOpen={handleGroupModalOpen}
-        onGroupDeletionModalOpen={handleGroupDeletionModalOpen}
+        data={data}
+        onModalOpen={handleModalOpen}
+        onDeletionModalOpen={handleDeletionModalOpen}
         modelsMenu={
           <ModelsMenu
             title={t("Schema")}
             collapsed={collapsed}
-            groupId={group?.id}
             selectedSchemaType={selectedSchemaType}
             onModelSelect={handleModelSelect}
             onGroupSelect={handleGroupSelect}
@@ -114,20 +101,20 @@ const ProjectSchema: React.FC = () => {
         onFieldDelete={handleFieldDelete}
       />
       <FormModal
-        data={isModel ? currentModel : group}
-        open={isModel ? modelModalShown : groupModalShown}
-        onKeyCheck={isModel ? handleModelKeyCheck : handleGroupKeyCheck}
-        onClose={isModel ? handleModelModalClose : handleGroupModalClose}
-        onCreate={isModel ? undefined : handleGroupCreate}
-        onUpdate={isModel ? handleModelUpdate : handleGroupUpdate}
-        isModel={isModel}
+        data={data}
+        open={modelModalShown || groupModalShown}
+        onKeyCheck={handleKeyCheck}
+        onClose={handleModalClose}
+        onCreate={handleSchemaCreate}
+        onUpdate={handleSchemaUpdate}
+        isModel={modelModalShown}
       />
       <DeletionModal
-        open={isModel ? modelDeletionModalShown : groupDeletionModalShown}
-        data={isModel ? currentModel : group}
-        onDelete={isModel ? handleModelDelete : handleGroupDelete}
-        onClose={isModel ? handleModelDeletionModalClose : handleGroupDeletionModalClose}
-        isModel={isModel}
+        data={data}
+        open={modelDeletionModalShown || groupDeletionModalShown}
+        onDelete={handleSchemaDelete}
+        onClose={handleDeletionModalClose}
+        isModel={modelDeletionModalShown}
       />
       {selectedType && selectedType === "Reference" && (
         <FieldCreationModalWithSteps
diff --git a/web/src/gql/graphql-client-api.tsx b/web/src/gql/graphql-client-api.tsx
index df613455b2..03a7e71b46 100644
--- a/web/src/gql/graphql-client-api.tsx
+++ b/web/src/gql/graphql-client-api.tsx
@@ -2320,7 +2320,7 @@ export type GetGroupsQueryVariables = Exact<{
 }>;
 
 
-export type GetGroupsQuery = { __typename?: 'Query', groups: Array<{ __typename?: 'Group', id: string, schemaId: string, projectId: string, name: string, description: string, key: string, schema: { __typename?: 'Schema', id: string, fields: Array<{ __typename?: 'SchemaField', id: string, type: SchemaFieldType, title: string, key: string, description?: string | null, required: boolean, unique: boolean, isTitle: boolean, multiple: boolean, typeProperty?: { __typename?: 'SchemaFieldAsset', assetDefaultValue?: any | null } | { __typename?: 'SchemaFieldBool', defaultValue?: any | null } | { __typename?: 'SchemaFieldCheckbox' } | { __typename?: 'SchemaFieldDate', defaultValue?: any | null } | { __typename?: 'SchemaFieldGroup' } | { __typename?: 'SchemaFieldInteger', min?: number | null, max?: number | null, integerDefaultValue?: any | null } | { __typename?: 'SchemaFieldMarkdown', defaultValue?: any | null, maxLength?: number | null } | { __typename?: 'SchemaFieldReference' } | { __typename?: 'SchemaFieldRichText' } | { __typename?: 'SchemaFieldSelect', values: Array<string>, selectDefaultValue?: any | null } | { __typename?: 'SchemaFieldTag' } | { __typename?: 'SchemaFieldText', defaultValue?: any | null, maxLength?: number | null } | { __typename?: 'SchemaFieldTextArea', defaultValue?: any | null, maxLength?: number | null } | { __typename?: 'SchemaFieldURL', defaultValue?: any | null } | null }> } } | null> };
+export type GetGroupsQuery = { __typename?: 'Query', groups: Array<{ __typename?: 'Group', id: string, name: string, key: string } | null> };
 
 export type GetGroupQueryVariables = Exact<{
   id: Scalars['ID'];
@@ -3846,60 +3846,8 @@ export const GetGroupsDocument = gql`
     query GetGroups($projectId: ID!) {
   groups(projectId: $projectId) {
     id
-    schemaId
-    projectId
     name
-    description
     key
-    schema {
-      id
-      fields {
-        id
-        type
-        title
-        key
-        description
-        required
-        unique
-        isTitle
-        multiple
-        typeProperty {
-          ... on SchemaFieldText {
-            defaultValue
-            maxLength
-          }
-          ... on SchemaFieldTextArea {
-            defaultValue
-            maxLength
-          }
-          ... on SchemaFieldMarkdown {
-            defaultValue
-            maxLength
-          }
-          ... on SchemaFieldAsset {
-            assetDefaultValue: defaultValue
-          }
-          ... on SchemaFieldSelect {
-            selectDefaultValue: defaultValue
-            values
-          }
-          ... on SchemaFieldInteger {
-            integerDefaultValue: defaultValue
-            min
-            max
-          }
-          ... on SchemaFieldBool {
-            defaultValue
-          }
-          ... on SchemaFieldURL {
-            defaultValue
-          }
-          ... on SchemaFieldDate {
-            defaultValue
-          }
-        }
-      }
-    }
   }
 }
     `;
diff --git a/web/src/gql/queries/group.ts b/web/src/gql/queries/group.ts
index 74d45d8d5f..e2b50aab6e 100644
--- a/web/src/gql/queries/group.ts
+++ b/web/src/gql/queries/group.ts
@@ -4,60 +4,8 @@ export const GET_GROUPS = gql`
   query GetGroups($projectId: ID!) {
     groups(projectId: $projectId) {
       id
-      schemaId
-      projectId
       name
-      description
       key
-      schema {
-        id
-        fields {
-          id
-          type
-          title
-          key
-          description
-          required
-          unique
-          isTitle
-          multiple
-          typeProperty {
-            ... on SchemaFieldText {
-              defaultValue
-              maxLength
-            }
-            ... on SchemaFieldTextArea {
-              defaultValue
-              maxLength
-            }
-            ... on SchemaFieldMarkdown {
-              defaultValue
-              maxLength
-            }
-            ... on SchemaFieldAsset {
-              assetDefaultValue: defaultValue
-            }
-            ... on SchemaFieldSelect {
-              selectDefaultValue: defaultValue
-              values
-            }
-            ... on SchemaFieldInteger {
-              integerDefaultValue: defaultValue
-              min
-              max
-            }
-            ... on SchemaFieldBool {
-              defaultValue
-            }
-            ... on SchemaFieldURL {
-              defaultValue
-            }
-            ... on SchemaFieldDate {
-              defaultValue
-            }
-          }
-        }
-      }
     }
   }
 `;