我的 React Query 使用姿势是不是不对

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› React

这是一个创建于 800 天前的主题，其中的信息可能已经有所发展或是发生改变。

刚使用 React Query 一天，有个问题请教大家。

在做一个应用，有一个接口比如 /api/foo，这是进入每一个页面都会调用的，我想要 cache 住。

我现在的代码:

const PageA = () => {
	const {data} = useQuery(['foo'], async () => {
      // 忽略请求部分代码
    }, {
      cacheTime: 10000,
      staleTime: 30000,
    })
}

const PageB = () => {
	const {data} = useQuery(['foo'], async () => {
      // 忽略请求部分代码
    }, {
      cacheTime: 10000,
      staleTime: 30000,
    })
}

我发现这样是可以，那么，这样是否就规范了呢？我不需要把 data 再放在 redux 里吧(我感觉不用)？

另外一个问题，每个页面都有这一段代码，怎么抽成比较简单的 hook 呢？

const

Data

代码

foo'

12 条回复 • 2022-09-07 12:19:39 +08:00

Leviathann

2022-09-06 20:38:46 +08:00

你把
useQuery(['foo'], async () => {
// 忽略请求部分代码
}, {
cacheTime: 10000,
staleTime: 30000,
})
复制到一个 useXX 函数里不就行了
react query 就是相当于前端 app 的数据库
redux 则是放真正的运行时状态

isukkaw

2022-09-06 21:30:24 +08:00

> 我发现这样是可以，那么，这样是否就规范了呢？

是。React Query 本身就自带 Global State Management ，你只需要确保 key 是一致的就行，React Query 替你负责 mutex 、dedupe 、cache 、cache revalidaate 。当然，还是建议重复逻辑抽出 Hook 。

learningman

2022-09-06 21:32:31 +08:00

@isukkaw #2 https://skk.moe/writings/ 大师你博客 CORS 一直都是寄的

RRRSSS

2022-09-06 21:39:37 +08:00

@isukkaw
@Leviathann

谢谢，我明白了

还有一个地方是我看文档没明白的，这里比如 getFoo 的参数是 `xxx` 变量，那么这个变量用 useEffect 处理：

```
const [xxx, setXXX] = useState('')

useEffect(() => {
useQuery(
['foo'],
async () => {
return await API.getFoo(xxx);
},
{
cacheTime: 10000,
staleTime: 30000,
},
);
}, xxx)
```

这样对吗？是否需要放在 useQuery 的 key 里？

xlsepiphone

2022-09-06 21:46:27 +08:00

rq 和 swr 都用过，个人觉得没有 swr 简单好用。

gogogo1203

2022-09-06 23:50:00 +08:00

https://tkdodo.eu/blog/react-query-and-type-script 自己去看看 maintainer 写的博客。更直接的方法就是搜 react-query example github.

gogogo1203

2022-09-06 23:53:37 +08:00

const fetchFoo = async (val: string) => {
const { data, error } = await return await API.getFoo(xxx);
if (err) .....

return data
}

export function useFoo(val: string) {
return useQuery([cacheKey], () => fetchFoo (val))
}

//component 里这么叫

const {data, isError,isLoading}=useFoo(val)