私はresolverと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" 
} 

=>これは動作し、ページがロードされます。

私はresolverなしでgraphQLリクエストをテストしています。私は確かに、アポロ・インプレッションと角度リゾルバに何か問題があると確信しています。この問題で誰も助けてくれますか？

Answer 1

Angular Apolloの統合でデータを取得する方法は、watchQuery()とquery()の2つです。

両方とも結果とともに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] 
... 

クエリ（） 観測を返しますが、それは、データを通過した後に完了します。

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

// You get: 
data [Object object] 
off 

要約すると：ルーターはObservableが完了するのを待っていますが、それは起こりません。