Merge pull request #114 from luii/feature/map-results-data-docs

docs: add `mapResultsData` operator to `README.md` and playground

README.md

@@ -377,6 +377,22 @@ export class TodosPageComponent {
         };
       })
     );
+
+    // Map the result `data` of multiple queries
+    combineLatest([
+      this.todosService.getTodos(),
+      this.todosService.getTodos(),
+    ]).pipe(
+      mapResultsData(([todos, todos2]) => {
+        return {
+          todos: todos.data.todos.filter(predicate),
+          todos2: todos2.data.todos.filter(predicate),
+        };
+      })
+    ).subscribe((res) => {
+      console.log(res.todos, res.todos2);
+      // { isLoading: boolean, isSuccess: boolean, isError: boolean, error: unknown, todos: [], todos2: [] }
+    });
 
     // process error or success result directly
     this.todosService

packages/playground/src/app/app.component.ts

@@ -131,6 +131,15 @@ import { RouterModule } from '@angular/router';
                 >Placeholder Query Data</a
               >
             </li>
+            <li class="nav-item">
+              <a
+                class="nav-link"
+                routerLinkActive="active"
+                aria-current="page"
+                routerLink="parallel-queries"
+              >Parallel Queries</a
+              >
+            </li>
           </ul>
         </div>
       </div>

packages/playground/src/app/parallel-queries/parallel-queries-page.component.ts

@@ -0,0 +1,49 @@
+import {AsyncPipe, JsonPipe, NgIf} from '@angular/common';
+import {Component, inject} from '@angular/core';
+import {mapResultsData, QueryClientService} from '@ngneat/query';
+import {SubscribeModule} from '@ngneat/subscribe';
+import {combineLatest, Subject, switchMap} from 'rxjs';
+import {GithubApiService} from '../github.service';
+
+@Component({
+  standalone: true,
+  imports: [NgIf, SubscribeModule, AsyncPipe, JsonPipe],
+  template: `
+    <ng-container *ngIf="repo$ | async as repo">
+      <p *ngIf="repo.isLoading">Loading...</p>
+      <p *ngIf="repo.error">An error has occurred: {{ repo.error }}</p>
+      <div *ngIf="repo.isSuccess">
+        <p><b>ngneat/query</b> {{ repo.data.ngQuery | json }}</p>
+        <p><b>ngneat/spectator</b> {{ repo.data.spectator | json }}</p>
+      </div>
+      <div *ngIf="repo.isFetching">Updating...</div>
+    </ng-container>
+    <button (click)="invalidate()">Invalidate Queries</button>
+    <button (click)="btn.next()">Switch to new Queries</button>
+  `
+})
+export class ParallelQueriesPageComponent {
+  client = inject(QueryClientService);
+  btn = new Subject<void>();
+
+  constructor(private githubApiService: GithubApiService) {
+  }
+
+  repo$ = this.btn.pipe(
+    switchMap(() => combineLatest([
+      this.githubApiService.getRepository('ngneat/ng-query').result$,
+      this.githubApiService.getRepository('ngneat/spectator').result$
+    ])),
+    mapResultsData(([ngQuery, spectator]) => {
+      return {
+        ngQuery,
+        spectator
+      };
+    })
+  );
+
+  invalidate() {
+    this.client.invalidateQueries(['repository', 'ngneat/ng-query']);
+    this.client.invalidateQueries(['repository', 'ngneat/spectator']);
+  }
+}

packages/playground/src/main.ts

@@ -23,6 +23,7 @@ import { OptimisticUpdatesPageComponent } from './app/optimistic-updates-page/op
 import { AutoRefetchingPageComponent } from './app/auto-refetching-page/auto-refetching-page.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { PlaceholderPageComponent } from './app/placeholder-page/placeholder-page.component';
+import {ParallelQueriesPageComponent} from './app/parallel-queries/parallel-queries-page.component';
 
 if (environment.production) {
   enableProdMode();
@@ -123,6 +124,10 @@ bootstrapApplication(AppComponent, {
             path: 'placeholder-query-data',
             component: PlaceholderPageComponent,
           },
+          {
+            path: 'parallel-queries',
+            component: ParallelQueriesPageComponent,
+          }
         ],
         { initialNavigation: 'enabledBlocking' }
       )