使用 GraphQL 的 Angular2 服务和路由解析器
Posted
技术标签:
【中文标题】使用 GraphQL 的 Angular2 服务和路由解析器【英文标题】:Angular2 services and route resolvers with GraphQL 【发布时间】:2017-04-22 17:07:26 【问题描述】:我正在尝试通过 Apollo-Client 将 Angular2 与 GraphQL 一起使用。我遵循了文档,一切似乎都运行良好。然而,文档只解释了如何从组件连接到 GraphQL。没有信息如何使用服务进行服务器调用,或者对我来说更重要的是如何将 Angular2 路由解析器与 Apollo 查询或 watchQuery 一起使用。
我找到了一个关于如何使用 Apollo 查询将此逻辑移动到服务的解决方案,它似乎可以工作,但是我无法使用 Apollo watchQuery 方法让它工作。有人对可能的解决方案有任何想法吗?
或者也许我将 GraphQL 调用转移到服务和使用解析器的方法是错误的,应该将 GraphQL 逻辑简单地留在组件中?
【问题讨论】:
您找到解决方案了吗?我们遇到了同样的问题。 不幸的是,我没有找到将watchQuery
'ies 移动到服务和路由解析器的解决方案,但另一方面,我找到了将所有 query
'ies 移动到这些类的解决方案.假设我暂时还发现watchQuery
对我的情况不是必需的。如果您愿意,我可以向您展示一些代码示例,展示将查询移动到服务和解析器的解决方案。 ??
如果你能提供一些代码示例那就太好了!感谢您的回复!
【参考方案1】:
正如我在评论中提到的那样,我找到了一个将query
'ies 转移到服务或解析器的解决方案,但是watchQuery
'ies 仍然没有运气(但我也发现它们对于我的应用程序并不是真正必要的)。
下面我给你一些可能有用的sn-ps。
我定义了负责在我的服务中执行查询的方法:
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>>
,但由于订阅/取消订阅,我认为提出的解决方案更方便。
【讨论】:
看起来这就是它的设计方式,不是吗?见这里:github.com/apollographql/apollo-angular/issues/280——还有,你为什么要使用watchQuery
vs query
?以上是关于使用 GraphQL 的 Angular2 服务和路由解析器的主要内容,如果未能解决你的问题,请参考以下文章
Angular2 中的 Apollo 客户端自定义标头和附加变量
如何使用模拟的 graphql API 和外部服务的 GraphQL 端点
如何在服务和指令脚本文件中使用angular2内置日期管道[重复]