使用 GraphQL 的 Angular2 服务和路由解析器
Angular2 services and route resolvers with GraphQL
我正在尝试通过 Apollo-Client 将 Angular2 与 GraphQL 结合使用。我按照文档进行操作,一切似乎都正常。但是文档只解释了如何从组件连接到 GraphQL。没有关于如何使用服务器调用服务的信息,也没有关于如何将 Angular2 路由解析器与 Apollo 查询或 watchQuery 一起使用对我来说更重要的信息。
我找到了一个关于如何使用 Apollo 查询将此逻辑移动到服务的解决方案,它似乎可以工作,但是我无法使用 Apollo watchQuery 方法让它工作。有人对可能的解决方案有任何想法吗?
或者我将 GraphQL 调用转移到服务和解析器使用的方法是错误的,GraphQL 逻辑应该简单地留在组件中?
正如我在评论中提到的,我找到了一个解决方案,可以将 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
}
}
如果您不想通过解析器使用查询,您当然可以从组件中调用所需的方法并订阅它们。也有可能订阅服务和 return 普通 objects/arrays 而不是 Observable<ApolloQueryResult<T>>
但由于 subscriptions/unsubcriptions 我认为提出的解决方案更方便。
我正在尝试通过 Apollo-Client 将 Angular2 与 GraphQL 结合使用。我按照文档进行操作,一切似乎都正常。但是文档只解释了如何从组件连接到 GraphQL。没有关于如何使用服务器调用服务的信息,也没有关于如何将 Angular2 路由解析器与 Apollo 查询或 watchQuery 一起使用对我来说更重要的信息。
我找到了一个关于如何使用 Apollo 查询将此逻辑移动到服务的解决方案,它似乎可以工作,但是我无法使用 Apollo watchQuery 方法让它工作。有人对可能的解决方案有任何想法吗?
或者我将 GraphQL 调用转移到服务和解析器使用的方法是错误的,GraphQL 逻辑应该简单地留在组件中?
正如我在评论中提到的,我找到了一个解决方案,可以将 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
}
}
如果您不想通过解析器使用查询,您当然可以从组件中调用所需的方法并订阅它们。也有可能订阅服务和 return 普通 objects/arrays 而不是 Observable<ApolloQueryResult<T>>
但由于 subscriptions/unsubcriptions 我认为提出的解决方案更方便。