尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案
lit-query 中 UndefinedInitialDataOptions 类型解析:initialData 可选查询选项的类型设计
lit-query 中 UndefinedInitialDataOptions 类型解析initialData 可选查询选项的类型设计【免费下载链接】query Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.项目地址: https://gitcode.com/GitHub_Trending/qu/queryUndefinedInitialDataOptions是tanstack/lit-query中queryOptions()第三个重载签名所使用的查询选项类型用于描述initialData可以被省略或为undefined这一类查询配置。本文基于官方参考文档与 queryOptions.ts 的源码实现完整梳理该类型的定义、类型参数、它在queryOptions()重载体系中的位置以及它与DefinedInitialDataOptions、UnusedSkipTokenOptions的分工关系帮助你在 Lit 项目中编写类型安全的查询选项并理解其底层的类型推导机制。类型定义与定义位置该类型的完整定义对应参考文档 UndefinedInitialDataOptions.md如下type UndefinedInitialDataOptionsTQueryFnData, TError, TData, TQueryKey QueryObserverOptionsTQueryFnData, TError, TData, TQueryFnData, TQueryKey object源码中位于 packages/lit-query/src/queryOptions.ts#L58-L74其真实展开形式为/** * Query options where initialData can be omitted or undefined. */ export type UndefinedInitialDataOptions TQueryFnData unknown, TError DefaultError, TData TQueryFnData, TQueryKey extends QueryKey QueryKey, QueryObserverOptions TQueryFnData, TError, TData, TQueryFnData, TQueryKey { initialData?: | undefined | InitialDataFunctionNonUndefinedGuardTQueryFnData | NonUndefinedGuardTQueryFnData }即以QueryObserverOptions为基底再通过交叉类型把initialData字段显式收窄为可选的三种取值——undefined、返回非undefined数据的惰性函数、或者直接的非undefined数据。文档页面中呈现的initialData?声明与之一致optional initialData: | InitialDataFunctionNonUndefinedGuardTQueryFnData | NonUndefinedGuardTQueryFnData;注意类型参数中的TQueryData第四个位置参数在传给QueryObserverOptions时被固定为TQueryFnData这是 TanStack Query 统一选项类型的标准约定——查询函数返回的数据类型即缓存中的数据类型。四个类型参数及其默认值类型参数默认值 / 约束含义TQueryFnDataunknown查询函数queryFn返回的原始数据类型TErrorDefaultError查询失败时错误对象类型DefaultError在未声明Register[defaultError]时回退为Error见 types.ts#L45-L49TDataTQueryFnData最终暴露给消费者的数据类型通常是TQueryFnData经过select转换后的结果TQueryKey约束extends QueryKey默认QueryKey查询键类型QueryKey在未声明Register[queryKey]时回退为ReadonlyArrayunknown这四个默认值与参考文档 UndefinedInitialDataOptions.md 中 Type Parameters 一节完全一致。它属于哪个函数queryOptions()的三重载体系UndefinedInitialDataOptions并非孤立存在它是queryOptions()三个重载之一第三个的参数与返回基础。在 queryOptions.ts#L130-L139 中export function queryOptions TQueryFnData unknown, TError DefaultError, TData TQueryFnData, TQueryKey extends QueryKey QueryKey, ( options: UndefinedInitialDataOptionsTQueryFnData, TError, TData, TQueryKey, ): UndefinedInitialDataOptionsTQueryFnData, TError, TData, TQueryKey { queryKey: DataTagTQueryKey, TQueryFnData, TError }整个文件定义了三个语义上互相区分的选项类型分别对应三个重载详见 queryOptions 函数参考文档类型源码位置语义DefinedInitialDataOptionsqueryOptions.ts#L16-L29initialData必填保证查询数据一定处于 defined 状态此时queryFn变为可选UnusedSkipTokenOptionsqueryOptions.ts#L34-L53提供queryFn且排除SkipTokenqueryFn类型被Exclude..., SkipToken \| undefined收窄UndefinedInitialDataOptionsqueryOptions.ts#L58-L74initialData可省略或为undefined是最通用的兜底分支三者通过重载排列顺序DefinedInitialDataOptions→UnusedSkipTokenOptions→UndefinedInitialDataOptions让 TypeScript 按“信息量从强到弱”的方式匹配优先尝试推导“数据必然存在”的最强类型若推导不出来比如你既没有initialData也不排除skipToken最终落入UndefinedInitialDataOptions分支。真正的函数实现是同一个恒等函数queryOptions.ts#L141-L143export function queryOptions(options: unknown) { return options }也就是说queryOptions()在运行期不改变任何值它的价值完全在编译期把queryKey品牌化branding为DataTagTQueryKey, TQueryFnData, TError使数据与错误类型能沿着queryKey在整个 TanStack Query API如queryClient.getQueryData()、prefetchQuery()等之间传播。DataTag的定义在 packages/query-core/src/types.ts#L71-L80其本质是通过两个 Symbol 键dataTagSymbol/dataTagErrorSymbol在类型上附加不可见的标记。关键构成类型拆解initialData、NonUndefinedGuard 与 QueryObserverOptionsUndefinedInitialDataOptions的可读性取决于它引用的三个底层类型它们都来自tanstack/query-core1.QueryObserverOptions与initialData基线QueryObserverOptions继承自QueryOptions并强制queryKey必填types.ts#L315-L325。而initialData字段本身声明在QueryOptions中types.ts#L259initialData?: TData | InitialDataFunctionTDataUndefinedInitialDataOptions通过交叉类型把该字段重写为以NonUndefinedGuardTQueryFnData为准的可选变体从而允许“不传initialData”这一合法场景同时禁止把undefined字面量伪装成初始数据。2.NonUndefinedGuard把 undefined 挡在 initialData 门外// packages/query-core/src/types.ts#L12 export type NonUndefinedGuardT T extends undefined ? never : T它把undefined类型折叠为never。因此当TQueryFnData推导为string | undefined这类含undefined的联合时initialData的合法取值会被自动收窄避免你用undefined作为“初始数据”——这在语义上是矛盾的“没有初始数据”与“初始数据就是 undefined”不是一回事。3.InitialDataFunction惰性初始数据// packages/query-core/src/types.ts#L173 export type InitialDataFunctionT () T | undefined支持传入函数而非直接值适合需要运行时计算初始数据的场景例如从 URL 参数、本地存储或全局状态中恢复。在 Lit 项目中的实战用法queryOptions()返回带DataTag品牌化queryKey的选项对象供 lit-query 的查询控制器如createQueryController类型CreateQueryOptions从 queryOptions.ts 与 createQueryController.js 导出等 API 消费。类型三兄弟均通过 packages/lit-query/src/index.ts#L55-L60 从包入口公开导出export type { DefinedInitialDataOptions, UndefinedInitialDataOptions, UnusedSkipTokenOptions, } from ./queryOptions.js export { queryOptions } from ./queryOptions.js源码注释中自带的示例queryOptions.ts#L83-L92演示了带initialData的用法import { queryOptions } from tanstack/lit-query const todosOptions queryOptions({ queryKey: [todos], queryFn: fetchTodos, initialData: [], })而在不需要初始数据、或数据尚未就绪的场景中initialData可以直接省略此时命中的正是UndefinedInitialDataOptions重载import { queryOptions } from tanstack/lit-query // 不传 initialData命中第三个重载数据在首次加载前为 pending const userOptions queryOptions({ queryKey: [user, id], queryFn: () fetchUser(id), })从源码结构看重载的匹配顺序保证了只要你在选项里提供了“必然存在的数据”initialData或不含skipToken的queryFn推导出的选项类型就会携带更强的类型信息只有在最宽松的场景下才回落到UndefinedInitialDataOptions此时data等结果属性会在类型上体现“可能为undefined”的语义迫使消费者处理加载态。小结UndefinedInitialDataOptionsTQueryFnData, TError, TData, TQueryKey定义于 packages/lit-query/src/queryOptions.ts#L58-L74语义为“initialData可省略或为undefined”的查询选项是queryOptions()第三个重载的参数与返回基础。它与DefinedInitialDataOptionsinitialData必填、数据必然 defined和UnusedSkipTokenOptionsqueryFn必须存在且非skipToken共同构成queryOptions()的三重载推导体系运行期均为恒等透传价值全在编译期的DataTag品牌化queryKey。initialData的合法取值由NonUndefinedGuardtypes.ts#L12与InitialDataFunctiontypes.ts#L173联合约束确保初始数据“要么不存在、要么必然有值”。相关文档可继续延伸阅读DefinedInitialDataOptions、UnusedSkipTokenOptions、queryOptions 函数完整可运行的 Lit 示例项目可参考 examples/lit/basic。【免费下载链接】query Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.项目地址: https://gitcode.com/GitHub_Trending/qu/query创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
RELATED

