Hack around change detection to wait for data on server to arrive (#1039

) * Hack around change detection to wait for data on server to arrive * style: format * fix: use query instead of watchQuery
Verseghy · Apr 8, 2022 · c569f1e · c569f1e
1 parent 1c1b761
commit c569f1e
Show file tree

Hide file tree

Showing 12 changed files with 47 additions and 37 deletions.
diff --git a/angular.json b/angular.json
@@ -1,8 +1,5 @@
 {
   "$schema": "node_modules/@angular/cli/lib/config/schema.json",
-  "cli": {
-    "analytics": false
-  },
   "version": 1,
   "newProjectRoot": "",
   "projects": {
@@ -155,10 +152,7 @@
             "outputPath": "dist/frontend/server",
             "main": "apps/frontend/server.ts",
             "tsConfig": "apps/frontend/tsconfig.server.json",
-            "externalDependencies": [
-              "@firebase/firestore",
-              "canvas"
-            ]
+            "externalDependencies": ["@firebase/firestore", "canvas"]
           },
           "configurations": {
             "production": {
@@ -171,6 +165,11 @@
               ],
               "sourceMap": false,
               "optimization": true
+            },
+            "dev": {
+              "optimization": false,
+              "sourceMap": true,
+              "extractLicenses": false
             }
           }
         },
@@ -184,6 +183,10 @@
             "production": {
               "browserTarget": "frontend:build:production",
               "serverTarget": "frontend:server:production"
+            },
+            "dev": {
+              "browserTarget": "frontend:build:dev",
+              "serverTarget": "frontend:server:dev"
             }
           }
         },

