关于 How to GraphQL 的基础和进阶系列翻译已完成,下面继续翻译 Apollo 的官网入门引导。
开始学习如何使用 Apollo 构建全栈应用。
Apollo 入门引导 - 目录:
欢迎!本教程将指导如何使用 Apollo 平台,构建由 GraphQL 驱动的全栈应用程序。
我们希望可以使用 Apollo 构建可用于生产环境的应用程序,因此跳过 “Hello World” ,转而使用更接近“真实世界”的示例,包括身份验证,分页,测试等。
准备好了吗?一起深入 Apollo 吧!
将要建立的应用
在本教程中将构建一个交互式的应用,为即将到来的 SpaceX 发射预留席位。将其视为太空旅行的爱彼迎(Airbnb)!感谢 SpaceX-API提供的所有真实数据。
下面是完成后应用的外观:
该应用包含以下页面:
- 登录页
- 即将的火箭发射列表页
- 每次火箭发射的详情页
- 用户简介页
- 购物车页面
要完成这些页面,应用的数据图将连接到以下两个数据源:REST API 和 SQLite 数据库。(不用担心,你不需要熟悉这些技术就可以完成本教程)
如前所述,我们希望该示例类似于真实的 Apollo 应用程序,因此还添加了常见功能,例如身份验证,分页和状态管理。
前提条件
本教程假定你熟悉 JavaScript/ES6 和 React。如果需要复习 React,建议阅读官方教程。
使用 React 来构建前端不是使用 Apollo 平台的唯一方式,但它是 Apollo 支持的主要前端框架。如果使用其他框架(例如 Angular 或 Vue),仍然可以应用本教程的概念。
系统要求
在开始之前,请确保已安装以下组件:
建议使用 VS Code 编辑器(非必需),因为可以使用 Apollo 的 VS Code 扩展。
克隆示例应用
现在开始!从自己的开发目录中,克隆这个仓库:
1 | git clone https://github.com/apollographql/fullstack-tutorial.git |
仓库包含两个顶层目录:start
和 final
。在本教程中,将在 start
中编辑文件,最后文件将与在 final
中匹配已完成的应用。
每个顶层目录包含两个子目录:server
和 client
。我们将首先在 server
目录中写代码。如果你已经对构建 graph API 非常熟悉,并且想跳到 client
部分,直接看本教程的后半部分。
需要帮助?
有时,学习新技术会令人困顿,时不时被卡住!如果发生这种情况,建议加入Apollo Spectrum 社区并在相关频道(#apollo-server
或 #apollo-client
)中发布问题,寻求友好的开发者帮助。
如果对本教程中的任何内容看起来有疑问或错误,希望你能提供反馈!单击页面右侧的Edit on GitHub链接以打开新的链接,或在仓库中 open 一个 issue。
前端记事本,不定期更新,欢迎关注!