react-moralis useMoralisQuery教程3行代码写Moralis数据查询依赖自动刷新【免费下载链接】react-moralisHooks and components to use Moralis in a React app项目地址: https://gitcode.com/gh_mirrors/re/react-moralisreact-moralis 是 Moralis 官方的 React Hooks 组件库其核心 HookuseMoralisQuery让你用 3 行代码就能完成 Moralis 数据查询组件挂载时自动拉取数据、依赖数组变化时自动刷新还内置 loading / error 状态管理和实时 live 更新是 React 开发者接入 Moralis 数据库的完整方案。什么是 react-moralisReact 使用 Moralis 的 Hooks 库 react-moralis 是对 Moralis SDK 的一层轻量 React 封装把「初始化、登录、查询、订阅、文件上传、Web3 调用」等能力全部做成了 Hooks。你只需要在应用根部挂一个 Provider就能在任意组件里用 Hook 拿到数据官方文档见 README.md 中的 Usage 章节。它内置的常用 Hooks 包括Hook用途useMoralis()登录 / 登出 / 用户状态useMoralisQuery()数据库查询本文主角useMoralisSubscription()实时监听查询事件useMoralisCloudFunction()调用 Moralis 云函数useMoralisFile()文件上传支持 IPFS快速准备安装依赖与 MoralisProvider 初始化 ⚡安装依赖需同时安装moralis-v1npm install react react-dom moralis-v1 react-moralis用MoralisProvider包裹应用传入你的appId和serverUrlMoralisProvider appId你的appId serverUrl你的serverUrl App / /MoralisProviderProvider 会自动完成初始化并保持登录状态同步其实现位于src/context/MoralisProvider/MoralisProvider.tsx。3 行代码完成 Moralis 数据查询基础用法这是useMoralisQuery最经典的用法——传一个类表名它会在组件挂载时自动执行查询const { data, error, isLoading } useMoralisQuery(GameScore); if (error) return p查询失败{error.message}/p; if (isLoading) return p加载中…/p; return pre{JSON.stringify(data, null, 2)}/pre;这个 Hook 深受 react-query 启发所有异步逻辑都被它内部管理你不用再手写useEffect useState三件套。核心实现在src/hooks/core/useMoralisQuery/useMoralisQuery.ts。过滤查询链式条件、排序与 limit 设置 第二个参数是一个「查询加工函数」支持 Moralis.Query 的全部链式方法比如过滤、排序、分页const { data } useMoralisQuery(GameScore, (q) q .greaterThanOrEqualTo(score, 100) // 条件过滤 .descending(score) // 按分数降序 .limit(3) // 只取前 3 条 );这个例子就能取回「分数 ≥100 的前 3 条最高分」。依赖数组自动刷新动态查询条件如何生效这是useMoralisQuery最省心的特性第三个参数传入依赖数组依赖一变查询自动重新执行无需任何手动操作const [limit, setLimit] useState(3); const { data, isLoading } useMoralisQuery( GameScore, (q) q.descending(score).limit(limit), [limit] // limit 变化时自动重新查询 );页面里放一个修改limit的按钮列表就会自动刷新。依赖缓存由src/hooks/core/useMoralisQuery/_useSafeUpdatedQuery.ts负责它只在依赖真正变化时才重建查询对象避免不必要的重复请求。 如果只想手动控制查询时机在第四参数传{ autoFetch: false }然后调用返回的fetch()函数即可const { fetch, data } useMoralisQuery(GameScore, (q) q, [], { autoFetch: false, }); // button onClick{() fetch()}手动查询/button自动触发逻辑封装在src/hooks/internal/_useResolveAsyncCall/_useResolveAsyncCall.ts中。实时查询 live 模式数据变更自动同步到页面 传live: trueHook 会订阅该查询的 Live Query 事件数据库一旦变化data自动更新页面零刷新拿到最新数据const { data } useMoralisQuery(GameScore, (q) q, [], { live: true, });默认的事件处理规则如下也可以在 options 里用onLiveCreate、onLiveUpdate等函数自定义事件默认行为create新数据加入列表enter数据进入查询范围加入列表update已存在的数据就地更新leave数据移出查询范围从列表移除delete数据被删除从列表移除订阅的底层由src/hooks/core/useMoralisSubscription/useMoralisSubscription.ts实现组件卸载时会自动取消订阅不用担心内存泄漏。useMoralisQuery 返回值状态一览返回项说明data查询结果Moralis.Object 数组error错误对象无错误时为nullisLoading首次加载中无数据且请求进行中isFetching有请求正在进行含手动fetch()fetch()手动触发一次查询支持onSuccess/onError回调核心源码文件位置速查文件作用src/hooks/core/useMoralisQuery/useMoralisQuery.tsHook 主实现整合查询、状态与 live 订阅src/hooks/core/useMoralisQuery/_useSafeUpdatedQuery.ts按依赖缓存查询对象防止重复更新src/hooks/internal/_useResolveAsyncCall/_useResolveAsyncCall.ts管理 data / error / loading 状态与自动 fetchsrc/hooks/core/useMoralisSubscription/useMoralisSubscription.tslive 实时查询的订阅与清理src/context/MoralisProvider/MoralisProvider.tsx应用根 Provider负责初始化与全局状态常见问题 FAQautoFetch、isLoading 与错误处理 ❓Q为什么组件挂载后没有发起查询A确认应用已被MoralisProvider包裹且初始化完成autoFetch依赖isInitialized并检查没有传autoFetch: false。QisLoading和isFetching有什么区别AisLoading只在「还没有数据且在请求中」时为 true适合做首屏骨架屏isFetching只要请求在进行包括手动fetch()刷新就为 true适合禁用按钮防止重复点击。Q查询出错了怎么办A错误会落在返回的error中不会抛出中断渲染也可以在fetch()或 options 里通过onError回调接收或传throwOnError: true让其抛出。Qlive 订阅需要在组件卸载时手动取消吗A不需要Hook 内部已自动处理订阅与取消订阅的生命周期。小结useMoralisQuery把「查询 状态 依赖刷新 实时更新」打包进了一个 Hook✅ 1 行代码发起查询自动管理 data / error / loading✅ 依赖数组变化自动重新查询告别手动useEffect✅live: true一个开关实现数据库变更实时上屏掌握它之后再配合useMoralis()用户状态和useMoralisCloudFunction()云函数你就可以用纯 React 的思维方式快速搭出完整的前端数据层。【免费下载链接】react-moralisHooks and components to use Moralis in a React app项目地址: https://gitcode.com/gh_mirrors/re/react-moralis创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考