Сервисы Angular2 и преобразователи маршрутов с GraphQL

Я пытаюсь использовать Angular2 с GraphQL через Apollo-Client. Я следил за документацией, и вроде все работает нормально. Однако в документации объясняется только, как подключиться к GraphQL из компонентов. Нет информации о том, как использовать сервисы для вызовов сервера или, что еще более важно для меня, как использовать преобразователи маршрутов Angular2 с запросами Apollo или watchQuery.

Я нашел решение о том, как перенести эту логику на службу с помощью запроса Apollo, и, похоже, он работает, однако я не могу заставить его работать с методом Apollo watchQuery. У кого-нибудь есть идеи о возможном решении?

Или, может быть, мой подход к перемещению вызовов GraphQL в сервисы и использование резолверов неверен и логику GraphQL следует просто оставить в компонентах?


person Marcin    schedule 07.12.2016    source источник
comment
Вы когда-нибудь находили решение этой проблемы? Мы сталкиваемся с той же проблемой.   -  person Brian    schedule 15.02.2017
comment
К сожалению, я не нашел решения для перемещения watchQuery'ов в сервисы и преобразователи маршрутов, но, с другой стороны, я нашел решение для перемещения всех query'ов в эти классы. Допустим, временно я также обнаружил, что watchQuery в моем случае не нужен. Если вы хотите, я могу показать вам несколько примеров кода, представляющих решение для перемещения запросов к службам и преобразователю. ??   -  person Marcin    schedule 15.02.2017
comment
Если бы вы могли предоставить несколько примеров кода, это было бы здорово! Спасибо за ответ!   -  person Brian    schedule 15.02.2017


Ответы (1)


Как я уже упоминал в комментарии, я нашел решение для перехода к 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>>, но из-за подписок / отписок я считаю, что представленное решение более удобно.

person Marcin    schedule 15.02.2017
comment
Кажется, так оно и было задумано, не так ли? См. Здесь: github.com/apollographql/apollo-angular/issues/280 - также, почему вы хотите использовать watchQuery vs query? - person Sammy; 10.06.2017