Angular 当我使用解析器和 apollo graphQL 实现时应用程序冻结

Question

当我将应用程序路由到组件时，我试图从 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 解析器有问题。谁能帮我解决这个问题？

Answer 1

在Angular Apollo 集成中有两种获取数据的方式，watchQuery() 和query()。

它们都是 return 一个带有结果的 Observable，但它们之间有显着差异。

watchQuery() Returns 一个 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]
...

查询() Returns 一个 Observable，但它在传递数据后完成。

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

// You get:
data [Object object]
off

总结一下：路由器等待 Observable 完成，但它并没有发生。

Angular 当我使用解析器和 apollo graphQL 实现时应用程序冻结

Angular application freeze when I'm using resolver and apollo graphQL implementation

resolver

apollo

graphql

angular