fix: repeat request categories when switching between graph interface and collection&fields (#1590)

packages/core/client/src/collection-manager/CollectionManagerProvider.tsx

@@ -45,11 +45,19 @@ export const RemoteCollectionManagerProvider = (props: any) => {
       sort: ['sort'],
     },
   };
+  const coptions = {
+    url: 'collectionCategories:list',
+    params: {
+      paginate: false,
+      sort: ['sort'],
+    },
+  };
   const service = useRequest(options);
+  const result = useRequest(coptions);
+
   if (service.loading) {
     return <Spin />;
   }
-
   const refreshCM = async (opts) => {
     if (opts?.reload) {
       setContentLoading(true);
@@ -62,40 +70,32 @@ export const RemoteCollectionManagerProvider = (props: any) => {
     }
     return data?.data || [];
   };
+  const refreshCategory = async () => {
+    const { data } = await api.request(coptions);
+    result.mutate(data);
+    return data?.data || [];
+  };
 
   return (
-    <CollectionManagerProvider
-      service={{ ...service, contentLoading, setContentLoading }}
-      collections={service?.data?.data}
-      refreshCM={refreshCM}
-      {...props}
-    />
+    <CollectionCategroriesProvider service={{ ...result }} refreshCategory={refreshCategory}>
+      <CollectionManagerProvider
+        service={{ ...service, contentLoading, setContentLoading }}
+        collections={service?.data?.data}
+        refreshCM={refreshCM}
+        {...props}
+      />
+    </CollectionCategroriesProvider>
   );
 };
 
 export const CollectionCategroriesProvider = (props) => {
-  const api = useAPIClient();
-  const options = {
-    url: 'collectionCategories:list',
-    params: {
-      paginate: false,
-      sort: ['sort'],
-    },
-  };
-  const result = useRequest(options);
-  if (result.loading) {
-    return <Spin />;
-  }
+  const { service, refreshCategory } = props;
   return (
     <CollectionCategroriesContext.Provider
       value={{
-        ...result,
-        data: result?.data?.data,
-        refresh: async () => {
-          const { data } = await api.request(options);
-          result.mutate(data);
-          return data?.data || [];
-        },
+        data: service?.data?.data,
+        refresh: refreshCategory,
+        ...props
       }}
     >
       {props.children}

packages/core/client/src/collection-manager/CollectionManagerShortcut.tsx

@@ -50,7 +50,7 @@ const schema2: ISchema = {
   type: 'object',
   properties: {
     [uid()]: {
-      'x-decorator': 'CollectionCategroriesProvider',
+      // 'x-decorator': 'CollectionCategroriesProvider',
       'x-component': 'ConfigurationTable',
     },
   },

packages/plugins/graph-collection-manager/src/client/GraphDrawPage.tsx

@@ -24,6 +24,7 @@ import {
   useCompile,
   useCurrentAppInfo,
   CollectionCategroriesProvider,
+  CollectionCategroriesContext,
 } from '@nocobase/client';
 import { useFullscreen } from 'ahooks';
 import { Button, Input, Layout, Menu, Popover, Switch, Tooltip } from 'antd';
@@ -374,6 +375,7 @@ export const GraphDrawPage = React.memo(() => {
   const {
     data: { database },
   } = useCurrentAppInfo();
+  const categoryCtx = useContext(CollectionCategroriesContext);
   const scope = { ...options?.scope };
   const components = { ...options?.components };
   const useSaveGraphPositionAction = async (data) => {
@@ -504,7 +506,7 @@ export const GraphDrawPage = React.memo(() => {
           <CurrentAppInfoContext.Provider value={database}>
             <APIClientProvider apiClient={api}>
               <SchemaComponentOptions inherit scope={scope} components={components}>
-                <CollectionCategroriesProvider>
+                <CollectionCategroriesProvider {...categoryCtx}>
                   <CollectionManagerProvider
                     collections={targetGraph?.collections}
                     refreshCM={refreshGM}

packages/plugins/graph-collection-manager/src/client/components/Entity.tsx

@@ -71,7 +71,7 @@ const Entity: React.FC<{
     }));
   };
   const loadCategories = async () => {
-    return categoryData.data.map((item: any) => ({
+    return categoryData?.data.map((item: any) => ({
       label: compile(item.name),
       value: item.id,
     }));