相关推荐

Matlab海浪物理仿真:Gerstner波叠加与工程级实现

Matlab海浪物理仿真:Gerstner波叠加与工程级实现

简介:本资源是一套面向MATLAB初学者与计算可视化学习者的三维海浪曲面动态模拟仿真方案,适用于流体力学、海洋工程仿真及科学计算可视化等教学与实践场景。资源基于MATLAB 2022A开发,完整实现海浪曲面随时间演化的三维动态建模,原…

📅 2026/9/8 20:38:38
Windows Terminal 自动补全实战:PSReadLine 与 Clink 组合配置指南

Windows Terminal 自动补全实战:PSReadLine 与 Clink 组合配置指南

1. 先搞明白:Windows Terminal 的自动补全到底缺什么这些年不管是从 cmd 迁移过来,还是从 macOS 的 iTerm2 转战 Windows,很多人装上 Windows Terminal 的第一反应都是:界面是漂亮了,字体渲染也舒服了,可这…

📅 2026/9/8 20:38:38
rclone config disconnect 命令详解:撤销远程存储 OAuth 授权、注销登录与重新连接

rclone config disconnect 命令详解:撤销远程存储 OAuth 授权、注销登录与重新连接

rclone config disconnect 命令详解:撤销远程存储 OAuth 授权、注销登录与重新连接 【免费下载链接】rclone "rsync for cloud storage" - Google Drive, S3, Dropbox, Backblaze B2, One Drive, Swift, Hubic, Wasabi, Google Cloud Storage, Azure Blob…

