哪种状态表示在React-Query中使用useQuery启用时尚未获取的加载或数据？

Question

const {isAuthenticated} = useAuth();

    const { isLoading: isTwilioAccountsLoading, isSuccess: isTwilioAccountsSuccess, isError: isTwilioAccountsError, data: twilioAccounts, error: errorTwilioAccounts } = useQuery("twilioAccounts", () => TwilioAccountsFunc(), {
        enabled: !!isAuthenticated,
        placeholderData: []
    });

    function getTwilioAccounts() {
        if (!isTwilioAccountsSuccess) {
            return <div className="flex flex-col items-center w-1/4">
                <div className="mt-4">
                    <p className="w-24"><Skeleton /></p>
                </div>
            </div> 
        } else {
            if (isTwilioAccountsSuccess && twilioAccounts && twilioAccounts.length > 0) {
                return twilioAccounts.map((account, i) => {
                    return <div key={i} className="flex flex-col items-center w-1/4">
                        <div className="mt-4">
                            {!account.is_subaccount ?
                            <Link to={"/accounts/twilio/" + account.account_id} className="underline text-gray-800 font-medium">{account.name}</Link> :
                            <p className="leading-tight font-medium text-gray-800">{account.name}</p>
                            }
                        </div>
                    </div>
                });
            } else {
                return <Alert message="There are currently no accounts in use." />
            }
        }
    }

当我们仍然需要获取twilioAccounts数据时，我想在初始页面加载的骨架上显示该部分。因为我使用启用依赖项，所以iSloading为false，iSSUCCESS在初始页面加载中是正确的。我应该使用什么状态来捕获可用的数据？

Answer 1

让我首先说V4中有一个更改，因此让我们分别查看两个主要版本：

v3中的V3

，没有数据并且当前没有获取数据的查询在状态中：'idle：' '或isidle：true（如

V4

在V4中，闲置状态已被删除，并添加了“次要”状态，该状态使这两个状态的所有排列成为可能：

• 状态：'loading'| “成功” | '错误'

此状态为您提供有关数据字段的信息，可用于类型：

• 加载：尚无数据
• 成功>：有数据
• 错误：没有数据，因为以前的获取状态中存在错误

，与状态非常相似：<代码>待处理 | <代码>实现 | 拒绝。

• fetchstatus：'idle'| '提取'| “暂停”

此状态为您提供有关当前是否正在获取React-Query的信息（可能是第一个获取或随后的倒口气）。

正如我说的，所有组合都是可能的。如果尚无数据的禁用查询，您将处于状态：'loading'和fetchstatus：'idle'。

---

在您的具体示例中，使用占位符的使用会大大改变这些状态。由于使用lastholderData，您实际上具有 data 渲染，因此状态将始终为success（因为这仅表示有可用的数据） 。还有一个附加的iSplacholderData从useQuery返回的标志，您可以用来确定您是否具有假，Placholter Data（true）或“真实”数据（false）。这两个版本都是如此。在v4中，fetchstatus还将为禁用查询'idle'，而'fetching'用于启用查询。

Answer 2

您正在寻找isidle：

const {isIdle} = useQuery(["key"], fn, {
    enabled: false
});

console.log(isIdle)

Answer 3

当启用时：false获得正确的加载状态，可以测试

fetchStatus === 'fetching' && status === 'loading'