5 个值得学习的 JavaScript GraphQL API 示例

SWAPI GraphQL 包装器

TOSKA 会议的 GraphQL API

形而上学

SpaceX Land API

Rick and Morty API

许多公司从向开发者提供服务的 REST API 转型，（也）公开了 GraphQL API。Github、Shopify 等公司就是这样做的例子。通常，他们这样做的原因是为了让开发者更容易地查询（或修改）他们实际需要的数据。但是，使用 GraphQL API 与自行构建 GraphQL API 之间存在很大差异。构建 GraphQL API 时，您必须深入研究不同的方法和模式，例如模式优先与代码优先（有关更深入的解释，请参阅本文），或者拥有要连接的数据源。

在这篇博文中，我收集了 5 个 GraphQL API 的示例，它们既有可供实际尝试的 demo，也有包含其源代码的公共仓库。通过这些示例，你不仅可以学习如何构建 GraphQL API，还可以创建一个使用这些 API 的 Web 应用程序，从而了解 GraphQL 前端工具。让我们开始吧！

SWAPI GraphQL 包装器

这个项目封装了流行的星球大战 API (SWAPI)，我在研讨会或创建原型测试新技术时经常使用它。通过使用data-loader等软件包高效地获取数据，并使用aws-serverless-express在无服务器上低成本运行，对于任何想要开始构建 GraphQL API 的人来说，这都是一个很好的例子。此 API 的完整示例可在此处找到。

graphql / swapi-graphql

GraphQL 模式和包装 SWAPI 的服务器。

SWAPI GraphQL 包装器

使用 GraphQL 构建的SWAPI包装器，将其转换为此模式。

用途：

graphql-js - JavaScript GraphQL 运行时。
DataLoader——用于合并和缓存提取。
express-graphql - 提供对 GraphQL 的 HTTP 访问。
aws-serverless-expressexpress-graphql -在 aws lambda 上使用。
GraphiQL - 轻松探索此 GraphQL 服务器。

请尝试一下：http://graphql.org/swapi-graphql

入门

安装依赖项

纱

SWAPI 包装器

SWAPI 包装器位于./swapi。可以使用以下命令进行测试：

纱线测试

本地服务器

本地 Express 服务器位于./server。可以使用以下命令运行它：

yarn build #只有当你改变了一些东西
yarn start

将在http://localhost:8080/ （或类似地址；实际端口号将打印到控制台）打开一个 GraphiQL 实例来探索 API。

在 GitHub 上查看

React 芬兰

会议不仅是学习的好地方，还能以其他方式教会你新东西。React芬兰的组织者已经将其会议网站的 API 代码上传到网上。由于他们也组织过 GraphQL 会议，所以他们知道如何设置 GraphQL API。你可以在这里查看他们的 API ，甚至在参加会议之前就可以开始学习！

ReactFinland / graphql-api

会议的 GraphQL API。

TOSKA 会议的 GraphQL API

我们会议的简单 GraphQL API：

查看查询 API：

NODE_ENV="development" npm start
http://localhost:3000/graphql-2018或http://localhost:3000/calendar-2018.ics（日历）

图像处理

图片会被推送到Cloudinary，并作为我们的图片 CDN。.env如果您想使用图片，请记住进行本地开发设置：

.env

CLOUDINARY_CLOUD_NAME=react-finland
CLOUDINARY_API_KEY=<get from Cloudinary account>
CLOUDINARY_API_SECRET=<get from Cloudinary account>

还要记得在 API 的主机上进行相同的设置。

您可以通过访问图像http://localhost:3000/graphql-2018/images。例如：http://localhost:3000/graphql-2018/images/ken.jpg。

Webhook

Heroku 到 Netlify

API 已使用 webhook 连接到站点，以便每当 API 发生变化时它都会进行构建：

heroku config:set REBUILD_SITES=<Netlify urls separate by comma go here> -a react-finland-api

记得以生产模式运行服务器。这样才能启用站点重建钩子！

在 GitHub 上查看

有艺术感

在免费的在线Artsy 平台上，您可以通过网页和移动设备发现和收藏艺术品。除了深受艺术爱好者喜爱之外，他们还开源了 GraphQL API，为其应用程序提供数据。您可以点击此处，使用暂存数据试用他们的 API，从而清晰地了解其功能。该项目的源代码向您展示了如何设置生产级 GraphQL API 💪。