我假设你们中的大多数人已经听说过 Gatsby，并且至少大致了解它基本上是 React 网站的静态网站生成器。 它通常按以下方式运行
- 数据源 → 从任何地方提取数据。
- 构建 → 使用 React 和 GraphQL 生成您的网站。
- 部署 → 将网站发送到任何静态网站主机。
这通常意味着您可以从任何可识别的来源获取数据——CMS、Markdown、文件系统和数据库，仅举几例——通过 GraphQL 管理数据以构建您的网站，最后将您的网站部署到任何静态 Web 主机（例如 Netlify 或 Zeit）。
在本文中，我们关注的是构建过程，该过程由 GraphQL 提供支持。 这是管理数据的部分。 与您通常需要发送匿名数据来测试端点的传统 REST API 不同，GraphQL 将您的 API 整合到一个自文档化的 IDE 中。 使用此 IDE，您可以执行 GraphQL 操作（例如查询、变异和订阅），以及查看您的 GraphQL 架构和文档。
GraphQL 内置了一个 IDE，但是如果我们想要更强大的功能呢？ 这就是 GraphQL Playground 的用武之地，我们将逐步介绍从默认 IDE 切换到 GraphQL Playground 以使其与 Gatsby 一起使用的步骤。
GraphiQL 和 GraphQL Playground
GraphiQL 是 GraphQL 用于探索 GraphQL 操作的默认 IDE，但您可以切换到其他工具，例如 GraphQL Playground。 两者都有各自的优势。 例如，GraphQL Playground 本质上是 GraphiQL 的一个包装器，但包含其他功能，例如
- 交互式多列架构文档
- 自动架构重新加载
- 支持 GraphQL 订阅
- 查询历史记录
- HTTP 标头的配置
- 选项卡
- 可扩展性（主题等）
选择 GraphQL Playground 或 GraphiQL 最有可能取决于您是否需要使用这些附加功能。 没有严格的规则会让您编写更好的 GraphQL 操作，或构建更好的网站或应用程序。
这篇文章并非旨在让您倾向于一方而非另一方。 我们在这篇文章中特别关注 GraphQL Playground，因为它不是默认的 IDE，并且在某些情况下，您可能需要它提供的附加功能，并且需要进行设置以使其与 Gatsby 一起使用。 因此，让我们深入研究并从头开始设置一个新的 Gatsby 项目。 我们将集成 GraphQL Playground 并为项目配置它。
设置 Gatsby 项目
要设置一个新的 Gatsby 项目，我们首先需要安装 gatsby-cli。 这将为我们提供可以在终端中使用的 Gatsby 特定命令。
npm install -g gatsby-cli现在，让我们设置一个新站点。 我决定将此示例命名为“gatsby-playground”，但您可以根据需要命名它。
gatsby new gatsby-playground让我们导航到它安装的目录。
cd gatsby-playground最后，启动我们的开发服务器。
gatsby develop在浏览器中转到 http://localhost:8000 以查看项目的起始页面。 您的 Gatsby GraphQL 操作将位于 http://localhost:8000/___graphql。
此时，我认为值得一提的是，有一个 GraphQL Playground 的桌面应用程序。 您可以使用 URL 端点 localhost:8000/___graphql 访问您的 Gatsby GraphQL 操作，而无需进一步阅读本文。 但是，我们希望动手实践，并在幕后玩得开心！
Gatsby 的环境变量
还在吗？ 很好。 继续。
由于我们不会依赖桌面应用程序，因此我们需要进行一些环境变量设置。
环境变量 是专门用于在不同环境中自定义网站行为的变量。 这些环境可能是网站处于活动开发状态时，或者可能是在网站上线并可供全世界查看时。 我们可以根据需要创建任意数量的环境，并为每个环境定义不同的环境变量。
详细了解 Gatsby 中的环境变量。
Gatsby 支持两种环境：开发和生产。 要设置开发环境变量，我们需要在项目的根目录中有一个 .env.development 文件。 生产环境也是类似的，但文件名为 .env.production。
要切换这两个环境，我们需要以跨平台兼容的方式设置环境变量。 让我们在项目的根目录中创建一个 .env.development 文件。 在这里，我们为变量设置键值对。 键将为 GATSBY_GRAPHQL_IDE，值为 playground，如下所示
GATSBY_GRAPHQL_IDE=playground在 JavaScript 中访问环境变量
在 Gatsby 中，我们的环境变量仅在构建时或 Node.JS 运行时（我们将其称为运行时）可用。 由于变量是在构建时在客户端加载的，因此我们需要在运行时动态使用它们。 重要的是，每次修改这些变量中的任何一个时，我们都需要重新启动服务器或重建网站。
要将环境变量加载到我们的项目中，我们需要安装一个包
yarn add env-cmd --dev // npm install --save-dev env-cmd有了它，我们将 package.json 中的开发脚本更改为以下内容
"develop": "env-cmd --file .env.development --fallback gatsby develop"开发脚本指示
env-cmd包从自定义环境变量文件（在本例中为 .env.development）加载环境变量，如果找不到，则回退到.env（如果您有，所以如果您觉得有必要，请在项目的根目录中创建一个.env文件，其内容与.env.development相同）。
就是这样！ 但是，嘿，请记住重新启动服务器，因为我们更改了变量。
yarn start // npm run develop如果您刷新浏览器中的 http://localhost:8000/___graphql，您现在应该会看到 GraphQL Playground。 酷吗？ 酷！
这就是我们让 GraphQL Playground 与 Gatsby 一起工作的方式！
这就是我们从 GraphQL 的默认 GraphiQL IDE 切换到 GraphQL Playground 的方式。 正如我们之前所述，是否进行切换的决定取决于您的项目是否需要 GraphQL Playground 提供的附加功能。 再次强调，我们基本上是在使用一个在 GraphiQL 基础上添加更多功能的包装器。
资源
以下是一些网络上的其他文章，可帮助您开始使用 Gatsby，并进一步熟悉 GraphiQL、GraphQL Playground 和环境变量。