代码之家 › 专栏 › 技术社区 › Pavel Perevezencev

react query:属性“isSuccess”的类型不兼容

tanstackreact-query react-query typescript

0

Pavel Perevezencev · 技术社区 · 2 年前

我有一个这样的代码:

import { get } from "lodash-es"
import {useQuery} from '@tanstack/react-query'

type QueryResult<TData extends object> =
    | {
          isSuccess: false
          isPending: true
          isError: false
          data: undefined
      }
    | {
          isSuccess: true
          isPending: false
          isError: false
          data: TData
      }

class DataListManager<TData extends object, TPath extends keyof TData> {
    constructor(
        private readonly _query: QueryResult<TData>,
        private readonly _path: TPath,
    ) {}

    get query() {
        const items = get(this._query.data, this._path) ?? []

        return {
            ...this._query,
            data: {
                items,
            },
        }
    }
}

type Transaction = {}

function useTransactionsListManager() {
    const query = useQuery({
        async queryFn() {
            const data = await new Promise<{transactions: Array<Transaction>}>(resolve => {
                resolve({
                    transactions: []
                })
            })

            return data
        },
        queryKey: ['transactions']
    })

    //  Argument of type 'UseQueryResult<{ transactions: Transaction[]; }, Error>' is not assignable to parameter of type 'QueryResult<{ transactions: Transaction[]; }>'.
    //   Type 'QueryObserverRefetchErrorResult<{ transactions: Transaction[]; }, Error>' is not assignable to type 'QueryResult<{ transactions: Transaction[]; }>'.
    //     Type 'QueryObserverRefetchErrorResult<{ transactions: Transaction[]; }, Error>' is not assignable to type '{ isSuccess: true; isPending: false; isError: false; data: { transactions: Transaction[]; }; }'.
    //       Types of property 'isSuccess' are incompatible.
    //         Type 'false' is not assignable to type 'true'.ts(2345)
    return new DataListManager(query, "transactions")
}

为什么会出现此错误,以及如何修复?

使现代化

由于体系结构限制,我无法在DataListManager中使用UseQueryResult。

Playground

1 回复 | 直到 2 年前

1

2

Caleth 2 年前

你不需要定义自己 QueryResult 类型,可以从中导入 @tanstack/react-query

import {useQuery, UseQueryResult} from '@tanstack/react-query'

class DataListManager<TData extends object, TPath extends keyof TData> {
    constructor(
        private readonly _query: UseQueryResult<TData>,
        private readonly _path: TPath,
    ) {}

    get query() {
        const items = get(this._query.data, this._path) ?? []

        return {
            ...this._query,
            data: {
                items,
            },
        }
    }
}

如果需要改进,请使用 Pick

type QueryResult<TData extends object> = Pick<UseQueryResult<TData>, "isSuccess" | "isPending" | "isError" | "data">

Playground