简化 react hook 的方法？

[RRRSSS]

我的场景是这样的：

1. API a 是比较常见的接口，几乎每个页面都要调用
2. API b 是依赖 a 的结果，去调用的

我先把 API a 和 b 用 react query 抽象成 hook:

const useFetchA = (params) => {
	return useQuery(['fetchA', params], async () => {
    	return await API.a(params)
    })
}

// useFetchB 也类似，就不写了

然后在很多组件上都有这样的两行：

const resA = useFetchA('xxx');
const resB = useFetchB('yyy');

我也想过要 API.a 和 API.b 放在一个 hook 里，但是这样，单独使用 API.a 或 API.b 的时候就不方便了。

也想过把 useFetchA 和 useFetchB 再放在一个 hook 里，类似这样:

const useFetchAandB = (params) => {
	const {data: resA} = useFetchA(params)
    const {data: resB} = useFetchB(resA)
}

不知道这样是否可行？有什么隐患？是否符合规范？

[codehz]

react query 不是自带缓存管理的吗（
重复写又不会重复请求

[tonytonychopper]

我理解 hook 就是可以随便组合的，只要逻辑清晰就行了

[RRRSSS]

@codehz 好吧，可能我例子特殊了，如果不用 react query 呢？只是 axios 请求呢？

我只是想用这个例子，看看这种情况怎么样比较合适？

[codehz]

@RRRSSS 这就是为啥不应该用 useEffect 来做这种操作（
https://blog.skk.moe/post/why-you-should-not-fetch-data-directly-in-use-effect/

[changwei]

用 swr ，把前一个 swr 请求的返回结果作为下一个 swr 的 key 即可，不用担心缓存问题，swr 会自动帮你解决

[RRRSSS]

@changwei emm..

我换个例子吧，不是请求，只是一个副作用，比如第一个 hook 是改 title ，第二个 hook 是根据这个 title 是否是 'homepage' 而去 useWindowSize 。好吧，我没编出来。就是这个意思，怎么弄呢、

[RRRSSS]

@codehz @tonytonychopper 关键是如果想要这种就不行了，不能放在 if 里:

```js
const useFetchAandB = (params) => {
const {data: resA} = useFetchA(params)
if (resA === 'foo') {
const {data: resB} = useFetchB(resA)
}
}
```

这样就不能抽象成 hook 了吧

[Pastsong]

useFetchAandB
useFetchA
useFetchB
同时存在，想用啥用啥

[codehz]

@RRRSSS useSWR key 为 null 的时候不会发出请求，完美符合需求

[CptDoraemon]

@RRRSSS
```js
const useFetchAandB = (params) => {
const {data: resA} = useFetchA(params);
const {data: resB, doFetchB} = useFetchB();
const previousResARef = useRef(resA);

useEffect(() => {
if (previousResARef.current !== 'foo' && resA === 'foo') {
}
})
```

[CptDoraemon]

tab 到回复了 lol

```js
const useFetchAandB = (params) => {
const {data: resA} = useFetchA(params);
const {data: resB, doFetchB} = useFetchB();
const previousResARef = useRef(resA);

useEffect(() => {
if (previousResARef.current !== 'foo' && resA === 'foo') {
doFetchB(resA)
}
})
```

[codehz]

(再动态一点可以考虑包一层组件，虽然 hook 不能写条件，但是组件可以随便加
做类似无限滚动的话还可以用 useSWRInfinite

[jjwjiang]

B 既然依赖 A 的结果，那你定义 useFetchB 的时候给个入参就行了，这样所有用到 fetchB 的地方就必须传入 A 的结果

如果 A 的查询和每个页面内容无关，那直接把 A 写到 useFetchB 里面去

[tonytonychopper]

@RRRSSS #7 这样写本来就会有坑，如果一定要这么写的话，不如在 useFetchB 内部做判断：

function useFetchB
if resA === 'foo' then do something