Revamp demo app

packages/apollo-angular/README.md

@@ -60,6 +60,8 @@ of your components to your GraphQL server using the `Apollo` service:
 
 ```ts
 import { Apollo, gql } from 'apollo-angular';
+import { map, Observable } from 'rxjs';
+import { AsyncPipe } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
 
 const GET_DOGS = gql`
@@ -75,14 +77,16 @@ const GET_DOGS = gql`
   selector: 'dogs',
   template: `
     <ul>
-      <li *ngFor="let dog of dogs | async">
-        {{ dog.breed }}
-      </li>
+      @for (dog of dogs | async; track dog.id) {
+        <li>
+          {{ dog.breed }}
+        </li>
+      }
     </ul>
   `,
 })
 export class DogsComponent implements OnInit {
-  dogs: Observable<any>;
+  public dogs!: Observable<any>;
 
   constructor(private readonly apollo: Apollo) {}
 

packages/demo/angular.json

@@ -18,7 +18,7 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:browser-esbuild",
           "options": {
             "outputPath": "dist/demo",
             "index": "src/index.html",
@@ -44,21 +44,12 @@
                   "maximumError": "4kb"
                 }
               ],
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ],
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
-              "sourceMap": true,
-              "namedChunks": true
+              "sourceMap": true
             }
           },
           "defaultConfiguration": "production"
@@ -67,10 +58,10 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "demo:build:production"
+              "buildTarget": "demo:build:production"
             },
             "development": {
-              "browserTarget": "demo:build:development"
+              "buildTarget": "demo:build:development"
             }
           },
           "defaultConfiguration": "development"

packages/demo/src/app/app.component.ts

@@ -1,14 +1,17 @@
 import { Component } from '@angular/core';
+import { RouterLink, RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
   template: `
     <main>
       <header>
-        <h1>Blog</h1>
+        <h1><a routerLink="/">Star Wars</a></h1>
       </header>
       <router-outlet></router-outlet>
     </main>
   `,
+  standalone: true,
+  imports: [RouterOutlet, RouterLink],
 })
 export class AppComponent {}

packages/demo/src/app/app.config.ts

@@ -0,0 +1,14 @@
+import { provideHttpClient } from '@angular/common/http';
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { routes } from './app.routes';
+import { graphqlProvider } from './graphql.provider';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+    provideHttpClient(),
+    graphqlProvider,
+  ],
+};

packages/demo/src/app/app.routes.ts

@@ -0,0 +1,18 @@
+import { Routes } from '@angular/router';
+import { MoviePageComponent } from './pages/movie/movie-page.component';
+import { MoviesPageComponent } from './pages/movies/movies-page.component';
+
+export const routes: Routes = [
+  {
+    path: 'movie',
+    component: MoviesPageComponent,
+  },
+  {
+    path: 'movie/:id',
+    component: MoviePageComponent,
+  },
+  {
+    path: '**',
+    redirectTo: '/movie',
+  },
+];

packages/demo/src/app/graphql.provider.ts

@@ -0,0 +1,22 @@
+import { Apollo, APOLLO_OPTIONS } from 'apollo-angular';
+import { HttpLink } from 'apollo-angular/http';
+import { ApplicationConfig, inject } from '@angular/core';
+import { ApolloClientOptions, InMemoryCache } from '@apollo/client/core';
+
+const uri = 'https://swapi-graphql.netlify.app/.netlify/functions/index';
+
+function apolloOptionsFactory(): ApolloClientOptions<any> {
+  const httpLink = inject(HttpLink);
+  return {
+    link: httpLink.create({ uri }),
+    cache: new InMemoryCache(),
+  };
+}
+
+export const graphqlProvider: ApplicationConfig['providers'] = [
+  Apollo,
+  {
+    provide: APOLLO_OPTIONS,
+    useFactory: apolloOptionsFactory,
+  },
+];

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

@@ -0,0 +1,79 @@
+import { Apollo, gql } from 'apollo-angular';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { AsyncPipe, JsonPipe } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+
+interface Character {
+  id: string;
+  name: string;
+}
+
+interface Film {
+  title: string;
+  characterConnection: {
+    characters: Character[];
+  };
+}
+
+interface Query {
+  film: Film;
+}
+
+@Component({
+  selector: 'author-page',
+  template: `
+    @if (film$ | async; as film) {
+      <h1>Characters seen in {{ film.title }}</h1>
+      <ul>
+        @for (character of film.characterConnection.characters; track character.id) {
+          <li>
+            {{ character.name }}
+          </li>
+        }
+      </ul>
+    } @else {
+      <p>Loading ...</p>
+    }
+    <a routerLink="/movie">Back to movies</a>
+  `,
+  standalone: true,
+  imports: [RouterLink, AsyncPipe],
+})
+export class MoviePageComponent implements OnInit {
+  film$!: Observable<Film>;
+
+  constructor(
+    private readonly apollo: Apollo,
+    private readonly route: ActivatedRoute,
+  ) {}
+
+  ngOnInit() {
+    this.film$ = this.apollo
+      .watchQuery<
+        Query,
+        {
+          id: string;
+        }
+      >({
+        query: gql`
+          query FilmCharacters($id: ID) {
+            film(id: $id) {
+              title
+              characterConnection {
+                characters {
+                  id
+                  name
+                }
+              }
+            }
+          }
+        `,
+        variables: {
+          id: this.route.snapshot.paramMap.get('id')!,
+        },
+      })
+      .valueChanges.pipe(map(result => result.data.film));
+  }
+}