react-query - 让 TypeScript 编译器知道数据存在于 React-Query 中

Question

React-Query 一般会返回一些查询状态，比如 isLoading , isError .该库保证这些 bool 值是稳定的。这意味着我们可以确定数据存在，如果 e. G。检查 onSuccess bool 值。然而，这——当然——对于 TS 编译器来说还不够。即使经过检查，也假设数据可以是undefined .让 TS 编译器知道数据存在的最佳方法是什么？
这是文档中的一个示例:

function Todos() {
   const { isLoading, isError, data, error } = useQuery('todos', fetchTodoList)
 
   if (isLoading) {
     return <span>Loading...</span>
   }
 
   if (isError) {
     return <span>Error: {error.message}</span>
   }
 
   // --> The data is now sure to exist

   return (
     <ul>
       {data.map(todo => ( // --> this will not work with the TS compiler.
         <li key={todo.id}>{todo.title}</li>
       ))}
     </ul>
   )
 }

Answer 1

react-query 在 v3 中添加了可区分的联合，所以这通常有效。您可以通过 status 来区分字段以及派生的 bool 标志。但是，您需要记住两件事:

如果您破坏，受歧视的工会将不起作用。这与 react-query 无关，而是与 TypeScript 无关。如果通过解构从对象中“取出”一个字段，它就无法再区分该对象。

react-query 有一个额外的状态:isIdle (或 status === 'idle' )，如果通过 enabled: false 禁用查询，则为真.

记住这两件事，这应该有效:

function Todos() {
   const queryInfo = useQuery('todos', fetchTodoList)
 
   if (queryInfo.isLoading || queryInfo.isIdle) {
     return <span>Loading...</span>
   }
 
   if (queryInfo.isError) {
     return <span>Error: {error.message}</span>
   }
 
   // --> The data is now sure to exist

   return (
     <ul>
       {queryInfo.data.map(todo => ( // --> TS is happy now
         <li key={todo.id}>{todo.title}</li>
       ))}
     </ul>
   )
 }

当然，你也可以直接查 isSuccess或 status === 'success'缩小类型。