feat: 升级数据请求逻辑

antvis · Oct 24, 2023 · 06317a9 · 06317a9
1 parent 0af0360
commit 06317a9
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 147 deletions.
diff --git a/packages/li-editor/src/hooks/useEditorDatasets.ts b/packages/li-editor/src/hooks/useEditorDatasets.ts
@@ -1,66 +1,34 @@
-import { isLocalDatasetSchema, isRemoteDatasetSchema } from '@antv/li-sdk';
-import { useMemo, useSyncExternalStore } from 'react';
-import type { EditorDataset } from '../types';
+import { useSyncExternalStore } from 'react';
 import { useEditorService } from './useEditor';
-import { useEditorState } from './useEditorState';
 
-export const useEditorDatasets = (datasetIds?: string[]) => {
-  const { state } = useEditorState();
-  const { serviceCache, datasets: datasetSchemas } = state;
-
-  const datasets = useMemo(() => {
-    const newDatasets: EditorDataset[] = [];
-
-    datasetSchemas.forEach((datasetSchema) => {
-      if (Array.isArray(datasetIds) && !datasetIds.includes(datasetSchema.id)) return;
-
-      if (isLocalDatasetSchema(datasetSchema)) {
-        newDatasets.push({
-          ...datasetSchema,
-          fieldPairs: [],
-        });
-      } else if (isRemoteDatasetSchema(datasetSchema)) {
-        const targetCache = serviceCache[datasetSchema.id];
-        newDatasets.push({
-          ...datasetSchema,
-          data: targetCache?.data ?? [],
-          columns: targetCache?.columns ?? [],
-          fieldPairs: [],
-        });
-      } else {
-        newDatasets.push(datasetSchema);
-      }
-    });
-    return newDatasets;
-  }, [datasetIds, datasetSchemas, serviceCache]);
-
-  return datasets;
-};
-
-export const _useEditorDatasets_ = (datasetIds?: string[]) => {
+export const useEditorDataset = (datasetId: string) => {
   const { editorService } = useEditorService();
   const { editorDatasetManager } = editorService;
 
-  useSyncExternalStore(
+  const editorDatasets = useSyncExternalStore(
     (onStoreChange) => editorDatasetManager.subscribe(onStoreChange),
     () => editorDatasetManager.getSnapshot(),
   );
 
-  return editorDatasetManager.getDatasetList();
+  const editorDataset = editorDatasets.find((item) => item.id === datasetId);
+
+  return editorDataset;
 };
 
-export const _useEditorDatasets = () => {
+export const useEditorDatasets = () => {
   const { editorService } = useEditorService();
   const { editorDatasetManager } = editorService;
 
-  useSyncExternalStore(
+  const editorDatasets = useSyncExternalStore(
     (onStoreChange) => editorDatasetManager.subscribe(onStoreChange),
     () => editorDatasetManager.getSnapshot(),
   );
 
-  const editorDatasets = editorDatasetManager.getDatasetList();
-  console.log('editorDatasets: ', editorDatasets);
   const isLoading = editorDatasetManager.isLoading;
 
+  // useEffect(() => {
+  //   console.log('editorDatasets: ', editorDatasets);
+  // }, [editorDatasets]);
+
   return { editorDatasets, isLoading };
 };
diff --git a/packages/li-editor/src/layout/index.tsx b/packages/li-editor/src/layout/index.tsx
@@ -1,10 +1,7 @@
-import { getDatasetColumns } from '@antv/li-sdk';
-import { useAsyncEffect } from 'ahooks';
 import { ConfigProvider, notification, Spin } from 'antd';
 import classNames from 'classnames';
-import React, { useState } from 'react';
-import { useEditorService, useEditorState, _useEditorDatasets } from '../hooks';
-import type { EditorServiceCache } from '../types';
+import React, { useEffect } from 'react';
+import { useEditorDatasets, useEditorState } from '../hooks';
 import './index.less';
 import type { RuntimeAppProps } from './RuntimeApp';
 import RuntimeApp from './RuntimeApp';
@@ -23,76 +20,25 @@ export const DefaultTheme = {
 const Layout: React.FC<LayoutProps> = (props) => {
   const { className, style, defaultApplication, App } = props;
   const [notificationApi, contextHolder] = notification.useNotification();
-  const { state, updateState } = useEditorState();
-  const { appService } = useEditorService();
-  const { datasets, serviceCache } = state;
-
-  const [dataLoading, setDataLoading] = useState(false);
-  // const {loading: dataLoading} = _useEditorDatasets()
-
-  useAsyncEffect(async () => {
-    const newServiceCache: EditorServiceCache = {};
-    const requestList: { datasetId: string; datasetName: string; promise: Promise<Record<string, any>[]> }[] = [];
-    datasets.forEach((dataset) => {
-      const {
-        id: datasetId,
-        metadata: { name: datasetName },
-      } = dataset;
-      if (dataset.type === 'remote') {
-        if (serviceCache[datasetId]) {
-          newServiceCache[datasetId] = serviceCache[datasetId];
-        } else {
-          const service = appService.getImplementService(dataset.serviceType);
-          if (service) {
-            requestList.push({
-              datasetName,
-              datasetId,
-              promise: service.service({
-                properties: dataset.properties,
-                // TODO: filters 初始值问题
-              }),
-            });
-          }
-        }
+  const { state } = useEditorState();
+  const { editorDatasets, isLoading } = useEditorDatasets();
+
+  useEffect(() => {
+    editorDatasets.forEach((editorDataset) => {
+      if (editorDataset.isLoadingError && editorDataset.error) {
+        notificationApi.error({
+          message: `数据集"${editorDataset.metadata.name}"请求失败`,
+          description: editorDataset.error.message || editorDataset.error.message,
+        });
       }
     });
-
-    setDataLoading(true);
-
-    await Promise.all(
-      requestList.map(async ({ datasetId, datasetName, promise }) => {
-        try {
-          const data = await promise;
-          newServiceCache[datasetId] = {
-            data: data ?? [],
-            columns: data?.length ? getDatasetColumns(data[0]) : [],
-          };
-        } catch (error: any) {
-          notificationApi.error({
-            message: `数据集"${datasetName}"请求失败`,
-            description: error?.message || error,
-          });
-        }
-      }),
-    ).finally(() => {
-      setDataLoading(false);
-    });
-
-    updateState((draft) => {
-      return {
-        ...draft,
-        serviceCache: newServiceCache,
-      };
-    });
-  }, [datasets]);
-
-  _useEditorDatasets();
+  }, [editorDatasets]);
 
   return (
     <div className={classNames('li-editor', 'li-editor-layout', className)} style={style}>
       <ConfigProvider theme={DefaultTheme}>
         {contextHolder}
-        {dataLoading && (
+        {isLoading && (
           <div className="li-editor-layout__loading">
             <Spin />
             <span>数据集加载中...</span>

diff --git a/packages/li-editor/src/services/editor-dataset-manager.ts b/packages/li-editor/src/services/editor-dataset-manager.ts
@@ -52,6 +52,10 @@ export class EditorDataset {
     return this.schema.type;
   }
 
+  public get isLocalOrRemoteDataset() {
+    return isLocalOrRemoteDatasetSchema(this.schema);
+  }
+
   /** 筛选器 */
   public get filter() {
     if (isLocalOrRemoteDatasetSchema(this.schema)) {
@@ -67,9 +71,22 @@ export class EditorDataset {
 
   /** 数据集是否请求中，动态数据源类型情况 */
   public get isLoading() {
+    // if (this.queryObserver) {
+    //   console.log('getCurrentResult', this.queryObserver?.getCurrentResult());
+    // }
     return this.queryObserver?.getCurrentResult().isLoading ?? false;
   }
 
+  /** 数据集是否请求出错，动态数据源类型情况 */
+  public get isLoadingError() {
+    return this.queryObserver?.getCurrentResult().isLoadingError;
+  }
+
+  /** 数据集请求错误，动态数据源类型情况 */
+  public get error() {
+    return this.queryObserver?.getCurrentResult().error;
+  }
+
   public setSchema(schema: DatasetSchema) {
     this.schema = this.savePropertiesFromSchema(schema);
     if (isLocalDatasetSchema(schema)) {
@@ -146,7 +163,11 @@ export class EditorDataset {
     return datasetSchema;
   }
 
-  public loadSchemaFromPropertie() {
+  public loadSchemaFromPropertie(): DatasetSchema {
+    if (isLocalDatasetSchema(this.schema)) {
+      return { ...this.schema, data: this.data, columns: this.columns };
+    }
+
     return this.schema;
   }
 }
@@ -281,7 +302,6 @@ class EditorDatasetManager extends Subscribable<EditorDatasetManagerListener> {
     const index = this.datasets.findIndex((item) => item.id === datasetId);
     if (index !== -1) {
       const data = Array.isArray(result.data) ? result.data : [];
-      console.log('onQueryObserverResult', data);
       const newDatasets = this.datasets.slice(0);
       newDatasets[index] = this.copyEditorDataset(newDatasets[index]).updateData(data);
       this.datasets = newDatasets;

diff --git a/packages/li-editor/src/widgets/DatasetPreview/DatasetPreview.tsx b/packages/li-editor/src/widgets/DatasetPreview/DatasetPreview.tsx
@@ -1,9 +1,8 @@
-import { isLocalOrRemoteDataset } from '@antv/li-sdk';
 import { Modal, Table, Tooltip } from 'antd';
 import type { ColumnsType } from 'antd/lib/table';
 import { uniqueId } from 'lodash-es';
 import React, { useState } from 'react';
-import { useEditorDatasets } from '../../hooks';
+import { useEditorDataset } from '../../hooks';
 import type { ImplementEditorPreviewDatasetWidgetProps } from '../../types';
 import './DatasetPreview.less';
 import TypeTag from './TypeTag';
@@ -13,13 +12,13 @@ type DatasetPreviewProps = ImplementEditorPreviewDatasetWidgetProps;
 const DatasetPreview = (props: DatasetPreviewProps) => {
   const { datasetId, visible, onCancel } = props;
   const [pagination, setPagination] = useState({ current: 1, pageSize: 50 });
-  const [dataset] = useEditorDatasets([datasetId]);
+  const editorDataset = useEditorDataset(datasetId);
 
-  if (!isLocalOrRemoteDataset(dataset)) {
+  if (!editorDataset?.isLocalOrRemoteDataset) {
     return null;
   }
 
-  const { data: tableData = [], columns: tableColumns = [] } = dataset;
+  const { data: tableData = [], columns: tableColumns = [] } = editorDataset;
 
   const columns = () => {
     const fieldLists: ColumnsType<any> = [
@@ -73,7 +72,7 @@ const DatasetPreview = (props: DatasetPreviewProps) => {
   return (
     <Modal
       className="li-dataset-preview"
-      title={`${dataset?.metadata.name}`}
+      title={`${editorDataset.metadata.name}`}
       open={visible}
       bodyStyle={{ padding: 0 }}
       destroyOnClose

diff --git a/packages/li-editor/src/widgets/DatasetsPanel/DatasetList/DatasetItem/index.tsx b/packages/li-editor/src/widgets/DatasetsPanel/DatasetList/DatasetItem/index.tsx
@@ -1,14 +1,14 @@
 import { DeleteOutlined, FormOutlined, InsertRowAboveOutlined, MoreOutlined } from '@ant-design/icons';
 import type { DatasetSchema } from '@antv/li-sdk';
-import { getUniqueId, isLocalOrRemoteDataset } from '@antv/li-sdk';
+import { getUniqueId } from '@antv/li-sdk';
 import type { MenuProps } from 'antd';
 import { Dropdown, message, Popconfirm, Space, Tooltip } from 'antd';
 import classnames from 'classnames';
 import { downloadText } from 'download.js';
 import type { WritableDraft } from 'immer/dist/internal';
 import React, { useState } from 'react';
 import DatasetName from '../../../../components/EditName';
-import { useEditorDatasets, useEditorState } from '../../../../hooks';
+import { useEditorDataset, useEditorState } from '../../../../hooks';
 import './index.less';
 
 export type DatasetItemProps = {
@@ -22,8 +22,8 @@ const DatasetItem = (props: DatasetItemProps) => {
   const { dataset: datasetSchema, onReplaceDataset, onPreviewDataset, className } = props;
   const { state, updateState } = useEditorState();
   const [isEditName, setIsEditName] = useState(false);
-  const [dataset] = useEditorDatasets([datasetSchema.id]);
-  const isLocalOrRemoteDataSource = dataset && isLocalOrRemoteDataset(dataset);
+  const editorDataset = useEditorDataset(datasetSchema.id);
+  const isLocalOrRemoteDataSource = editorDataset?.isLocalOrRemoteDataset;
   const [messageApi, messageContextHolder] = message.useMessage();
 
   const replaceDataset = () => {
@@ -46,9 +46,9 @@ const DatasetItem = (props: DatasetItemProps) => {
   };
 
   const downloadDataset = () => {
-    if (dataset && isLocalOrRemoteDataset(dataset)) {
-      const { metadata } = dataset;
-      downloadText(`${metadata.name}.json`, JSON.stringify(dataset.data));
+    if (isLocalOrRemoteDataSource) {
+      const { metadata } = editorDataset;
+      downloadText(`${metadata.name}.json`, JSON.stringify(editorDataset.data));
     }
   };
 
@@ -116,10 +116,10 @@ const DatasetItem = (props: DatasetItemProps) => {
         >
           {isLocalOrRemoteDataSource ? (
             <>
-              共<span className="li-dataset-list__info-count">{dataset.data.length}</span>行数据
+              共<span className="li-dataset-list__info-count">{editorDataset.data.length}</span>行数据
             </>
           ) : (
-            dataset.metadata.description || dataset.properties.type
+            editorDataset?.metadata.description
           )}
         </div>
       </div>

diff --git a/packages/li-editor/src/widgets/FiltersPanel/FilterCard/index.tsx b/packages/li-editor/src/widgets/FiltersPanel/FilterCard/index.tsx
@@ -1,11 +1,11 @@
 import { DatabaseOutlined, DeleteOutlined } from '@ant-design/icons';
 import { FilterList } from '@antv/li-p2';
 import type { DatasetFilter, FilterNode, LocalDatasetSchema, RemoteDatasetSchema } from '@antv/li-sdk';
-import { getDatasetFields, isLocalOrRemoteDataset } from '@antv/li-sdk';
+import { getDatasetFields } from '@antv/li-sdk';
 import { Button, Card, Popconfirm, Select, theme } from 'antd';
 import type { DefaultOptionType } from 'antd/lib/select';
 import React, { useMemo } from 'react';
-import { useEditorDatasets, useEditorState } from '../../../hooks';
+import { useEditorDataset, useEditorState } from '../../../hooks';
 import './index.less';
 
 const CLS_PREFIX = 'li-filter-widget-card';
@@ -21,17 +21,12 @@ type FilterCardProps = {
 const { useToken } = theme;
 
 const FilterCard = ({ id: datasetId, datasetOptions, selectedDatasets, onDatasetIdChange, onDel }: FilterCardProps) => {
-  const datasetIds = useMemo(() => [datasetId], [datasetId]);
   const { token } = useToken();
-  const [dataset] = useEditorDatasets(datasetIds);
-  const filter = (dataset && isLocalOrRemoteDataset(dataset) && dataset.filter) || undefined;
-  const columns = useMemo(() => (dataset && isLocalOrRemoteDataset(dataset) ? getDatasetFields(dataset.columns) : []), [
-    dataset,
-  ]);
+  const editorDataset = useEditorDataset(datasetId);
+  const filter = editorDataset?.filter;
+  const columns = useMemo(() => (editorDataset ? getDatasetFields(editorDataset.columns) : []), [editorDataset]);
   // 考虑性能，只取前 50000 条数据
-  const _data = useMemo(() => (dataset && isLocalOrRemoteDataset(dataset) ? dataset.data.slice(0, 50000) : []), [
-    dataset,
-  ]);
+  const _data = useMemo(() => (editorDataset ? editorDataset.data.slice(0, 50000) : []), [editorDataset]);
 
   const { updateState } = useEditorState();
 

diff --git a/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/LayerForm/index.tsx b/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/LayerForm/index.tsx
@@ -1,12 +1,12 @@
 import type { LayerSchema } from '@antv/li-sdk';
-import { getDatasetFields, isLocalOrRemoteDataset } from '@antv/li-sdk';
+import { getDatasetFields } from '@antv/li-sdk';
 import { Form } from '@formily/antd-v5';
 import { createForm, onFieldValueChange } from '@formily/core';
 import { useMemoizedFn } from 'ahooks';
 import classNames from 'classnames';
 import { pick } from 'lodash-es';
 import React, { useMemo, useState } from 'react';
-import { useEditorDatasets, useEditorService, useEditorState } from '../../../../hooks';
+import { useEditorDataset, useEditorService, useEditorState } from '../../../../hooks';
 import BaseFormSchemaField from '../BaseFormSchemaField';
 import './index.less';
 import StyleForm from './StyleForm';
@@ -21,9 +21,8 @@ const LayerForm: React.FC<LayerFormProps> = ({ className, config, onChange }) =>
   const { state } = useEditorState();
   const [visType, setVisType] = useState(config.type);
   const [datasetId, setDatasetId] = useState(config?.sourceConfig?.datasetId);
-  const datasetIds = useMemo(() => (datasetId ? [datasetId] : []), [datasetId]);
-  const [dataset] = useEditorDatasets(datasetIds);
-  const columns = useMemo(() => (dataset && isLocalOrRemoteDataset(dataset) ? dataset.columns : []), [dataset]);
+  const editorDataset = useEditorDataset(datasetId!);
+  const columns = useMemo(() => (editorDataset ? editorDataset.columns : []), [editorDataset]);
 
   const [initialValues, setInitialValues] = useState<Pick<LayerSchema, 'sourceConfig' | 'visConfig'>>(
     pick(config, ['sourceConfig', 'visConfig']),