dataLoader请求支持手动调用从而实现数据刷新
- 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
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