Apollo 沙箱

Apollo 沙箱是专门用于GraphOS Studio本地开发的一种特殊模式。沙箱通过 introspection加载正在运行的GraphQL 服务器的 schema，而不是从 Apollo 注册表中获取已发布 schema。

沙箱提供访问以下GraphOS Studio功能：

• 探索器
• Schema 参考
• Schema 检查以及对已注册图谱的 diff（针对已登录用户）

您还可以在没有 Apollo 账户的情况下离线使用沙箱。您还可以将沙箱嵌入您的个人网站。

概述视频

连接到 GraphQL 服务器

当您打开沙箱时，它会自动尝试连接到运行在GraphQL 服务器https://127.0.0.1:4000上的。您可以使用探索器顶部的框将此 URL 更改为任何由您的浏览器可访问的本地或远程GraphQL端点：

您还可以通过提供URL 参数来更改默认端点。

1
https://flyby-locations-sub.herokuapp.com/

模式差异

如果您从沙箱登录到GraphOS Studio，您可以将您的沙箱模式与GraphOS模式库中您可以访问的任何子图或单实体图进行比较。

从沙箱，从左侧导航面板打开模式差异页面。然后使用下拉菜单选择任何可访问的图和变种进行比较。

除了在当前页面查看差异外，您还可以单击右上角的运行检查，运行针对所选变种的模式检查。

模式检查

如果您从沙箱登录GraphOS Studio，您可以在您的沙箱模式和任何您在Apollo注册表中可以访问的图之间运行模式检查。

从 沙盒 中打开，然后从左侧导航栏打开 检查 页。出现一个对话框，您可以从中选择要对其运行检查的组织、图和变体，然后点击 运行检查。检查完成时，沙盒显示结果摘要。要查看 Studio 中的详细结果，请点击 查看详情。

子图检查

您可以在 子图 上运行 subgraph 检查。如果您在与子图一起使用沙盒，可以使用子图下拉列表来选择您想要检查更改的子图。

当您点击 运行检查 时，沙盒首先使用您本地的 子图模式 和其他子图已发布模式执行构建检查。如果 组合 成功，沙盒接着像平常那样执行 操作 检查并显示所有检查的结果。如果组合失败，沙盒不会执行操作检查，并显示组合错误。

离线沙盒

如果您正在查询在 localhost 上运行的 graph，则可以在没有互联网连接的情况下使用沙盒。要这样做，在网络连接状态下至少打开一次您的浏览器中的沙盒。然后您可以使用该浏览器在没有网络的情况下打开沙盒。

重新连接

Sandbox 会自动在您的互联网连接恢复时重新连接。当它这样做时，可能会显示通知，称您的 GraphOS Studio 应用程序版本至少已过期 24 小时。您可以点击通知将所有浏览器打开的 Studio 标签页更新到最新版本。

沙盒中的操作集合

请参阅 本节。

URL 参数

您可以提供 URL 参数来定制页面加载时沙盒的初始状态。这可以在用户从链接打开沙盒时更快地开始使用沙盒。

以下 URL 参数被支持

例如，以下 URL 设置了所有支持的参数

https://studio.apollographql.com/sandbox/explorer?endpoint=https://127.0.0.1:4200&document=query hello($name: String!) { hello(name: $name)}&variables={"name": "Sandbox User"}&headers={"Cache-Control": "no-cache"}

上述示例URL以以下初始状态打开了Sandbox

嵌入式Sandbox

您可以在自己的网站上嵌入式Sandbox。这可以用于与开发环境中的GraphQL端点或具有CORS限制的端点交互。

设置

1. 打开Sandbox。

2. 在浏览器的设置选项卡下，找到嵌入式Sandbox并点击复制代码片段。会出现一个包含选项和代码片段的对话框。

3. 在对话框中，使用选项卡选择适用于您的用例的代码片段

   • 对于可以使用npm install@apollo/sandbox包的React应用程序，请使用React
   • 对于可以使用npm install@apollo/sandbox包的非ReactJavaScript应用程序，请使用JavaScript
   • 要使用CDN上托管的嵌入式Sandbox，请使用已构建文件

4. 点击复制来复制片段，然后将其粘贴到您的HTML代码中。

选项

嵌入式Sandbox对象接受一个选项对象，其结构如下（以下详细描述了每个选项）：

1
{
2
  initialEndpoint: 'https://127.0.0.1:4000',
3
  handleRequest: (endpointUrl, options) => {
4
    return fetch(endpointUrl, {
5
      ...options,
6
      headers: {
7
          ...options.headers,
8
          authorization: `token ${token}`
9
      },
10
    })
11
  },
12
  hideCookieToggle: true,
13
}

以下是可以包含在传递给new EmbeddedSandbox的实例中的可选选项：

initialState选项

以下是可以包含在传递给 new EmbeddedSandbox 构造函数的 initialState 选项中的 字段

1
initialState: {
2
  document: `
3
  query ExampleQuery {
4
    books {
5
      title
6
    }
7
  }
8
`;
9
}

1
initialState: {
2
  variables: {
3
    userID: "abc123"
4
  },
5
}

1
initialState: {
2
  headers: {
3
    authorization: "Bearer abc123";
4
  }
5
}

1
initialState: {
2
  collectionId: 'abc1234',
3
  operationId: 'xyz1234'
4
}

1
initialState: {
2
  pollForSchemaUpdates: false;
3
}

1
initialState: {
2
  sharedHeaders: {
3
    authorization: "Bearer abc123";
4
  }
5
}