Angular2 services and route resolvers with GraphQL

Question

I am trying to use Angular2 with GraphQL via Apollo-Client. I followed documentation and everything seems to work fine. However documentation only explains how to connect to GraphQL from the components. There is no information how to use services for server calls or what is even more important for me how to use Angular2 route resolvers with Apollo query or watchQuery.

I found a solution on how to move this logic to service using Apollo query and it seems to work, however I can't get it working with Apollo watchQuery method. Anyone have any idea on the possible solution?

Or maybe my approach to move GraphQL calls to services and usage of resolvers is wrong and GraphQL logic should be simply left in components?

Did you ever find a solution to this? We're running into the same problem. — Brian, Feb 15 '17 at 14:51
Unfortunately I didn't find a solution for moving `watchQuery`'ies to services and route resolvers, but on the other hand I found the solution for moving all the `query`'ies to these classes. Let's say that temporarily I've also found out that `watchQuery` was not necessary for my case. If you want I can show you some code samples, presenting the solution for moving queries to services and resolver. ?? — Marcin, Feb 15 '17 at 14:56
If you could provide some code samples that would be great! Thanks for responding! — Brian, Feb 15 '17 at 15:05

score 6 · Accepted Answer · answered Feb 15 '17 at 15:19

As I mentioned in the comment I found a solution for moving to query'ies to services or resolvers, however still no luck with watchQuery'ies (but I also found that they are not really necessary for my application).

Below I give you some snippets that may be helpful.

I define methods that are responsible for performing queries in my service:

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

Where allItemsQuery is a constant query string:

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

Than in my resolvers I just call the method allItems from the service:

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

And extract route resolved data in my component:

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

Of course if in the routing configuration resolver is called with name items like:

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

If you don't want to use the queries via resolvers you are of course able to call desired methods from the components and there subscribe to them. There is also a possibility to subscribe in the services and return plain objects/arrays instead of Observable<ApolloQueryResult<T>> but due to subscriptions/unsubcriptions I think that the presented solution is more convenient.

It seems this is the way it's designed to work, no? See here: https://github.com/apollographql/apollo-angular/issues/280 -- also, why do you want to use `watchQuery` vs `query`? — Sammy, Jun 10 '17 at 08:16

Angular2 services and route resolvers with GraphQL

1 Answers1