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

时间:2016-12-07 16:41:05

标签: angular graphql apollo apollostack

我正在尝试通过Apollo-Client将Angular2与GraphQL一起使用。我遵循文档,一切似乎都很好。但是,文档仅说明了如何从组件连接到GraphQL。没有关于如何使用服务器进行服务器调用的信息,或者对于我如何使用带有Apollo查询或watchQuery的Angular2路由解析器更重要的信息。

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

或许我将GraphQL调用移动到服务和解析器的使用方法是错误的,GraphQL逻辑应该只是放在组件中?

1 个答案:

答案 0 :(得分:3)

正如我在评论中提到的,我找到了一个解决方案,可以转移query到服务或解析器,但watchQuery'仍然没有运气(但我也发现它们并不是真的我申请所必需的。)

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

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

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>>,但由于订阅/取消订阅,我认为所提出的解决方案更方便。