如何使用react-query强制处理错误？

Question

由于反应查询在很大程度上基于声明性方法，我在所有示例中看到的错误处理看起来像这样：

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回调吗？

\n

它看起来像这样：

\n

    const useTodos = () =>\n      useQuery([\'todos\'], fetchTodos, {\n      // \xe2\x9a\xa0\xef\xb8\x8f looks good, but is maybe _not_ what you want\n      onError: (error) =>\n        toast.error(`Something went wrong: ${error.message}`),\n    })\n

\n

您会看到，每个 都会调用onError回调 on ，这意味着如果您在应用程序中调用两次，您将收到两个错误消息，即使只有一个网络请求失败useQueryObserveruseTodos

\n