docs(angular-query): replace msw with http interceptor (#6870)

interceptor works better in sandbox environments

examples/angular/infinite-query-with-max-pages/package.json

@@ -27,10 +27,6 @@
     "@angular/cli": "^17.1.2",
     "@angular/compiler-cli": "^17.1.2",
     "@tanstack/angular-query-devtools-experimental": "^5.20.1",
-    "msw": "^2.1.7",
     "typescript": "5.2.2"
-  },
-  "msw": {
-    "workerDirectory": "src"
   }
 }

examples/angular/infinite-query-with-max-pages/src/app/api/projects-mock.interceptor.ts

@@ -0,0 +1,45 @@
+import { HttpResponse } from '@angular/common/http'
+import { delayWhen, of, timer } from 'rxjs'
+import type { Observable } from 'rxjs'
+import type { HttpEvent, HttpInterceptorFn } from '@angular/common/http'
+
+export const projectsMockInterceptor: HttpInterceptorFn = (
+  req,
+  next,
+): Observable<HttpEvent<any>> => {
+  const { url } = req
+
+  if (url.includes('/api/projects')) {
+    const cursor = parseInt(
+      new URLSearchParams(req.url.split('?')[1]).get('cursor') || '0',
+      10,
+    )
+    const pageSize = 4
+
+    const data = Array(pageSize)
+      .fill(0)
+      .map((_, i) => {
+        return {
+          name: 'Project ' + (i + cursor) + ` (server time: ${Date.now()})`,
+          id: i + cursor,
+        }
+      })
+
+    const nextId = cursor < 20 ? data[data.length - 1].id + 1 : null
+    const previousId = cursor > -20 ? data[0].id - pageSize : null
+
+    // Simulate network latency with a random delay between 100ms and 500ms
+    const delayDuration = Math.random() * (500 - 100) + 100
+    return of(
+      new HttpResponse({
+        status: 200,
+        body: {
+          data,
+          nextId,
+          previousId,
+        },
+      }),
+    ).pipe(delayWhen(() => timer(delayDuration)))
+  }
+  return next(req)
+}

examples/angular/infinite-query-with-max-pages/src/app/app.config.ts

@@ -1,13 +1,18 @@
-import { provideHttpClient, withFetch } from '@angular/common/http'
-import { ApplicationConfig } from '@angular/core'
+import {
+  provideHttpClient,
+  withFetch,
+  withInterceptors,
+} from '@angular/common/http'
 import {
   QueryClient,
   provideAngularQuery,
 } from '@tanstack/angular-query-experimental'
+import { projectsMockInterceptor } from './api/projects-mock.interceptor'
+import type { ApplicationConfig } from '@angular/core'
 
 export const appConfig: ApplicationConfig = {
   providers: [
-    provideHttpClient(withFetch()),
+    provideHttpClient(withInterceptors([projectsMockInterceptor]), withFetch()),
     provideAngularQuery(
       new QueryClient({
         defaultOptions: {

examples/angular/infinite-query-with-max-pages/src/main.ts

@@ -1,21 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser'
 import { appConfig } from './app/app.config'
-import { isDevMode } from '@angular/core'
 import { AppComponent } from './app/app.component'
 
-async function prepareApp() {
-  if (isDevMode()) {
-    const { worker } = await import('./mocks/browser')
-    return worker.start({
-      quiet: true,
-    })
-  }
-
-  return Promise.resolve()
-}
-
-prepareApp().then(() => {
-  bootstrapApplication(AppComponent, appConfig).catch((err) =>
-    console.error(err),
-  )
-})
+bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err))