前端【免费下载链接】react-apollo:recycle: React integration for Apollo Client项目地址https://gitcode.com/gh_mirrors/re/react-apollo点击查看免费下载本指南以 react-apollo 仓库中 packages/components/README.md 为骨架系统讲解apollo/react-components包提供的三个核心渲染属性组件Render Prop Components——Query、Mutation与Subscription。你将掌握它们的安装方式、组件职责边界、关键 props 行为以及 React Apollo 4.0.0 终止发布后如何无缝迁移到apollo/client3.x 的官方替代入口。一、包概览这是什么样的一个包apollo/react-components是 React Apollo 官方拆分的五个子包之一其余为apollo/react-hooks、apollo/react-hoc、apollo/react-ssr、apollo/react-testing它面向的是一套经典但依然重要的 React 数据绑定范式渲染属性组件。按 packages/components/README.md 的原话这个包提供的是React ApolloQuery,MutationandSubscriptioncomponents.即三个分别对应 GraphQL 三种操作类型的组件Query执行查询query并把查询结果data、loading、error等作为渲染函数的参数暴露给子级Mutation执行变更mutation将触发变更的函数与变更结果暴露给子级Subscription订阅服务端推送subscription持续接收实时数据并驱动 UI 更新。在 React Apollo 3.x 时期这一组件范式与 Hooks 范式、HOC 范式并存而到了 Changelog.md 所记载的 3.0.0 版本这三个组件被内部重构为函数组件直接包装useQuery、useMutation、useSubscription三个 Hook 的等价实现因此三者共享同一套数据获取逻辑只是对外暴露的 API 形态不同。从本仓库的构建产物可以确认该包的轻量本质index.js 与 index.esm.js 的全部内容只是对apollo/client及其子路径apollo/client/react/components的再导出re-exportindex.d.ts 同样如此。也就是说这个包本身不再包含独立的实现代码而是作为旧版 API 的兼容入口存在这一点对后面的迁移判断非常关键。二、安装按 packages/components/README.md 的说明安装命令为npm install apollo/react-components从 packages/components/package.json 可以看到该包的工程事实版本号4.0.0React Apollo 系列的最后版本唯一运行时依赖为apollo/client: latest印证了组件实现来自 Apollo Client 3.x的结构main指向 CJS 构建index.jsmodule指向 ESM 构建index.esm.jstypes指向index.d.ts同时声明sideEffects: false意味着打包工具可以安全地对其进行 Tree Shaking。需要特别说明的是React Apollo 4.0.0 依赖apollo/client 3。如果你仍在apollo-client2.x 且暂不升级应当使用 React Apollo 3.x见 Changelog.md 的 Breaking Changes 说明。三、Query组件声明式拉取数据Query是三个组件中使用频率最高、也最核心的一个。它通过 render props 把查询生命周期内的所有状态交给调用方渲染代码形态如下该模式在 Changelog.md 3.0.0 章节有同构示例import { Query } from apollo/react-components; import gql from graphql-tag; const GET_DOG gql query GetDog($breed: String!) { dog(breed: $breed) { id name } } ; const Dog ({ breed }) ( Query query{GET_DOG} variables{{ breed }} {({ loading, error, data, refetch }) { if (loading) return p加载中…/p; if (error) return p出错了{error.message}/p; return ( p{data.dog.name}/p button onClick{() refetch()}重新拉取/button / ); }} /Query );渲染函数收到的结果对象包含loading、error、data、refetch、fetchMore等字段其具体集合以 Apollo Client 的QueryResult为准。3.1 关键 props 与行为来自本仓库 Changelog 的可靠记录以下特性均有 Changelog.md 的版本记录作为依据属于该组件的真实能力skip设为true时跳过该查询的执行同时按 2.2.0 的修复记录跳过状态下渲染函数收到的loading会被置为false因为此时并没有真正的加载行为。onCompleted/onError在 2.1.9 中加入用于注册查询成功或失败后的回调后续 2.2.0 调整了触发时机确保数据无论是来自网络还是来自本地缓存都能触发。partialRefetch默认false2.2.0 引入当组件挂载后执行了一个返回相同 ID 但字段更少的 mutation导致缓存无法命中时查询数据会被置空。开启该 prop 后Query会自动refetch原查询并更新缓存避免 UI 因字段被剥离而崩溃。returnPartialData2.5.6 引入当缓存里只有查询结果的子集例如另一个组件先缓存了member { id name }本组件要查member { id name plans }时Apollo 默认会因为无法完整命中而走全量网络请求。开启returnPartialData后组件会先用缓存中的部分字段渲染展示局部数据同时在后台把完整查询拉回来大幅改善用户体验。notifyOnNetworkStatusChange为true时每次网络状态变化如 refetch 期间都会触发重新渲染便于展示正在刷新的 UI3.1.0 还修复了它与fetchMore.updateQuery组合时的多余重渲染问题。3.2 与 Hooks 的对应关系在 3.0.0 的重构中Query从可继承的 class 组件改为函数组件并包装useQuery。因此 Changelog.md 明确提醒不能再通过继承Query来扩展它class SomeQuery extends Query...已不可用替代做法是直接组合使用或转用 packages/hooks/README.md 中的useQuery。对于希望保留类型安全调用方式的开发者可以用泛型写法QuerySomeData, SomeVariables query{...}。四、Mutation组件声明式触发变更与Query不同Mutation的渲染函数第一个参数是一个触发函数通常命名为mutate调用它才真正向服务端发送变更请求import { Mutation } from apollo/react-components; import gql from graphql-tag; const ADD_DOG gql mutation AddDog($name: String!) { addDog(name: $name) { id name } } ; const AddDogButton () ( Mutation mutation{ADD_DOG} {(addDog, { data, loading, error }) ( button disabled{loading} onClick{() addDog({ variables: { name: Cara } })} {loading ? 提交中… : 添加狗狗} /button )} /Mutation );4.1 关键 props 与行为来自本仓库 Changelog 的可靠记录awaitRefetchQueries2.1.11 加入默认false为true时refetchQueries中指定的查询会在 mutation 完成之前先全部执行完毕保证 mutation 的 Promise resolve 时相关查询已刷新默认情况下 refetch 的查询通常在 mutation 之后完成。refetchQueries按名称触发时的变量问题2.2.3 修复了通过字符串名称触发refetchQueries时未使用正确变量的缺陷。calledprop2.1.0-rc.4 加入表示该 mutation 是否已被调用过可用于区分尚未调用与调用后的 UI 状态。错误与结果2.2.3 修复了默认errorPolicy: all下 mutation 错误未通过 render props 正常返回的问题2.1.6 起ApolloClient实例既可以通过clientprop 传入以覆盖 context 中的实例也会出现在 mutation 的结果对象中。update回调用于在 mutation 返回后手动把结果写入缓存与partialRefetch场景互补是 Changelog.md 推荐的缓存协调方式。onCompleted/onError注册变更成功或失败的回调2.4.0 起即使Mutation组件已卸载这两个回调仍会被调用。五、Subscription组件订阅实时数据Subscription用于 WebSocket 等实时推送场景。与查询不同它会在组件挂载后维持一条长期订阅每次服务端推送都会触发一次渲染import { Subscription } from apollo/react-components; import gql from graphql-tag; const NEW_DOG gql subscription NewDog { newDog { id name } } ; const LatestDog () ( Subscription subscription{NEW_DOG} {({ data, loading }) { if (loading) return p等待推送…/p; return p最新狗狗{data.newDog.name}/p; }} /Subscription );5.1 关键 props 与行为来自本仓库 Changelog 的可靠记录fetchPolicy2.2.4 起Subscription支持fetchPolicyprop允许调整订阅结果与缓存的交互策略。onSubscriptionComplete2.4.1 加入当订阅的 observable 完成结束时触发回调适合做清理或通知。shouldResubscribe2.1.3 起支持传入函数来决定是否重新订阅同时修复了组件过度重复订阅的问题同一版本还修复了订阅结束后无法 refetch 的缺陷。与skip的配合3.1.0 为useSubscription加入了skip选项支持由于组件内部包装了该 Hook组件层同样受益。5.2 稳定性相关修复2.5.7 中修复了Subscription在组件已卸载后仍可能设置 state 的问题规避了 React 的卸载后警告。这说明在长连接场景下组件的挂载/卸载边界管理是订阅类组件实现的重点。六、组件、Hooks 与 HOC三种范式的选型背景在 React Apollo 3.0.0 的 monorepo 重构中详见 Changelog.md官方同时提供三种 React 数据绑定范式范式包核心 API渲染属性组件apollo/react-componentsQuery、Mutation、SubscriptionHooksapollo/react-hooksuseQuery、useLazyQuery、useMutation、useSubscription、useApolloClient高阶组件apollo/react-hocgraphqlHOC值得强调的是三个 render prop 组件在 3.0.0 中已全部改为函数组件并直接包装各自的 Hook 等价物见 Changelog.md 3.0.0 章节因此Query/useQuery、Mutation/useMutation、Subscription/useSubscription在数据获取逻辑上完全同源。官方文档在后续版本中已全面转向hooks-first但从本指南可以看出如果你维护的是旧版代码或偏好 render props 的写法apollo/react-components依然可用。七、4.0.0 弃用状态与迁移指南重要这是使用本包前必须知晓的关键事实。根目录 README.md 与 Changelog.md 4.0.0 章节均明确声明⚠️THIS PROJECT HAS BEEN DEPRECATED⚠️ 4.0.0 是 React Apollo 所有包的最后版本React Apollo 的功能已直接并入apollo/client 3。官方给出的迁移映射为旧: apollo/react-components -- 新: apollo/client/react/components也就是说把导入语句从import { Query, Mutation, Subscription } from apollo/react-components;改为import { Query, Mutation, Subscription } from apollo/client/react/components;即可获得完全等价的组件能力。之所以迁移如此平滑正是源于本仓库 index.js 与 index.d.ts 中纯再导出的包结构——旧包只是新入口的兼容别名。另外两个迁移注意事项同样来自 Changelog.md 4.0.04.0.0 起不再构建 UMD 版本如果仍在apollo-client2.x 且暂不升级请继续使用 React Apollo 3.x。八、仓库佐证这个包的真实结构最后把本包在仓库中的实现证据汇总如下便于读者自行验证packages/components/README.md包说明文档本文骨架来源定义了三组件定位与安装方式packages/components/package.jsonapollo/react-components4.0.0 的工程元数据依赖apollo/client声明sideEffects: falsepackages/components/index.jsCJS 入口逐条展开apollo/client与apollo/client/react/components的导出packages/components/index.esm.jsESM 入口内容同上供打包器进行 Tree Shakingpackages/components/index.d.tsTypeScript 类型入口同样来自apollo/clientChangelog.md本文所有组件 props 特性skip、partialRefetch、returnPartialData、awaitRefetchQueries、fetchPolicy、onSubscriptionComplete等的版本出处。总结apollo/react-components以极简的包结构承载了 React Apollo 经典的三个渲染属性组件Query负责声明式取数、Mutation负责声明式变更、Subscription负责实时订阅。尽管 4.0.0 已是最终版本组件本身并未消失——它们以apollo/client/react/components的形式在 Apollo Client 3.x 中继续演进。理解这三个组件既是维护旧代码的基础也是理解 Apollo 数据获取模型从 render props 到 Hooks 演进脉络的关键一环。赞分享前端【免费下载链接】react-apollo:recycle: React integration for Apollo Client项目地址https://gitcode.com/gh_mirrors/re/react-apollo点击查看免费下载相关推荐React Apollo组件化开发Query、Mutation、Subscription最佳实践React Apollo组件化开发Query、Mutation、Subscription最佳实践 React Apollo作为Apollo Client的Re前端Apollo Client MockedProvider 深度指南基于 apollo/client/testing/react 构建可靠的 React 组件测试Apollo Client MockedProvider 深度指南基于 apollo/client/testing/react 构建可靠的 React 组件前端GraphQLLearn Apollo React 教程6/7使用 Apollo Client 在单个组件中组合多个 Mutation 实现宝可梦更新与删除Learn Apollo React 教程6/7使用 Apollo Client 在单个组件中组合多个 Mutation 实现宝可梦更新与删除 导读 本练教程前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考