📅 2026/9/8 20:38:38
MORE NEWS

更多资讯

📰

在 Transformers 中使用 MobileNetV2:倒残差架构原理、配置参数与图像分类/语义分割实战指南

在 Transformers 中使用 MobileNetV2:倒残差架构原理、配置参数与图像分类/语义分割实战指南 【免费下载链接】transformers 🤗 Transformers: the model-definition framework for state-of-the-art machine learning models in text, vision, audio, a…

📰

CLI-Anything ChromaDB CLI 实战:基于 ChromaDB v2 REST API 的向量子集、文档与语义检索命令行工具

CLI-Anything ChromaDB CLI 实战:基于 ChromaDB v2 REST API 的向量子集、文档与语义检索命令行工具 【免费下载链接】CLI-Anything "CLI-Anything: Making ALL Software Agent-Native" -- CLI-Hub: https://clianything.cc/ 项目地址: https://gitcode…

📰

Flutter 框架私有接口测试指南:深入解析 test_private 测试基础设施

Flutter 框架私有接口测试指南:深入解析 test_private 测试基础设施 【免费下载链接】flutter Flutter makes it easy and fast to build beautiful apps for mobile and beyond 项目地址: https://gitcode.com/GitHub_Trending/flutter41/flutter Flutter 框…

📰

AIRI 单仓实践:pnpm CLI 核心命令全解(安装、脚本、Workspace、补丁与发布)

AIRI 单仓实践:pnpm CLI 核心命令全解(安装、脚本、Workspace、补丁与发布) 【免费下载链接】airi 💖🧸 Self hosted, you-owned Grok Companion, a container of souls of waifu, cyber livings to bring them into o…

📰

基于SIFT的影像拼接算法Matlab实现全流程解析

简介:基于SIFT的影像拼接Matlab实现,面向计算机视觉初学者与图像拼接任务开发者,解决多视角影像自动对齐与融合问题,提供从特征点提取、特征描述与匹配、RANSAC误匹配剔除、单应性矩阵估计到图像融合的完整可运行代码流程。压缩包…

📰

Godot 4入门:30分钟安装汉化并跑通首个2D可交互场景

1. 这不是“又一个Godot安装教程”,而是你真正能跑起来的第一个2D场景 我带过三十多个从零开始学Godot的新人,几乎所有人卡在同一个地方:下载完Godot 4,双击打开,看到英文界面就懵了;点开示例项目&#xff…

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

读完文章,想聊聊您的网站?

告诉我们您的行业与需求,资深顾问一对一梳理方案与报价,全程免费。

📞 💬