Зависание приложения Angular, когда я использую преобразователь и реализацию apollo graphQL

Я пытаюсь получить данные из graphQL, когда перенаправляю свое приложение на компонент. Вот мой код:

Моя служба:

@Injectable()
export class MyService {
    constructor(public apollo: Apollo) {}

    getSomething() {
        return this.apollo.watchQuery({
            query: gql`
            {
                someThing {
                    id,
                    label
                }
            }`
        })
    }
}

Мой решатель:

@Injectable()
export class MyResolver implements Resolve<any> {
    constructor(private myService: MyService) {}
    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any>|Promise<any>|any {
        return this.myService.get()
    }
}

Мой модуль:

const myRoutes: Routes = [
    ...,
    { path: 'deb', component: MyComponent, resolve: {something: MyResolver} }
    ...
]

@NgModule({
        imports: [
            ...
            RouterModule.forChild(myRoutes),
            ...
        ],
        declarations: [
            MyComponent
        ],
        providers: [
            MyResolver,
            MyService
        ],
        exports: [
            ...
        ]
})
export class MyModule {}

А мой компонент пока ничего не делает. Все работало хорошо, прежде чем я добавил этот резолвер. В настоящее время страница не загружается.

Я пробовал несколько вещей на моем резолвере:

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any>|Promise<any>|any {
    return this.myService.get()
}

=> Показать журнал, но страница не загружается.

А вот так :

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any>|Promise<any>|any {
    return "toto"
}

=> Это работает, и страница загружается.

Я протестировал свой запрос graphQL без преобразователя, и он работает. Я почти уверен, что что-то не так с имплементацией apollo и угловым преобразователем. Может ли кто-нибудь мне помочь в этом вопросе?


angular graphql apollo resolver
person Thomas Betous    schedule 15.06.2017    source источник

Ответы (1)


arrow_upward
3
arrow_downward

В интеграции Angular Apollo есть два способа получения данных: watchQuery() и query().

Оба они возвращают Observable с результатом, но между ними есть существенная разница.

watchQuery () возвращает Observable и после передачи данных не завершается. Он по-прежнему открыт для новых данных, поэтому при обновлении магазина новый результат попадает в подписку.

apollo.watchQuery(options).subscribe({
    next: (data) => console.log('data', data),
    complete: () => console.log('off');
});

// You get:
data [Object object]
data [Object object]
data [Object object]
...

query () Возвращает Observable, но завершается после передачи данных.

apollo.query(options).subscribe({
    next: (data) => console.log('data', data),
    complete: () => console.log('off');
});

// You get:
data [Object object]
off

Подводя итог: маршрутизатор ждет завершения Observable, но этого не происходит.

person Kamil Kisiela    schedule 15.06.2017