引用实体 - GraphQL 教程 - Apollo GraphQL 中文

12. 引用实体

概述

让我们回到如何连接数据之间的难题子图. 我们将处理架构中缺少的部分之一： Review.location 字段.

在本课中，我们将

学习如何在子图中将实体作为返回类型进行引用，方法是实现 Review.location 字段

将 `Location` 实体作为返回类型

我们希望使用 Location 实体作为 Review.location 字段的返回类型，所以让我们仔细看看如何做到这一点。

✏️ 将 `Review.location` 字段添加到架构中

打开 subgraph-reviews/reviews.graphql 文件。
让我们添加一个新的字段，名为 location，它应该返回一个 Location 类型。
subgraph-reviews/reviews.graphql
type Review {
id: ID!
"Written text"
comment: String
"A number from 1 - 5 with 1 being lowest and 5 being highest"
rating: Int
"The location the review is about"
location: Location
}

type Location @key(fields: "id", resolvable: false) {
id: ID!
}
我们可以测试我们的更改，并在 reviews 子图中打开 Sandbox，地址为 https://127.0.0.1:4002. 我们应该看到新的 location 字段在 latestReviews 下显示。
studio.apollographql.com/sandbox/explorer
让我们尝试运行一个查询来测试我们新的字段. 我们将查询 latestReviews，并包括 id、comment 和 rating 字段. 接下来，我们将包括新的 location 字段及其 id. 让我们还给操作一个描述性名称： GetLatestReviewsAndLocations。
query GetLatestReviewsAndLocations {
latestReviews {
id
comment
rating
location {
id
}
}
}

当我们提交查询时，我们可以看到我们获得了 null 作为每个 location 的值！

{
  "data": {
    "latestReviews": [
      {
        "id": "rev-8",
        "comment": "This is simply unbelievable! It's the perfect solution for our business. Really good. I don't always clop, but when I do, it's because of planet",
        "rating": 5,
        "location": null
      },
      {
        "id": "rev-9",
        "comment": "Planet is exactly what our business has been lacking. It's incredible. If you want real marketing that works and effective implementation - planet's got you covered.",
        "rating": 5,
        "location": null
      },
      {
        "id": "rev-10",
        "comment": "Thanks planet! I was amazed at the quality of planet. Planet did exactly what you said it does.",
        "rating": 5,
        "location": null
      }
    ]
  }
}

这是因为我们尚未定义当查询此字段时，reviews 子图应该返回什么！我们首先需要定义一个相应的解析器函数。

✏️ `Review.location` 解析器函数

正如我们之前看到的，路由器将向 reviews 子图请求 location 的评论所关联的实体表示形式。路由器已经知道如何检索类型名称，但它需要位置的 id 键字段. 让我们设置一下。

打开 subgraph-reviews/resolvers.js 文件。
在 resolvers 对象中，我们将为 Review 类型添加一个新键，以及一个为空的解析器函数，用于 location 字段。
subgraph-reviews/resolvers.js
const resolvers = {
// ...
Review: {
location: () => {
// TODO
},
},
};
将解析器函数的第一个参数命名为 review，它是字段的 parent 对象。
subgraph-reviews/resolvers.js
location: (review) => {
// TODO
},
对于解析器的主体，我们需要返回一个带有位置 id 的实体表示形式。那么我们如何为特定评论检索位置的 id 呢？
为了回答这个问题，我们将快速绕道看看我们从数据源获取的评论数据是什么。跳转到 reviews_data.json 文件，它位于 datasources 目录中。在这里我们可以看到，对于每个评论对象，我们都存储了每个评论所属的 locationId。
subgraph-reviews/datasources/reviews_data.json
{
"id": "rev-1",
"locationId": "loc-1",
"rating": 5,
"comment": "..."
}
这个 locationId 字段精确地指定了我们正在寻找的数据 - 位置的 id！
回到 Reviews.location 解析器中，让我们解构 review 对象并提取 locationId. 然后我们将返回一个新对象，它将 locationId 重新分配为 id. 这将它与 Location 实体的 @key 字段的名称匹配。
subgraph-reviews/resolvers.js
location: ({locationId}) => {
return {id: locationId};
},

