0%

Apollo入门引导(零):介绍

关于 How to GraphQL 的基础和进阶系列翻译已完成,下面继续翻译 Apollo 的官网入门引导

开始学习如何使用 Apollo 构建全栈应用。

Apollo 入门引导 - 目录:

  1. 介绍
  2. 构建 schema
  3. 连接数据源
  4. 编写查询解析器
  5. 编写变更解析器
  6. 连接 Apollo Studio
  7. 创建 Apollo 客户端
  8. 通过查询获取数据
  9. 通过变更修改数据
  10. 管理本地状态

欢迎!本教程将指导如何使用 Apollo 平台,构建由 GraphQL 驱动的全栈应用程序。

我们希望可以使用 Apollo 构建可用于生产环境的应用程序,因此跳过 “Hello World” ,转而使用更接近“真实世界”的示例,包括身份验证,分页,测试等。

准备好了吗?一起深入 Apollo 吧!

将要建立的应用

在本教程中将构建一个交互式的应用,为即将到来的 SpaceX 发射预留席位。将其视为太空旅行的爱彼迎(Airbnb)!感谢 SpaceX-API提供的所有真实数据。

下面是完成后应用的外观:

该应用包含以下页面:

  • 登录页
  • 即将的火箭发射列表页
  • 每次火箭发射的详情页
  • 用户简介页
  • 购物车页面

要完成这些页面,应用的数据图将连接到以下两个数据源:REST API 和 SQLite 数据库。(不用担心,你不需要熟悉这些技术就可以完成本教程)

如前所述,我们希望该示例类似于真实的 Apollo 应用程序,因此还添加了常见功能,例如身份验证,分页和状态管理。

前提条件

本教程假定你熟悉 JavaScript/ES6 和 React。如果需要复习 React,建议阅读官方教程

使用 React 来构建前端不是使用 Apollo 平台的唯一方式,但它是 Apollo 支持的主要前端框架。如果使用其他框架(例如 Angular 或 Vue),仍然可以应用本教程的概念。

系统要求

在开始之前,请确保已安装以下组件:

  • Node.jsv8.x 或更高版本
  • npmv6.x 或更高版本
  • gitv2.14.1 或更高版本

建议使用 VS Code 编辑器(非必需),因为可以使用 Apollo 的 VS Code 扩展。

克隆示例应用

现在开始!从自己的开发目录中,克隆这个仓库

1
git clone https://github.com/apollographql/fullstack-tutorial.git

仓库包含两个顶层目录:startfinal。在本教程中,将在 start 中编辑文件,最后文件将与在 final 中匹配已完成的应用。

每个顶层目录包含两个子目录:serverclient。我们将首先在 server 目录中写代码。如果你已经对构建 graph API 非常熟悉,并且想跳到 client 部分,直接看本教程的后半部分。

需要帮助?

有时,学习新技术会令人困顿,时不时被卡住!如果发生这种情况,建议加入Apollo Spectrum 社区并在相关频道(#apollo-server#apollo-client)中发布问题,寻求友好的开发者帮助。

如果对本教程中的任何内容看起来有疑问或错误,希望你能提供反馈!单击页面右侧的Edit on GitHub链接以打开新的链接,或在仓库中 open 一个 issue


前端记事本,不定期更新,欢迎关注!


👆 全文结束,棒槌时间到 👇