V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
RRRSSS
V2EX  ›  React

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

  •  
  •   RRRSSS · 2022-09-06 20:24:32 +08:00 · 2970 次点击
    这是一个创建于 683 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    12 条回复    2022-09-07 12:19:39 +08:00
    Leviathann
        1
    Leviathann  
       2022-09-06 20:38:46 +08:00
    你把
    useQuery(['foo'], async () => {
    // 忽略请求部分代码
    }, {
    cacheTime: 10000,
    staleTime: 30000,
    })
    复制到一个 useXX 函数里不就行了
    react query 就是相当于前端 app 的数据库
    redux 则是放真正的运行时状态
    isukkaw
        2
    isukkaw  
       2022-09-06 21:30:24 +08:00
    > 我发现这样是可以,那么,这样是否就规范了呢?

    是。React Query 本身就自带 Global State Management ,你只需要确保 key 是一致的就行,React Query 替你负责 mutex 、dedupe 、cache 、cache revalidaate 。当然,还是建议重复逻辑抽出 Hook 。
    learningman
        3
    learningman  
       2022-09-06 21:32:31 +08:00
    @isukkaw #2 https://skk.moe/writings/ 大师你博客 CORS 一直都是寄的
    RRRSSS
        4
    RRRSSS  
    OP
       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
        5
    xlsepiphone  
       2022-09-06 21:46:27 +08:00
    rq 和 swr 都用过,个人觉得没有 swr 简单好用。
    gogogo1203
        6
    gogogo1203  
       2022-09-06 23:50:00 +08:00
    https://tkdodo.eu/blog/react-query-and-type-script 自己去看看 maintainer 写的博客。 更直接的方法就是搜 react-query example github.
    gogogo1203
        7
    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)
    px920906
        8
    px920906  
       2022-09-07 00:26:27 +08:00
    @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
        9
    GreatAuk  
       2022-09-07 09:49:50 +08:00
    @px920906 那可不至这一点点
    zhwithsweet
        10
    zhwithsweet  
       2022-09-07 11:22:38 +08:00
    swr 吧,简单点
    liuzhaowei55
        11
    liuzhaowei55  
       2022-09-07 12:18:19 +08:00 via iPhone
    使用场景更应该是把数据更新需要渲染的组建包装在一起,作为一个组建在 page 中引入,这样多个页面都需要一个外部数据时快速切换就不用重复请求了,如果直接在 page 层面使用需要重复写很多代码
    liuzhaowei55
        12
    liuzhaowei55  
       2022-09-07 12:19:39 +08:00 via iPhone
    @liuzhaowei55 如果有外部组件也需要共享数据,直接再引入状态库来同步
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2501 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 13:34 · PVG 21:34 · LAX 06:34 · JFK 09:34
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.