检查你的工作

太棒了！现在让我们检查一下所有东西是否正常运行。返回到 Apollo Sandbox 查看 reviews 子图，地址是 https://127.0.0.1:4002。

让我们再次尝试执行查询。这次，我们获得了每个地点的 ID！

query GetLatestReviewsAndLocations {
  latestReviews {
    id
    comment
    rating
    location {
      id
    }
  }
}

响应的形状应与以下对象匹配

{
  "data": {
    "latestReviews": [
      {
        "id": "rev-8",
        "comment": "This is simply unbelievable! It's the perfect solution for our business. Really good. I don't always clop, but when I do, it's because of planet",
        "rating": 5,
        "location": {
          "id": "loc-2"
        }
      },
      {
        "id": "rev-9",
        "comment": "Planet is exactly what our business has been lacking. It's incredible. If you want real marketing that works and effective implementation - planet's got you covered.",
        "rating": 5,
        "location": {
          "id": "loc-3"
        }
      },
      {
        "id": "rev-10",
        "comment": "Thanks planet! I was amazed at the quality of planet. Planet did exactly what you said it does.",
        "rating": 5,
        "location": {
          "id": "loc-4"
        }
      }
    ]
  }
}

现在，我们的 reviews 子图可以解析地点的 id 字段，这正是路由器在跨子图关联数据时所需的。

要解析其余的 Location 字段（例如 name、description 或 photo），我们还需要在模式中添加一项： Location 实体的 引用解析器！

✏️ 实现 `__resolveReference` 解析器

切换到 subgraph-locations 目录，打开 resolvers.js 文件。
在 resolvers 对象中，为 Location 添加一个新键，然后添加一个解析器函数，名为 __resolveReference。
subgraph-locations/resolvers.js
const resolvers = {
Query: {
// ...
},
Location: {
__resolveReference: () => {
// TODO
},
},
};
接下来，让我们设置此函数的参数。
解构第一个参数，它是实体表示对象，并从中提取 id 字段。
同样，解构第二个参数（context）以访问 dataSources 属性。
subgraph-locations/resolvers.js
__resolveReference: ({id}, {dataSources}) => {
// TODO
},
引用解析器函数的主体需要返回所有实体字段，这些字段由此子图定义。为此，我们将使用 LocationsAPI 数据源及其 getLocation 方法。它返回给定 ID 的 Location 对象。
subgraph-locations/resolvers.js
__resolveReference: ({id}, {dataSources}) => {
return dataSources.locationsAPI.getLocation(id);
},
注意：你可以查看 getLocation 方法是如何工作的，方法是查看 subgraph-locations/datasources/LocationsApi.js 文件。

现在我们的 __resolveReference 解析器已设置好，我们可以通过假装自己是路由器并模仿它发送到 locations 子图的请求来测试它！

注意：你不必执行此步骤，因为它有点高级。但如果你有兴趣了解底层的工作原理，那么请继续执行！

我们的 locations 服务器正在运行，在 https://127.0.0.1:4001 中打开 Apollo Sandbox。

在 Variables 面板中添加以下查询变量，以模仿路由器从 reviews 子图传入的引用对象：

{
  "representations": [
    {
      "__typename": "Location",
      "id": "loc-1"
    },
    {
      "__typename": "Location",
      "id": "loc-2"
    }
  ]
}

然后运行以下查询：

query GetLocationNames($representations: [_Any!]!) {
  _entities(representations: $representations) {
    ... on Location {
      name
    }
  }
}

响应应类似于以下对象。

{
  "data": {
    "_entities": [
      {
        "name": "The Living Ocean of New Lemuria"
      },
      {
        "name": "Vinci"
      }
    ]
  }
}

