Solid Query 安装指南NPM 安装、CDN 引入与浏览器兼容性要求【免费下载链接】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本文导读Solid Querytanstack/solid-query是 TanStack Query 生态中面向 Solid.js 的官方数据请求与异步状态管理方案。本文将基于 安装文档 完整梳理它的三种引入方式NPM / pnpm / yarn / bun 包管理器安装、ESM CDN 引入并逐条解读官方推荐的浏览器兼容范围与老浏览器场景下的转译建议同时结合本仓库内的真实package.json、示例工程与源码结构给出安装后快速验证与工程化落地的实操指引。读完你可以独立完成 Solid Query 的选型安装、环境校验与首个可运行示例。一、安装前先认识包结构在 packages/solid-query 目录内可以看到完整的 SDK 工程。其 package.json 中定义的关键信息如下包名tanstack/solid-query当前仓库内版本为5.102.8定位Primitives for managing, caching and syncing asynchronous and remote data in Solid即为 Solid 提供管理、缓存与同步异步/远端数据的响应式原语运行时依赖仅依赖tanstack/query-core同仓库 workspace 版本核心查询引擎与 UI 层原语分层解耦Peer 依赖solid-js: ^1.6.0即安装方需要自行提供兼容的 Solid 运行时官方在^1.6.0及以上版本范围内均可用产物形态exports字段同时声明了import/require两套入口ESM 与 CJS并额外提供development条件导出便于开发期与生产期加载不同的构建产物。这些字段是包管理器在安装、解析与打包时依赖的真实依据。理解它们有助于你在 Vite、Solid Start 或传统构建工具中遇到解析告警时快速定位问题。二、通过包管理器安装NPM官方推荐通过 NPM 生态安装。文档给出了四种主流包管理器完全等价的命令npm i tanstack/solid-query或pnpm add tanstack/solid-query或yarn add tanstack/solid-query或bun add tanstack/solid-query版本与配套说明本仓库为 TanStack Query v5 系列安装tanstack/solid-query后可直接导入QueryClient、QueryClientProvider、useQuery、useQueries、useInfiniteQuery、useMutation等 API这些导出在 packages/solid-query/src 的useQuery.ts、useQueries.ts、useInfiniteQuery.ts、useMutation.ts、QueryClient.ts等文件中一一对应。若使用 pnpm 工作区如本仓库采用 pnpm-workspace.yaml 组织多包tanstack/solid-query通过tanstack/query-core: workspace:*与核心包保持同步发布安装时无需手工维护两者版本对齐。何时需要额外安装 Devtoolsexamples/solid/simple/package.json 显示调试工具是独立发布的包npm i tanstack/solid-query tanstack/solid-query-devtools只有在调试阶段需要可视化面板时才需要安装tanstack/solid-query-devtools其源码位于 packages/solid-query-devtools。生产构建中无需引入它以减小打包体积。三、不使用打包器通过 ESM CDN 引入如果你正在写一个不使用模块打包器或包管理器的静态页面官方文档给出了一种替代方案通过 ESM 兼容的 CDN如 ESM.sh直接加载。只需在 HTML 文件的/body之前添加script typemodule标签script typemodule import { QueryClient } from https://esm.sh/tanstack/solid-query /script使用要点必须使用typemodule因为该方案基于原生 ESM 加载不支持传统同步scriptimport { QueryClient }只是最小验证示例在真实使用中你还需要从同一 CDN 引入solid-js、solid-js/web并配合QueryClientProvider、useQuery等构建完整应用CDN 路径默认解析为最新稳定版如需锁定版本可写成形如https://esm.sh/tanstack/solid-query5.102.8的显式版本地址保证缓存与行为可复现该方法同样适用于 CodePen、JSFiddle 等在线片段演示场景适合先跑起来再下载到本地工程。四、浏览器兼容要求RequirementsSolid Query 针对现代浏览器做了优化。官方在 安装文档 中声明了以下兼容配置Chrome 91 Firefox 90 Edge 91 Safari 15 iOS 15 Opera 77老浏览器与旧环境怎么办文档给出了两条明确指引需要认真执行按需补充 polyfill取决于你的目标环境可能需要为缺失的 Web API 添加 polyfill例如较老浏览器中不存在AbortController、queueMicrotask等与请求取消、调度相关的实现自行转译库代码如果你想支持上述范围之外更老的浏览器需要把库从node_modules中一起纳入转译。绝大多数构建器Vite、Webpack、Rollup默认不转译node_modules因此需要显式配置对该包放行。配套的工程级校验手段本仓库的 SDK 自身也在持续做多版本 TypeScript 兼容性验证packages/solid-query/package.json 的test:types脚本会并行在 TS 5.6~5.9 与 7.0 等多个编译器版本下构建类型声明。这意味着只要你的工程 TypeScript 版本处于合理范围内一般不会因类型定义不兼容而阻断安装使用。若你本地构建遇到浏览器目标相关告警优先检查tsconfig的target/lib以及 Vite 的build.target是否落在这份兼容表之内。五、安装完成后如何快速验证跑通官方 simple 示例文档在结尾处提示动手前想先体验可尝试 simple 或 basic 示例这两个链接指向的实例如下仓库内路径均已以根目录为基准给出examples/solid/simple — 最小可运行示例只含一个数据请求查询examples/solid/basic — 稍完整的入门示例。以 simple 为例它的 package.json 依赖为tanstack/solid-query、tanstack/solid-query-devtools与solid-js并使用vitevite-plugin-solid驱动。其核心入口 src/index.tsx 展示了安装完成后最典型的装配链路import { QueryClient, QueryClientProvider, useQuery } from tanstack/solid-query import { SolidQueryDevtools } from tanstack/solid-query-devtools import { Match, Switch } from solid-js import { render } from solid-js/web const queryClient new QueryClient() function Example() { const state useQuery(() ({ queryKey: [repoData], queryFn: async () { const response await fetch(https://api.github.com/repos/TanStack/query) return await response.json() }, })) return ( Switch Match when{state.isPending}Loading.../Match Match when{state.error} {An error has occurred: (state.error as Error).message} /Match Match when{state.data ! undefined} div{/* 渲染仓库名称、描述、star/fork 等数据 */}/div /Match /Switch ) } render( () ( QueryClientProvider client{queryClient} SolidQueryDevtools / Example / /QueryClientProvider ), document.getElementById(root)!, )这个示例恰好验证了安装后的四项关键能力Provider 装配QueryClientProvider将全局QueryClient注入组件树查询原语useQuery接收返回{ queryKey, queryFn }的函数Solid 风格响应式查询状态分支渲染利用state.isPending/state.error/state.data三个信号化字段配合Switch/Match渲染加载、错误与成功三种 UIDevtools 可插拔SolidQueryDevtools仅在需要调试时引入。在示例目录内执行pnpm install后运行pnpm devvite即可看到真实请求效果这也是对新装环境网络、Peer 依赖解析、Node 版本最直接的冒烟测试。六、源码层面的再印证安装后你会拿到什么安装完成后你实际消费的 API 入口可从 packages/solid-query/src/index.ts 的导出清单确认索引、查询、无限查询、变更、状态订阅与 Provider 均在列。与此同时packages/solid-query/README.md 汇总了该包开箱即用的能力矩阵包括与传输协议/后端无关的数据获取REST、GraphQL、Promise 等自动缓存与重取stale-while-revalidate、窗口聚焦刷新、轮询/实时并行与依赖查询、Mutation 与响应式重取多层缓存与自动垃圾回收分页/游标查询、加载更多与无限滚动查询及滚动位置恢复请求取消、Suspense 与 Fetch-As-You-Render 预取。这些能力并非安装后自动生效的魔法而是由tanstack/query-core提供核心引擎、由tanstack/solid-query以 Solid 响应式原语封装。理解这一点在排查问题时就能区分查询引擎行为与Solid 集成行为两类故障面。七、安装排错小贴士基于仓库配置推断结合 packages/solid-query/package.json 与示例工程配置整理几个常见安装/运行问题的自查方向Peer 依赖告警确认solid-js版本满足^1.6.0的 peer 要求examples/solid/*示例中使用的是solid-js^1.9.7解析入口告警包同时提供 ESM/CJS 与development条件导出若构建器出现双包实例或 dev 产物误入生产构建的告警请检查该工具对exports条件导出的支持程度浏览器目标过低若运行环境低于官方兼容表Chrome 91 / Firefox 90 / Edge 91 / Safari 15 等按前文指引补充 polyfill 并放行对node_modules的转译类型环境不匹配若 TS 编译报类型错误先核对工程的 TypeScript 版本是否过于陈旧仓库 CI 覆盖的 TypeScript 版本范围较广过旧编译器早于 5.6可能需要升级。综上Solid Query 的安装链路非常清晰现代浏览器项目直接选择任一包管理器安装 tanstack/solid-query调试场景追加 tanstack/solid-query-devtools无构建工具场景走 ESM.sh CDN需要支持旧浏览器时做好 polyfill 与node_modules转译放行。如需完整参考可对照 安装文档 及 examples/solid 下的示例逐项实操。【免费下载链接】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），仅供参考