Angular & gql.tada でGraphQL APIを叩く

AngularでGraphQLのAPIを叩きたかったので実装してみました。
GraphQLのコード補完、コード生成はgql.tadaを使ってます

AngularのTypeSafeなGraphQLクライアントのコード

gql.tadaはTypedDocumentNodeを出力してくれるので、
それを想定してタイプセーフになるようクライアントを実装しました。

https://github.com/monakamon/gql-tada-angular-sample/blob/main/src/app/services/graphql-client.ts

GraphQLクライアントの呼び出しコード

Graphql Pokemon APIを叩いてみました。
gql.tadaの恩恵でGraphqlスキーマのコード補完が効いて便利です。

https://github.com/monakamon/gql-tada-angular-sample/blob/main/src/app/app.component.ts

ソースコード