docs(angular-query): update examples and getting started docs (#6520)

Author: arnoud-dv

docs/angular/devtools.md

@@ -17,7 +17,7 @@ $ yarn add @tanstack/angular-query-devtools-experimental
 
 You can import the devtools like this:
 
-```typescript
+```ts
 import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental'
 ```
 
@@ -27,7 +27,7 @@ Floating Mode will mount the devtools as a fixed, floating element in your app a
 
 Place the following code as high in your Angular app as you can. The closer it is to the root of the page, the better it will work!
 
-```typescript
+```ts
 import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental'
 import { Component } from '@angular/core';
 

docs/angular/installation.md

@@ -7,7 +7,7 @@ title: Installation
 
 ### NPM
 
-*Angular Query is compatible with Angular version 17.*
+_Angular Query is compatible with Angular version 17._
 
 ```bash
 $ npm i @tanstack/angular-query-experimental

docs/angular/overview.md

@@ -7,15 +7,60 @@ title: Overview
 
 The `@tanstack/angular-query-experimental` package offers a 1st-class API for using TanStack Query via Angular.
 
-## Feedback very welcome
+## Feedback welcome!
+
 We are in the process of getting to a stable API for Angular Query. If you have any feedback, please contact us at the [TanStack Discord](https://tlinz.com/discord) server or [visit this discussion](https://github.com/TanStack/query/discussions/6293) on Github.
 
 ## Supported Angular Versions
+
 Angular Query is compatible with Angular version 17.
 
-## Example
+TanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes **fetching, caching, synchronizing and updating server state** in your web applications a breeze.
+
+## Motivation
+
+Most core web frameworks **do not** come with an opinionated way of fetching or updating data in a holistic way. Because of this developers end up building either meta-frameworks which encapsulate strict opinions about data-fetching, or they invent their own ways of fetching data. This usually means cobbling together component-based state and side-effects, or using more general purpose state management libraries to store and provide asynchronous data throughout their apps.
+
+While most traditional state management libraries are great for working with client state, they are **not so great at working with async or server state**. This is because **server state is totally different**. For starters, server state:
+
+- Is persisted remotely in a location you do not control or own
+- Requires asynchronous APIs for fetching and updating
+- Implies shared ownership and can be changed by other people without your knowledge
+- Can potentially become "out of date" in your applications if you're not careful
+
+Once you grasp the nature of server state in your application, **even more challenges will arise** as you go, for example:
+
+- Caching... (possibly the hardest thing to do in programming)
+- Deduping multiple requests for the same data into a single request
+- Updating "out of date" data in the background
+- Knowing when data is "out of date"
+- Reflecting updates to data as quickly as possible
+- Performance optimizations like pagination and lazy loading data
+- Managing memory and garbage collection of server state
+- Memoizing query results with structural sharing
+
+If you're not overwhelmed by that list, then that must mean that you've probably solved all of your server state problems already and deserve an award. However, if you are like a vast majority of people, you either have yet to tackle all or most of these challenges and we're only scratching the surface!
+
+Angular Query is hands down one of the _best_ libraries for managing server state. It works amazingly well **out-of-the-box, with zero-config, and can be customized** to your liking as your application grows.
 
-```typescript
+Angular Query allows you to defeat and overcome the tricky challenges and hurdles of _server state_ and control your app data before it starts to control you.
+
+On a more technical note, Angular Query will likely:
+
+- Help you remove **many** lines of complicated and misunderstood code from your application and replace with just a handful of lines of Angular Query logic.
+- Make your application more maintainable and easier to build new features without worrying about wiring up new server state data sources
+- Have a direct impact on your end-users by making your application feel faster and more responsive than ever before.
+- Potentially help you save on bandwidth and increase memory performance
+
+[//]: # 'Example'
+
+## Enough talk, show me some code already!
+
+In the example below, you can see Angular Query in its most basic and simple form being used to fetch the GitHub stats for the TanStack Query GitHub project itself:
+
+[Open in CodeSandbox](https://codesandbox.io/s/github/tanstack/query/tree/main/examples/angular/simple)
+
+```ts
 import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental'
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { HttpClient } from '@angular/common/http'
@@ -53,7 +98,7 @@ export class SimpleExampleComponent {
     queryKey: ['repoData'],
     queryFn: () =>
       lastValueFrom(
-        this.http.get<Response>('https://api.github.com/repos/tannerlinsley/react-query')
+        this.http.get<Response>('https://api.github.com/repos/tanstack/query'),
       ),
   }))
 }
