Apollo-AngularのQueryRefとは何か？

Apollo-angularを使用して、サーバーからデータを取得するために
クライアント側の実装を進めていたところ、watchQueryオブジェクトからQueryRefにアクセスしており、QueryRefとは何者？？と思い調べたのでメモしておきます。

Apollo-Angularとは

Angular専用のGraphQL Clientです。
通常のApolloでもデータ連携ができますが、Observableを組み込むことが出来るなどよりAngularに特化して記述することができます。

■ 公式ドキュメント
https://apollo-angular.com/docs/

Queries

watchQueryメゾットを使用して、gqlに記載したidとtitleを読み込みます。

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { Apollo, gql } from 'apollo-angular';

const GET_POSTS = gql`
  query GetPosts {
    posts {
      id
      title
    }
  }
`;

@Component({ ... })
class PostsComponent implements OnInit, OnDestroy {
  loading: boolean;
  posts: any;

  private querySubscription: Subscription;
　　　　constructoer(private apollo: Apollo) {}

  ngOnInit(){
   this.querySubscription = this.apollo.watchQuery<any>({
     query: GET_POSTS
   }).valueChanges
   .subscribe(({ data, loading }) => {
     this.laoding = loading;
     this.data = data.posts;
   });
  }

  ngOnDestory(){
    this.querySubscription.unsibscribe();
  }
}

ここで、watchQueryメゾットからObservableを読み込むvalueChangesイベントを呼び出しています。このwatchQueryを辿って意味ると、QueryRefオブジェクトを呼び出していることが分かります。

ApolloClient<TCacheShape>);
watchQuery<TData, TVariables = EmptyObject>(options: WatchQueryOptions<TVariables, TData>): QueryRef<TData, TVariables>;
query<T, V = EmptyObject>(options: QueryOptions<V, T>): Observable<ApolloQueryResult<T>>;
mutate<T, V = EmptyObject>(options: MutationOptions<T, V>): Observable<FetchResult<T>>;

QueryRefとは

公式ドキュメントによると...

As you know, Apollo.query method returns an Observable that emits a result, just once. Apollo.watchQuery also does the same, except it can emit multiple results. (The GraphQL query itself is still only sent once, but the watchQuery observable can also update if, for example, another query causes the object to be updated within Apollo Client's global cache.)

ApolloClientのwatchQueryメゾットでもObservableを返せますが、RxJS用に使用する以外にも、refetch()など様々なメゾットが格納されています。AngularのObservableで必要なのはsubscribe()のみである為、QueryRefを新たに用意して、valueChangesを格納した様です。

export declare class QueryRef<T, V = EmptyObject> {
    private obsQuery;
    valueChanges: Observable<ApolloQueryResult<T>>;
    ・
    ・
    ・
}

QueryRefをさらに辿ると確かに、valueChangesがありました。これでObservableな値を読み込んでいることが分かりました。