diff --git a/apps/frontend/src/app/app.component.ts b/apps/frontend/src/app/app.component.ts
@@ -90,7 +90,7 @@ export class AppComponent implements AfterViewInit, OnInit {
   ngAfterViewInit(): void {
     this.router.events.subscribe((event) => {
       if (event instanceof NavigationStart) {
-        window.scrollTo(0, 0)
+        globalThis.window.scrollTo(0, 0)
         this.loaded = false
       } else if (event instanceof NavigationEnd || event instanceof NavigationCancel) {
         this.loaded = true

diff --git a/apps/frontend/src/app/modules/archive/archive.service.ts b/apps/frontend/src/app/modules/archive/archive.service.ts
@@ -45,9 +45,9 @@ export class ArchiveService {
   constructor(private gql: Apollo) {}
 
   getArchives(): Observable<Stats[]> {
-    return this.gql.watchQuery<Result>({
+    return this.gql.query<Result>({
       query: infoQUERY
-    }).valueChanges.pipe(
+    }).pipe(
       map(res => {
         return res.data.archive.info
       }),
@@ -56,13 +56,13 @@ export class ArchiveService {
   }
 
   getDetailedArchives({ year, month }: { year: number; month: number }): Observable<Post[]> {
-    return this.gql.watchQuery<Result>({
+    return this.gql.query<Result>({
       query: postsQUERY,
       variables: {
         year,
         month,
       }
-    }).valueChanges.pipe(
+    }).pipe(
       map(res => {
         return res.data.archive.posts
       }),

diff --git a/apps/frontend/src/app/modules/canteen/services/canteen.service.ts b/apps/frontend/src/app/modules/canteen/services/canteen.service.ts
@@ -40,15 +40,15 @@ export class CanteenService {
     const year: number = now.getFullYear()
     const week: number = getISOWeek(now)
 
-    return this.gql.watchQuery<Result>({
+    return this.gql.query<Result>({
       query: QUERY,
       variables: {
         year1: year,
         year2: year,
         week1: week,
         week2: week + 1,
       }
-    }).valueChanges.pipe(
+    }).pipe(
       take(1),
       map(res => {
         return [res.data.w1, res.data.w2]

diff --git a/apps/frontend/src/app/modules/events/services/request.service.ts b/apps/frontend/src/app/modules/events/services/request.service.ts
@@ -29,13 +29,13 @@ export class RequestService {
   constructor(private gql: Apollo) {}
 
   getEvents({year, month}: { year: number; month: number }): Observable<Entity[]> {
-    return this.gql.watchQuery<Result>({
+    return this.gql.query<Result>({
       query: QUERY,
       variables: {
         year,
         month
       }
-    }).valueChanges.pipe(
+    }).pipe(
       map(res => {
         return res.data.events
       }),

diff --git a/apps/frontend/src/app/modules/home/services/request.service.ts b/apps/frontend/src/app/modules/home/services/request.service.ts
@@ -107,13 +107,13 @@ export class RequestService {
   }
 
   listFeaturedPosts(): Observable<Post[]> {
-    return this.gql.watchQuery<Result>({
+    return this.gql.query<Result>({
       query: QUERY,
       variables: {
         featured: true,
         last: 20
       }
-    }).valueChanges.pipe(
+    }).pipe(
       map(res => {
         return res.data.posts.edges.map(edge => edge.node)
       }),

diff --git a/apps/frontend/src/app/modules/information/service/request.service.ts b/apps/frontend/src/app/modules/information/service/request.service.ts
@@ -51,12 +51,12 @@ export class RequestService {
   constructor(private gql: Apollo, private http: HttpClient) {}
 
   getPageBySlug(slug: string): Observable<PageData> {
-    return this.gql.watchQuery<pageResult>({
+    return this.gql.query<pageResult>({
       query: pageQUERY,
       variables: {
         slug
       }
-    }).valueChanges.pipe(
+    }).pipe(
       map(res => {
         return res.data.page
       }),
@@ -65,9 +65,9 @@ export class RequestService {
   }
 
   getMenuItems(): Observable<MenuItem[]> {
-    return this.gql.watchQuery<menuResult>({
+    return this.gql.query<menuResult>({
       query: menuQUERY
-    }).valueChanges.pipe(
+    }).pipe(
       map(res => {
         return res.data.menu
       }),

diff --git a/apps/frontend/src/app/modules/misc/services/colleagues.service.ts b/apps/frontend/src/app/modules/misc/services/colleagues.service.ts
@@ -31,9 +31,9 @@ interface Result {
 })
 export class ColleaguesService {
   getColleagues(): Observable<Entity[]> {
-    return this.gql.watchQuery<Result>({
+    return this.gql.query<Result>({
       query: QUERY
-    }).valueChanges.pipe(
+    }).pipe(
       map(res => res.data.colleagues),
       take(1)
     )

diff --git a/apps/frontend/src/app/modules/pages/services/request.service.ts b/apps/frontend/src/app/modules/pages/services/request.service.ts
@@ -28,12 +28,12 @@ export class RequestService {
   constructor(private gql: Apollo) {}
 
   getPageBySlug(slug: string): Observable<PageData> {
-    return this.gql.watchQuery<Result>({
+    return this.gql.query<Result>({
       query: QUERY,
       variables: {
         slug
       }
-    }).valueChanges.pipe(
+    }).pipe(
       map(res => {
         return res.data.page
       }),

diff --git a/apps/frontend/src/app/modules/posts/components/posts/posts.component.ts b/apps/frontend/src/app/modules/posts/components/posts/posts.component.ts
@@ -28,6 +28,7 @@ export class PostsComponent implements OnInit {
   ) {}
 
   ngOnInit() {
+    const hack = setInterval(() => {}, 1000)
     this.post$ = combineLatest([this.route.params, this.route.queryParams]).pipe(
       map(([params, queryParams]) => ({ params, queryParams })),
       switchMap((x) => {
@@ -39,11 +40,16 @@ export class PostsComponent implements OnInit {
         }
       }),
       catchError((error) => {
+        clearInterval(hack)
         this.router.navigate(['/404'])
         return throwError(error)
       }),
       tap((post: Post | null) => {
-        if (!post) return
+        if (!post) {
+          clearInterval(hack)
+          this.router.navigate(['/404'])
+          return
+        }
 
         this.titleService.setTitle(post.title)
 
@@ -59,6 +65,7 @@ export class PostsComponent implements OnInit {
           { property: 'article:published_time', content: post.date },
           ...post.labels.map((l) => ({ property: 'article:tag', content: l.name })),
         ])
+        clearInterval(hack)
       })
     )
   }

diff --git a/apps/frontend/src/app/modules/posts/services/request.service.ts b/apps/frontend/src/app/modules/posts/services/request.service.ts
@@ -44,12 +44,12 @@ export class RequestService {
   constructor(private gql: Apollo) {}
 
   getPostById(id: number): Observable<Post> {
-    return this.gql.watchQuery<Result>({
+    return this.gql.query<Result>({
       query: QUERY,
       variables: {
         id
       }
-    }).valueChanges.pipe(
+    }).pipe(
       map(res => {
         return res.data.post
       }),
@@ -58,13 +58,13 @@ export class RequestService {
   }
 
   getPostByIdPreview(id: number, token: string): Observable<Post> {
-    return this.gql.watchQuery<Result>({
+    return this.gql.query<Result>({
       query: QUERY,
       variables: {
         id,
         token
       }
-    }).valueChanges.pipe(
+    }).pipe(
       map(res => {
         return res.data.post
       }),

diff --git a/apps/frontend/src/app/modules/search/services/search.service.ts b/apps/frontend/src/app/modules/search/services/search.service.ts
@@ -144,12 +144,12 @@ export class SearchService {
   constructor(private gql: Apollo, private http: HttpClient) {}
 
   queryTerm(term: string): Observable<Post[]> {
-    return this.gql.watchQuery<termResult>({
+    return this.gql.query<termResult>({
       query: termQUERY,
       variables: {
         term
       }
-    }).valueChanges.pipe(
+    }).pipe(
       map(res => {
         return res.data.search.edges.map(edge => edge.node)
       }),
@@ -158,12 +158,12 @@ export class SearchService {
   }
 
   queryLabel(labelID: number): Observable<Post[]> {
-    return this.gql.watchQuery<labelResult>({
+    return this.gql.query<labelResult>({
       query: labelQUERY,
       variables: {
         labelID
       }
-    }).valueChanges.pipe(
+    }).pipe(
       map(res => {
         return res.data.label.posts.edges.map(edge => edge.node)
       }),
@@ -172,12 +172,12 @@ export class SearchService {
   }
 
   queryAuthor(authorID: number): Observable<Post[]> {
-    return this.gql.watchQuery<authorResult>({
+    return this.gql.query<authorResult>({
       query: authorQUERY,
       variables: {
         authorID
       }
-    }).valueChanges.pipe(
+    }).pipe(
       map(res => {
         return res.data.author.posts.edges.map(edge => edge.node)
       }),