Home
Guide
API
Develop
Plugins
Roadmap
Contribution
Home
Guide
API
Develop
Plugins
Roadmap
Contribution

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}

数据源注册

数据源需要在插件中注册，通过 DataSourceManager 的 addDataSource 方法进行注册。

初始化添加的时候 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：数据源的状态 DataSourceState，loaded 表示已加载，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}
ON THIS Page