获取查询后 React Query 执行突变答案

【问题标题】：React Query execute mutation after query is fetched获取查询后 React Query 执行突变
【发布时间】：2021-07-02 13:56:49
【问题描述】：

假设我有一个查询 useFetchUser() 和一个突变 useMutateUser()。当我的组件被渲染时，我想获取当前用户，然后在查询完成后执行突变。所以我有这样的事情：

   const {data} = useFetchUser()
   const {mutate} = useMutateUser()

   useEffect(() => {
      if(data) {
        mutate() 
     }
   }, [data, mutate])

现在，当我签入网络选项卡时，我看到突变在查询仍处于待处理状态时开始。我做错了什么？

【问题讨论】：

很难说不知道自定义挂钩在做什么。因为只要查询最初加载，data 将是 undefined，因此您的条件会阻止突变运行。一般来说，我会将副作用放入查询的onSuccess 回调中。
你应该在useEffect中使用控制台日志进行调试，你可以控制台日志isLoading和数据来举例。

标签： reactjs react-query

【解决方案1】：

您可以在参数中将 react-query 选项发送到您的钩子 useFetchUser() 并利用 onSuccess 回调：

const useFetchUser = (options = {}) => {
    return useQuery(yourKey, () => fetchUser(), {...options})
}

然后像这样消费：

const {mutate} = useMutateUser()
const {data} = useFetchUser({onSuccess: mutate()})

【讨论】：