什么是 apollo-starter-kit？
Apollo Starter Kit 是一个基于 Apollo GraphQL 的快速启动器，它提供了一个现成的开箱即用的项目模板，集成了一些常用的前端框架（如 React、Vue），并且已经配置好了 Apollo 服务器和客户端。
使用 Apollo Starter Kit 可以方便快捷地开发 GraphQL 应用程序，避免一些重复性工作和架构决策，同时也可以保证项目的结构和质量。
安装
在安装 apollo-starter-kit 之前，我们需要先安装 Node.js 和 npm。
安装完 Node.js 和 npm 后，我们可以使用以下命令全局安装 apollo-starter-kit：
npm install -g apollo-starter-kit
快速开始
安装完成后，我们可以使用以下命令创建一个新的项目：
apollo-starter-kit new my-project
创建过程中，我们需要选择以下相关参数：
- 选择使用的前端框架（React/Vue）
- 是否使用 TypeScript
- 是否使用 eslint
- 是否使用 prettier
- GraphQL API 的 url
创建完毕后，我们可以使用以下命令启动项目：
cd my-project npm start
打开浏览器，访问 http://localhost:3000 即可看到项目的首页。
使用示例
以下是一个简单的示例代码，展示了如何在 React 组件中使用 Apollo Client 发送 GraphQL 查询请求：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- -------- - ---- -----------------
----- --------- - ----
----- -
----- -
-----
------
-
-
--
-------- ---------- -
----- - -------- ------ ---- - - --------------------
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ -
----
---------------------- -- -
--- -----------------
----------------------------- -- -------------
-----
---
-----
--
-在这个示例中，我们定义了一个名为 GET_BOOKS 的 GraphQL 查询，并将其传递给 useQuery 函数。useQuery 函数会在组件挂载时发送查询请求，并返回查询结果。我们可以根据 loading、error 和 data 等属性来判断查询状态，并在页面上展示不同的内容。
总结
通过本教程，我们了解了 apollo-starter-kit 的基本使用方法，以及如何在 React 组件中使用 Apollo Client 进行 GraphQL 查询。通过使用 apollo-starter-kit，我们可以大大节省开发时间，并且保证项目的结构和质量。同时，掌握使用 Apollo Client 发送 GraphQL 查询的技能也会在未来的前端开发中大有裨益。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005529281e8991b448d008e