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

[RRRSSS]

刚使用 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 呢？

[Leviathann]

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

[isukkaw]

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

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

[learningman]

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

[RRRSSS]

@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]

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

[gogogo1203]

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

[gogogo1203]

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)

[px920906]

@RRRSSS 很明显这个库的主要目的之一就是帮你把平时自己写 useEffect 的麻烦省去：
https://tanstack.com/query/v4/docs/guides/query-keys#if-your-query-function-depends-on-a-variable-include-it-in-your-query-key

[GreatAuk]

@px920906 那可不至这一点点

[zhwithsweet]

swr 吧，简单点

[liuzhaowei55]

使用场景更应该是把数据更新需要渲染的组建包装在一起，作为一个组建在 page 中引入，这样多个页面都需要一个外部数据时快速切换就不用重复请求了，如果直接在 page 层面使用需要重复写很多代码

[liuzhaowei55]

@liuzhaowei55 如果有外部组件也需要共享数据，直接再引入状态库来同步