使用 GraphQL 的 Angular2 服务和路由解析器

Question

我正在尝试通过 Apollo-Client 将 Angular2 与 GraphQL 结合使用。我按照文档进行操作，一切似乎都正常。但是文档只解释了如何从组件连接到 GraphQL。没有关于如何将服务用于服务器调用的信息，也没有关于如何将 Angular2 路由解析器与 Apollo 查询或 watchQuery 一起使用对我来说更重要的信息。

我找到了一个关于如何使用 Apollo 查询将此逻辑移动到服务的解决方案，它似乎可以工作，但是我无法使用 Apollo watchQuery 方法让它工作。有人对可能的解决方案有任何想法吗？

或者我将 GraphQL 调用转移到服务和解析器使用的方法是错误的，GraphQL 逻辑应该简单地留在组件中？

Answer 1

正如我在评论中提到的，我找到了移动到 query 的解决方案'ies 到服务或解析器，但仍然没有运气 watchQuery 'ies(但我也发现它们对于我的应用程序来说并不是真正必要的)。

下面我给你一些可能有用的片段。

我定义了负责在我的服务中执行查询的方法:

public allItems(): Observable<ApolloQueryResult<Object>> {
  return this.apollo.query({
    query: allItemsQuery
  });
}

在哪里allItemsQuery是常量查询字符串:

export const allItemsQuery = gql`
  query allItems {
    items {
      id
      name
    }
  }
`;

在我的解析器中，我只是调用方法 allItems来自服务:

 public resolve(route: ActivatedRouteSnapshot): Observable<ApolloQueryResult<Object>> | boolean {
   return this.itemsService.allItems ? this.itemsService.allItems() : false;
 }

并在我的组件中提取路由解析数据:

this.activatedRoute.data.subscribe(data: {items: Item[]}) => {
  console.log(items)
}

当然，如果在路由配置中调用名称为 items 的解析器喜欢:

{
  path: 'items',
  component: ItemsComponent,
  resolve: {
    items: ItemsResolve
  }
}

如果您不想通过解析器使用查询，您当然可以从组件中调用所需的方法并订阅它们。也有可能订阅服务并返回普通对象/数组而不是 Observable<ApolloQueryResult<T>>但由于订阅/取消订阅，我认为所提供的解决方案更方便。