注意：如你所见， Query._entities 字段功能非常强大，可用于恶意目的（任何人都可以模仿请求并检索他们不应该获取的信息）。因此，你的子图不应直接由客户端访问。查看文档以获取更多信息。

就这样，我们的图现在已完全设置好，可以处理引用实体了！

好的，我们应该准备好在 Studio 中查询我们的 超级图，并观察路由器在我们的子图之间关联数据的魔力！

让我们开始构建 GetLatestReviews 查询，我们之前已经与前端团队达成一致。我们将添加我们的字段……等等，我们的 location 字段去哪里了？它不是在 Sandbox 上本地运行得很好吗？发生了什么事？

我们忘记发布我们的 reviews 子图模式的更改到注册表了!

✏️ 使用 Rover 发布子图更改

哎呀！让我们跳到项目根目录下的终端，运行 rover subgraph publish，传入变量用于 reviews 子图。

rover subgraph publish <APOLLO_GRAPH_REF> \
  --name reviews \
  --schema ./subgraph-reviews/reviews.graphql

现在我们应该可以准备好在 Studio 中查询我们的超级图，并观察路由器在我们的子图之间关联数据的魔力了！ ✨

✏️ 检查你的工作是否与路由器一致

让我们在 Studio 中运行这个查询。

query GetLatestReviews {
  latestReviews {
    id
    comment
    rating
    location {
      name
    }
  }
}

注意: 如果你在 location 下方看到红色波浪线字段上的 latestReviews，尝试刷新页面。你可能比超级图组合更快!

我们可以看到我们所有的数据都来自 locations 和 reviews 子图!

我们应该看到这样的响应

{
  "data": {
    "latestReviews": [
      {
        "id": "rev-8",
        "comment": "This is simply unbelievable! It's the perfect solution for our business. Really good. I don't always clop, but when I do, it's because of planet",
        "rating": 5,
        "location": {
          "name": "Vinci"
        }
      },
      {
        "id": "rev-9",
        "comment": "Planet is exactly what our business has been lacking. It's incredible. If you want real marketing that works and effective implementation - planet's got you covered.",
        "rating": 5,
        "location": {
          "name": "Asteroid B-612"
        }
      },
      {
        "id": "rev-10",
        "comment": "Thanks planet! I was amazed at the quality of planet. Planet did exactly what you said it does.",
        "rating": 5,
        "location": {
          "name": "Krypton"
        }
      }
    ]
  }
}

让我们更新我们的模式协议清单，并勾选我们刚刚添加到 Review 类型中的 location 字段。

The FlyBy schema diagram, with pencil icons next to the Location.reviews and Location.overallRating fields

练习

当子图将实体作为返回值引用时，它会提供该实体的表示形式供路由器使用。以下哪些内容包含在该表示形式中？

子图名称模式 context 对象实体的 @key 字段实体的 __typename

以下哪个不是 __resolveReference 函数接受的参数之一？

referenceinfocontextargs

关键要点

我们可以引用一个实体在一个子图中，作为类型字段的返回值。
任何对实体有贡献字段的子图需要为该实体定义一个 __resolveReference 解析器函数。当路由器需要解析从其他子图中对该实体的引用时，就会调用这个解析器。

接下来

很棒的工作！我们的子图不再那么孤立了。我们也快完成检查模式协议中的字段了。在下节课中，我们将贡献最后两个字段： reviewsForLocation 和 overallRating。

分享你关于本节课的问题和评论

你的反馈将帮助我们改进！如果你卡住了或感到困惑，请告诉我们，我们会帮助你。所有评论都是公开的，必须遵守 Apollo 行为准则。请注意，已解决或已处理的评论可能会被删除。

你需要一个 GitHub 帐户才能在下面发布。没有帐户？请在我们的 Odyssey 论坛中发布。

概述

将 Location 实体作为返回类型

✏️ 将 Review.location 字段添加到架构中

✏️ Review.location 解析器函数