👀 查看结果
现在让我们看看我们的应用长什么样!
打开一个新的终端,导航到client
文件夹,然后用 cd client
,然后用 npm start
运行应用。这将在 http://127.0.0.1:3000/
或浏览器中的 localhost:3000
中运行应用。
我们在主页上看到了所有轨道。现在让我们点击第二个轨道,我们应该在这里看到观看次数。
如果我们返回主页再次单击该轨道,我们现在会看到观看次数增加了!棒极了!
注意:请记住,你的观看次数可能与视频不同!要检查你的 突变执行成功,打开浏览器的开发者工具,找到 console.log
,这是我们之前设置的信息。
现在,如果你有敏锐的观察力(或缓慢的互联网连接 🐌 ),你可能在这里发现了异常情况。事实上,让我们打开开发人员工具控制台,并使用视频魔术将速度变慢,以便我们可以看到确切发生了什么。
你看到那了吗?页面直接加载了所有曲目数据,然后在短暂的2
变为 3
的一刻后,浏览次数发生了变化!我们看到了我们之前设置的控制台日志。这意味着我们的 mutation在页面加载后已完成。那我们之前如何在没有错误的情况下在页面上看到所有内容?虽然我们在前一页面运行了 mutation,但它是如何在该页面上更新的?
🗳️ Apollo Client 缓存
这要归功于 Apollo Client 缓存!
在Lift-off III中,我们了解到,如果我们之前已经点击过某首曲目,这首曲目在页面上的显示速度就会提升。这是因为它从缓存中加载的,这意味着我们没有向我们的 GraphQL API 发送不必要的查询。
同样,我们仍在从缓存中加载页面,而我们的 mutation已被发送至我们的 API。一旦它成功返回,我们就会收回 numberOfViews
的更新值。 Apollo Client正在后台查看此曲目的 id
,在缓存中搜索它,并更新其 numberOfViews
field。当缓存更新时,UI 也随之更新。感谢 Apollo Client!
🎉大功告成!
非常感谢大家参加我们的首次系列课程“升空”——我们 奥德赛 之旅。现在,我们已经为富有抱负的猫宇航员提供了一款可用于探索宇宙的应用程序,而且我们可以通过浏览次数看出某一音轨的受欢迎程度。
使用 GraphQL 还有很多事情可以做!随着应用程序的规模和复杂程度的不断增加,以及多个团队参与到对图形的消费和维护中,注册表的作用将会随之不断增强。
我们邀请大家继续踏上你们的旅程。
想让本地运行的服务器和客户端应用程序投入生产吗?查看 支线任务:使用 Railway 部署 Apollo 应用程序 课程! 🚀。
您还可立即上手,将 GraphQL API 提升至更高层次! 航海系列 将向您介绍可用于扩展的 GraphQL 概念:您将全面了解联合架构、探索 GraphOS 架构注册表,并创建一个 超级图形。
如果您希望我们介绍其他任何内容,请告诉我们。我们也很好奇您对我们首个 奥德赛 系列的看法。在下面的调查中留下您的反馈!
下次再会!
分享您对本课程提出的问题和评论
您的反馈将帮助我们做出改进!如果您遇到困难或感到困惑,请告知我们,我们会为您提供帮助。所有评论都是公开的,且必须遵循 Apollo 行为准则。请注意,已解决或作答的评论可能会被移除。
你必须拥有 GitHub 账户才能在此留言。还没有账户? 请在我们的 Odyssey 论坛中发帖。