如何使用 react-query 命令式处理错误？

Question

由于 react-query 很大程度上基于 声明式 方法，我在所有示例中看到的错误处理看起来像这样：

function Todos() {
   const { isLoading, isError, data, error } = useQuery('todos', fetchTodoList)
 
   if (isLoading) {
     return <span>Loading...</span>
   }
 
   if (isError) {//If there is an error, render different JSX
     return <span>Error: {error.message}</span>
   } 
   
   return (
     <ul>
       {data.map(todo => (
         <li key={todo.id}>{todo.title}</li>
       ))}
     </ul>
   )
 }

但是如果我只想显示一个警告，以防出现错误怎么办？或者，也许我正在使用一些具有命令式触发器的错误处理接口？像这样：

if (isError) alert(`An error has occurred: ${error.message}`)

在这种情况下，我收到 两个警报。某些原因导致组件重新呈现，这当然会导致“重复”错误处理。

为什么这对我很重要？因为我的错误处理逻辑可能不是基于在我的组件中渲染某些特定的 JSX，而是基于一些手动的一次性触发器。警报只是一个基本示例。

如有任何建议，我们将不胜感激！

Answer 1

您是否尝试过使用 onError 回调？

看起来像这样：

    const useTodos = () =>
      useQuery(['todos'], fetchTodos, {
      // ⚠️ looks good, but is maybe _not_ what you want
      onError: (error) =>
        toast.error(`Something went wrong: ${error.message}`),
    })

你看，每个 Observer 都会调用 useQuery 上的 onError 回调，这意味着如果你在你的应用程序中调用 useTodos 两次，你将得到两个错误敬酒，即使只有一个网络请求失败

如何使用 react-query 命令式处理错误？

How to imperatively handle an error, with react-query?

javascript

reactjs

react-query