alibaba / alibaba/ice

dataLoader请求支持手动调用从而实现数据刷新

Open
#6,370 3 comments 0 reactions 0 assignees View on GitHub
rfc
Dominant language
TypeScript
Stars
18.6k
Forks
2.1k
PR merge metrics
No merged PRs in 30d

Description

### Summary | 概述

当前dataLoader的请求是自动发起的,期望增加在代码级别手动刷新的能力。

### Motivation | 背景

在pha容器场景下, 我们会配置`staticDataLoader`(一个对象),来拉取首屏核心的数据。但是当前做了操作之后,需要刷新首屏数据。

一个方法当然是重新在代码中实现取首屏数据的逻辑,当然这就导致了重复写代码了。

同时,由于它是一个对象,没法直接传入一个函数。

### Usage example | 使用示例

``` javascript
export const dataLoader = defineDataLoader([{
key: 'first_key',
prefetch_type: 'mtop',
api: 'xxxxx',
v: '1.0',
data: {
id: '${queryParams.id}',
},
ext_headers: {
name: '#extra_name',
},
}])
```
``` javascript
export default function Home() {
const [count, setCount] = useState(1);
const { data, refresh } = useData();

const onClick = () => {
refresh({
...otherparams,
});
};
}
``

### Detailed design | 方案设计

`useData` 同时返回`refresh`方法

其实现类似于

``` javascript
function refresh(params) {
// 注意刷新的时候,还要考虑_app和所有match的loader
return callDataLoader(loader, {
manual: true,
...requestContext,
...params,
});
}

```

### Additional context | 额外信息

_No response_

Contributor guide

Open the contributing guide

Research direction

Start by locating the implementation and usage of useData, defineDataLoader, and callDataLoader. Trace how the _app and matched route loaders are selected and how requestContext is passed, then determine how a manual refresh should accept parameters and refresh all relevant loaders. Done means useData exposes refresh and the documented example works without duplicating the initial data-loading logic.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.