4. 使用 rover dev 进行本地开发
4m

概述

迫不及待想要将厨具数据直接连接到食谱中了？首先，让我们确保我们已经做好本地开发的准备了。

在本课中，我们将

  • 复习 开发工具包 提供的内容
  • 使用rover dev 进行本地开发，并使用我们的

GraphOS 超级图谱开发工具包

提供了一个 超级图谱开发工具包，它可以帮助开发人员快速轻松地构建和使用 和 架构。

我们已经开始使用 开发工具包的某些部分了！

Sandbox 是这样一种工具， 的一种特殊模式，它为我们提供了 Explorer（ IDE，我们一直在使用它来构建并针对我们本地运行的），一个架构参考、以及差异。

虽然你没有自己创建它们，但recipes和kitchenware 是使用rover 模板自举的，提供了一个用于 和 JavaScript 的起点。

注意：好奇其他用于不同语言自举新的模板吗？在 Apollo 文档中查看rover 模板。

我们的开发工具包的最后一块是rover dev。

使用 rover dev

rover dev让我们启动一个 本地 ——就在你的电脑上！——它可以在一个或多个 中进行。每个子图都可以本地或远程运行。在我们的本地开发环境中，它是一个 ！在我们将其发布到 之前，这让我们实施和测试更改。

要开始，我们需要的是 recipes 正在运行。如果你还没这么做，那么请通过导航到你的存储库副本并运行 npm run dev来本地启动 recipes 。

任务！

接下来，让我们启动第一个 rover dev 进程。这将启动本地 ，我们希望它使用我们本地运行的 recipes 服务器作为 中的第一个 。

rover dev需要以下参数：

rover dev \
  --name {SUBGRAPH NAME} \
  --url {ROUTING URL} \
  --schema {SCHEMA FILE PATH}

Schema 文件参数是可选的。如果未提供 Schema 文件，将使用对的。当我们稍后添加kitchenware 时，我们将看到一个示例。

启动第一个（主）rover dev 进程

让我们尝试一下！打开一个新的终端窗口。导航至recipes 目录。然后，使用相应的值运行rover dev命令。

rover dev \
  --name recipes \
  --url https://127.0.0.1:4001 \
  --schema ./schema.graphql

运行后，我们将获得以下输出

⚠️  Do not run this command in production! ⚠️  It is intended for local development.
🛫 starting a session with the 'recipes' subgraph
🎶 composing supergraph with Federation v2.3.1
🚀 your supergraph is running! head to https://127.0.0.1:4000 to query your supergraph
👀 watching ./schema.graphql for changes

真棒，看起来我们的正在https://127.0.0.1:4000处运行。我们来查看一下！

注意：默认情况下，rover dev在端口 4000 上运行。如果你希望在不同的端口上运行，你可以添加附加标志--supergraph-port（或-p）并将其设置为不同的值。只需确保不使用端口 4001，因为那是recipes 的运行位置！

在浏览器中，导航至https://127.0.0.1:4000。我们将看到 Sandbox 已连接至端点，随时准备对我们的本地进行。

在文档面板中，我们可以看到从我们的 中类似的熟悉 recipes 。测试一个 以获取一个随机配方。

query GetRandomRecipe {
  randomRecipe {
    id
    name
    cookingTime
    prepTime
    servings
    instructions
    readyTime
    ingredients {
      text
    }
  }
}

我们拿到了我们的配方数据！ 🎉

此第一个 rover dev 进程也是我们的 主 rover dev 进程。它负责运行 。如果我们停止此进程，超图也会停止在本地运行！

启动第二个 rover dev 进程

此时可以添加 kitchenware 到组合中！此子图以远程方式托管，因此 rover dev 命令参数会略有不同。此时，我们将忽略 schema 文件路径； 会使用 来获取所需的所有详细信息。

打开一个新的终端窗口。如果您使用的是 VS Code，我们建议在拆分屏幕视图中将其打开，以便两个 rover dev 进程并排显示。

让我们运行此命令

rover dev \
 --name kitchenware \
 --url https://poetic-plates-kitchenware-api.herokuapp.com/ \

注意：如果您用第一个 rover dev 命令使用了其他 端口，请确保用相同的 端口运行此命令！这可确保两个进程能够相互通信。

运行此命令后，我们应该得到以下输出

WARN: if you would like to watch '--schema ./schema.graphql' for changes instead of introspecting every second, re-run this command with the '--schema ./schema.graphql' argument
👂 polling https://poetic-plates-kitchenware-api.herokuapp.com/ every 1 second
🐤 adding the 'kitchenware' subgraph to the session
✅ successfully composed after adding the 'kitchenware' subgraph

请注意第一行指示 rover dev 使用 ，而不是监视本地文件中的更改。

如果您已将两个终端并排显示，您可能还注意到第一个 rover dev 进程具有两行附加内容：

🎶 composing supergraph with Federation v2.3.1
✅ successfully composed after adding the 'kitchenware' subgraph

添加新的 顺利完成！我们刚才做的事情相当于我们在第 3 课中使用 Studio 添加 kitchenware 时所做的事情，只不过是在本地！

当我们返回 https://127.0.0.1:4000上时，我们可以看到属于 kitchenware 的新 已添加。我们可以执行与上一课相同地 ，以对一切的平稳运行进行双重检查。

query SkilletAndRecipes($name: String) {
  cookware(name: $name) {
    name
    description
    cleaningInstructions
  }
  recentlyAddedRecipes {
    name
  }
}

在 变量部分中：

{
  "name": "cast iron skillet"
}

运行该查询并...获得数据！🎉可以确认工作室中返回了与沙盒中相同的数据。

现在，我们可以随意对 recipes 执行更改，并亲自看看 如何处理它们。我们甚至可以构建 一个全新的子图（也许是食谱手册？厨师信息？在哪里找到最佳配料？）并将其添加到我们本地的 。

这是供你探索的游乐场，可以用于测试新概念，构想新特性，同时这一切都不会影响生产 ！

实践

rover dev 不执行以下哪一项操作？

关键要点

  • 开发套件包括以下内容：沙盒，rover template 和 rover dev。
  • rover dev 允许我们在 本地 启动，它可以跨一个或多个 执行。
  • 为了使用 rover dev，我们需要每个 的名称、运行其的 URL 以及（可选）架构文件的路径。如果没有提供架构文件， 将在子图上使用 。
  • 我们可以向我们本地添加任意多个 ，使用 rover dev。

接下来

我们拥有开始进行更改所需的一切！让我们将重点转移回连接菜谱和它所使用炊具之间的数据的梦想 。为此，我们需要深入了解 架构以及 如何处理跨 的协调。

上一个

分享您对本课程的问题和评论

本课程目前处于

Beta 版
.您的反馈有助于我们改进！如果您遇到问题或感到困惑，请告诉我们，我们会帮助您。所有评论都是公开的，并且必须遵循 Apollo 行为准则。请注意，已解决或已处理的评论可能会被删除。

您需要一个 GitHub 帐户才能在下方发帖。没有吗？ 改为在我们的 Odyssey 论坛中发帖。