Better flow of types

Author: PowerKiKi

packages/demo/src/app/pages/movie/movie-page.component.ts

@@ -2,7 +2,7 @@ import { Apollo, gql } from 'apollo-angular';
 import { Observable } from 'rxjs';
 import { filter, map } from 'rxjs/operators';
 import { AsyncPipe } from '@angular/common';
-import { Component, OnInit } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 
 interface Character {
@@ -21,6 +21,10 @@ interface Query {
   film: Film;
 }
 
+interface Variables {
+  id: string;
+}
+
 @Component({
   selector: 'author-page',
   template: `
@@ -43,21 +47,13 @@ interface Query {
 })
 export class MoviePageComponent implements OnInit {
   film$!: Observable<Film>;
-
-  constructor(
-    private readonly apollo: Apollo,
-    private readonly route: ActivatedRoute,
-  ) {}
+  private readonly apollo = inject(Apollo);
+  private readonly route = inject(ActivatedRoute);
 
   ngOnInit() {
     this.film$ = this.apollo
-      .watchQuery<
-        Query,
-        {
-          id: string;
-        }
-      >({
-        query: gql`
+      .watchQuery({
+        query: gql<Query, Variables>`
           query FilmCharacters($id: ID) {
             film(id: $id) {
               title

packages/demo/src/app/pages/movies/movies-page.component.ts

@@ -2,7 +2,7 @@ import { Apollo, gql } from 'apollo-angular';
 import { Observable } from 'rxjs';
 import { filter, map } from 'rxjs/operators';
 import { AsyncPipe } from '@angular/common';
-import { Component, OnInit } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { RouterLink } from '@angular/router';
 
 interface Film {
@@ -16,6 +16,8 @@ interface Query {
   allFilms: { films: Film[] };
 }
 
+type Variables = Record<PropertyKey, never>;
+
 @Component({
   selector: 'movies-page',
   template: `
@@ -37,13 +39,12 @@ interface Query {
 })
 export class MoviesPageComponent implements OnInit {
   films$!: Observable<Film[]>;
-
-  constructor(private readonly apollo: Apollo) {}
+  private readonly apollo = inject(Apollo);
 
   ngOnInit() {
     this.films$ = this.apollo
-      .watchQuery<Query>({
-        query: gql`
+      .watchQuery({
+        query: gql<Query, Variables>`
           query AllFilms {
             allFilms {
               films {