DataSource

主要是用于获取数据源和数据源的数据表结构列表,并在获取后交给 CollectionManager 进行管理,其被 DataSourceManager 管理。

1. 数据源定义

数据源的定义需要继承 DataSource 类,并实现 getDataSource 方法,当调用 reload 方法时,会调用 getDataSource 方法获取数据表结构。

1import { DataSource } from '@tachybase/client'
2
3class MyDataSource extends DataSource {
4  async getDataSource() {
5    return this.app.request({
6      url: 'xxx',
7      method: 'GET',
8    })
9  }
10}

数据源注册

数据源需要在插件中注册,通过 DataSourceManageraddDataSource 方法进行注册。

初始化添加的时候 collections 可以为空,当调用 reload 方法时,会调用 getDataSource 方法获取数据表结构。

1import { Plugin, DataSource, DataSourceOptions } from '@tachybase/client'
2
3class MyPlugin extends Plugin {
4  async load() {
5    this.app.dataSourceManager.addDataSource(MyDataSource, {
6      key: 'my-data-source',
7      displayName: 'My Data Source',
8      status: 'loaded',
9      errorMessage: 'error message',
10      collections: [
11        {
12          name: 'users',
13          fields: [
14            {
15              name: 'name',
16              type: 'string',
17            },
18          ],
19        },
20      ],
21    })
22  }
23}
  • key:数据源的唯一标识
  • displayName:数据源的显示名称
  • status:数据源的状态 DataSourceStateloaded 表示已加载,loading 表示正在加载,loading-failed 表示加载失败, reloading 表示正在重新加载,reloading-failed 表示重新加载失败
1type DataSourceState = 'loading' | 'loaded' | 'loading-failed' | 'reloading' | 'reloading-failed';
  • errorMessage:错误信息
  • collections:数据表结构

2. 实例方法

getDataSource()

用于获取数据源信息,其会被 reload 方法内部调用,外部不需要调用。

1export abstract class DataSource {
2  /** other code */
3  abstract getDataSource(): Promise<Omit<Partial<DataSourceOptions>, 'key'>> | Omit<Partial<DataSourceOptions>, 'key'>;
4
5  async reload() {
6    const dataSource = await this.getDataSource();
7    this.setOptions(dataSource);
8    this.collectionManager.setCollections(dataSource.collections || []);
9    this.reloadCallbacks.forEach((callback) => callback(dataSource.collections));
10    return this.options;
11  }
12  /** other code */
13}

addReloadCallback()

用于添加数据源加载完成后的回调函数。

  • 类型
1type LoadCallback = (collections: CollectionOptions[]) => void
2
3class DataSource {
4  addReloadCallback(callback: LoadCallback): void
5}

removeReloadCallback()

用于移除数据源加载完成后的回调函数。

  • 类型
1type LoadCallback = (collections: CollectionOptions[]) => void
2class DataSource {
3  removeReloadCallback(callback: LoadCallback): void
4}
  • 示例
1const MyComponent = () => {
2  const dataSource = useDataSource()
3
4  useEffect(() => {
5    const callback = collections => {
6      console.log(collections)
7    }
8    dataSource.addReloadCallback(callback)
9    return () => {
10      dataSource.removeReloadCallback(callback)
11    }
12  }, [])
13}

reload()

用于重新加载数据源,会调用 getDataSource 方法获取数据表结构,并内部调用 addReloadCallback 添加的回调函数。

  • 类型
1class DataSource {
2  reload(): Promise<void>
3}
  • 示例
1const MyComponent = () => {
2  const dataSource = useDataSource()
3
4  const handleClick = async () => {
5    await dataSource.reload()
6  }
7}

getOptions()

获取数据源的配置信息列表。

  • 类型
1interface DataSourceOptions {
2  key: string
3  displayName: string
4  collections?: CollectionOptions[]
5  errorMessage?: string
6  status?: DataSourceState;
7}
8
9type DataSourceState = 'loading' | 'loaded' | 'loading-failed' | 'reloading' | 'reloading-failed';
10
11class DataSource {
12  getOptions(): DataSourceOptions
13}

getOption(key)

获取数据源的配置信息。

  • 类型
1class DataSource {
2  getOption(key: string): any
3}
  • 示例
1const MyComponent = () => {
2  const dataSource = useDataSource()
3
4  const handleClick = async () => {
5    console.log(dataSource.getOption('key'))
6  }
7}