React Query UseQueryResult 类型缩小

Question

我正在使用带有 react-query 的查询列表来获取“依赖项”，并且我希望在呈现我的组件之前加载所有依赖项。我通过将所有 deps 检查为数组然后对其进行操作来获得成功状态：

function DepsLoader() {
    const q1 = useQuery()
    const q2 = useQuery()
    const q3 = useQuery()
    const q4 = useQuery()

    const deps = [q1, q2, q3, q4]
    const allDone = deps.every(dep => dep.isSuccess)

    if (!allDone) return <Loading />

    return <Component q1={q1.data} q2={q2.data} q3={q3.data} q4={q4.data} />
}

在 JS 领域，这工作得很好。但是，如果我想在 TS 中做同样的事情，我会得到一个明显的错误，即 q1.data 是 Data | undefined，因为它是。通常，应该首先直接检查 q1.isSuccess 来缩小范围，但是对于我的依赖项列表，我不想手动执行（在实际组件中，列表最多可以有 9 个查询自动取款机）。

我也可以使用 q1={q1.data as Q1Type} 来投射它，但它不符合人体工程学。

有没有办法让 TS 认识到实际上所有查询都处于成功状态并且我已经缩小了范围？

Answer 1

在执行 .every 时，您需要使用用户定义的类型保护来执行类型缩小，因为没有它 TypeScript 不知道。

这里是typescript playground showing the gist of it, based on .

React Query UseQueryResult 类型缩小

React Query UseQueryResult type narrowing

casting

typescript

react-query