@@ -66,3 +111,7 @@ type Response = {
   forks_count: number
 }
 ```
+
+## You talked me into it, so what now?
+
+- Learn Angular Query at your own pace with our amazingly thorough [Walkthrough Guide](../installation) and [API Reference](../reference/injectQuery)

docs/angular/quick-start.md

@@ -11,26 +11,25 @@ If you're looking for a fully functioning example, please have a look at our [ba
 
 ### Provide the client to your App
 
-```typescript
+```ts
 bootstrapApplication(AppComponent, {
   providers: [provideAngularQuery(new QueryClient())],
 })
 ```
 
 ### Component with query and mutation
 
-```typescript
+```ts
 import { Component, Injectable, inject } from '@angular/core'
 import { HttpClient } from '@angular/common/http'
 import { lastValueFrom } from 'rxjs'
 
 import {
   injectMutation,
   injectQuery,
-  injectQueryClient
+  injectQueryClient,
 } from '@tanstack/angular-query-experimental'
 
-
 @Component({
   standalone: true,
   template: `
@@ -61,7 +60,7 @@ export class TodosComponent {
 
       // OR use the queryClient that is injected into the component
       // this.queryClient.invalidateQueries({ queryKey: ['todos'] })
-    }
+    },
   }))
 
   onAddTodo() {
@@ -72,22 +71,26 @@ export class TodosComponent {
   }
 }
 
-@Injectable({providedIn: 'root'})
+@Injectable({ providedIn: 'root' })
 export class TodoService {
-  private http = inject(HttpClient);
+  private http = inject(HttpClient)
 
   getTodos(): Promise<Todo[]> {
-    return lastValueFrom(this.http.get<Todo[]>('https://jsonplaceholder.typicode.com/todos'))
+    return lastValueFrom(
+      this.http.get<Todo[]>('https://jsonplaceholder.typicode.com/todos'),
+    )
   }
 
   addTodo(todo: Todo): Promise<Todo> {
-    return lastValueFrom(this.http.post<Todo>('https://jsonplaceholder.typicode.com/todos', todo))
+    return lastValueFrom(
+      this.http.post<Todo>('https://jsonplaceholder.typicode.com/todos', todo),
+    )
   }
 }
 
 interface Todo {
-  id: string;
-  title: string;
+  id: string
+  title: string
 }
 ```
 

examples/angular/basic/package.json

@@ -2,8 +2,6 @@
   "name": "@tanstack/query-example-angular-basic",
   "private": true,
   "type": "module",
-  "version": "0.0.0",
-  "description": "",
   "scripts": {
     "start": "vite",
     "dev": "vite",
@@ -15,11 +13,9 @@
     "@angular/common": "^17.0.2",
     "@angular/compiler": "^17.0.2",
     "@angular/core": "^17.0.2",
-    "@angular/language-service": "^17.0.2",
     "@angular/platform-browser": "^17.0.2",
-    "@tanstack/angular-query-experimental": "^5.0.0",
-    "@tanstack/angular-query-devtools-experimental": "^5.0.0",
-    "axios": "^1.5.1",
+    "@tanstack/angular-query-experimental": "^5.13.4",
+    "@tanstack/angular-query-devtools-experimental": "^5.13.3",
     "rxjs": "^7.8.1",
     "zone.js": "^0.14.2"
   },