DataBlockRequestProvider

其内部获取到 BlockResourceProvider 提供的 resource,根据 BlockProvider 提供的参数,自动调用 resource.get() 或者 resource.list() 获取的卡片的数据,并通过 context 传递下去。

请求参数

请求参数是获取 DataBlockProvider 提供中的 paramsfilterByTk

1const schema = {
2  'x-decorator': 'DataBlockProvider',
3  'x-decorator-props': {
4    'collection': 'users',
5    'action': 'list',
6    // 静态参数
7    params: {
8      pageSize: 10,
9    }
10  },
11  // 动态参数
12  'x-use-decorator-props': 'useDynamicDataBlockProps',
13}
14
15const useDynamicDataBlockProps: UseDataBlockProps<'CollectionList'>  = () => {
16  return {
17    params: {
18      size: 15,
19    }
20  }
21}

会自动调用 resource.list() 获取数据,发起 GET /api/users:list?pageSize=10&size=15 的请求。

Hooks

useDataBlockRequest()

用于获取请求对象,一般用卡片组件中。

1const MyTable = () => {
2  const { data, loading } = useDataBlockRequest();
3
4  return (
5    <Table
6      dataSource={data?.data || []}
7      loading={loading}
8      pagination={{
9        total: data?.meta.total,
10        pageSize: data?.meta.pageSize,
11        page: data?.meta.page,
12      }}
13    />
14  )
15}

Record

Get 请求

对于 get 请求,当获取到 data 数据后,会通过 CollectionRecordProvider 提供 record 对象,用于获取当前卡片的数据。

1const schema = {
2  'x-decorator': 'DataBlockProvider',
3  'x-decorator-props': {
4    'collection': 'users',
5    'action': 'get', // get 请求
6  },
7  // 动态参数
8  'x-use-decorator-props': 'useDynamicFormProps',
9}
10
11const useDynamicDataBlockProps: UseDataBlockProps<'CollectionGet'>  = () => {
12  return {
13    params: {
14      filterByTk: 1,
15    }
16  }
17}

会自动调用 resource.get() 获取数据,发起 GET /api/users:get/1 的请求,并通过 CollectionRecordProvider 提供上下文。

1const { data } = useDataBlockRequest();
2const record = useCollectionRecord(); // record 上下文数据
3
4// 相等
5record.data === data;

List 请求

对于 list 请求则不会提供 record 对象,需要自己通过 <CollectionRecordProvider /> 设置上下文。

1const MyTable = () => {
2  const { data } = useDataBlockRequest();
3
4  return (
5    <Table
6      dataSource={data?.data || []}
7      columns={[
8        {
9          title: 'ID',
10          dataIndex: 'id',
11        },
12        {
13          title: 'Action',
14          render: (v, record) => {
15            return (
16              <CollectionRecordProvider record={record}>
17                <MyAction />
18              </CollectionRecordProvider>
19            )
20          },
21        },
22      ]}
23      pagination={{
24        total: data?.meta.total,
25        pageSize: data?.meta.pageSize,
26        page: data?.meta.page,
27      }}
28    />
29  )
30}
31
32const MyAction = () => {
33  const record = useCollectionRecord();
34  return (
35    <Button onClick={() => {
36      console.log(record.data);
37    }}>Dialog</Button>
38  )
39}