diff --git a/packages/vike-react-query/README.md b/packages/vike-react-query/README.md
index 79b4f756..ead5e3e6 100644
--- a/packages/vike-react-query/README.md
+++ b/packages/vike-react-query/README.md
@@ -5,18 +5,19 @@
# `vike-react-query`
-Enable your React components to fetch data using [TanStack Query](https://tanstack.com/query/latest).
+Enables your React components to fetch data using [TanStack Query](https://tanstack.com/query/latest).
> [!NOTE]
-> With `vike-react-query` you fetch data on a component-level, instead using [Vike's `data()` hook](https://vike.dev/data) which fetches data on a page-level.
+> You also get [progressive rendering](https://vike.dev/streaming#progressive-rendering), fallback upon loading and/or error, and [caching](https://tanstack.com/query/latest/docs/framework/react/reference/useSuspenseQuery).
-You also get:
- - [Progressive rendering](https://vike.dev/streaming#progressive-rendering)
- - [Fallback upon loading and/or error](#withfallback)
- - [Caching](https://tanstack.com/query/latest/docs/framework/react/reference/useSuspenseQuery)
- - [Optional usage with Telefunc](#usage-with-telefunc)
+[Installation](#installation)
+[Basic usage](#basic-usage)
+[`withFallback()`](#withfallback)
+[Settings](#settings)
+[Usage with Telefunc](#usage-with-telefunc)
+[How it works](#how-it-works)
-See [example](https://github.com/vikejs/vike-react/tree/main/examples/react-query).
+
## Installation
@@ -36,7 +37,9 @@ See [example](https://github.com/vikejs/vike-react/tree/main/examples/react-quer
```
> [!NOTE]
-> The `vike-react-query` [extension](https://vike.dev/extensions) requires [`vike-react`](https://vike.dev/vike-react).
+> The `vike-react-query` extension requires [`vike-react`](https://vike.dev/vike-react).
+
+
## Basic usage
@@ -63,12 +66,9 @@ const Movie = ({ id }) => {
```
> [!NOTE]
-> Upon SSR, the component is rendered to HTML and its data loaded on the server side, while on the client side it's merely [hydrated](https://vike.dev/hydration).
->
-> Upon page navigation, the component is rendered and its data loaded on the client-side.
+> Even though `useSuspenseQuery()` is imported from `@tanstack/react-query`, you still need to install `vike-react-query` for it to work.
-> [!NOTE]
-> Even though `useSuspenseQuery()` is imported from `@tanstack/react-query`, you still need to [install `vike-react-query`](#installation) for it to work. (Behind the scenes `vike-react-query` integrates TanStack Query with [the SSR stream](react-streaming#readme).)
+
## `withFallback()`
@@ -110,35 +110,15 @@ const Movie = withFallback(
)
```
-## Defaults
-
-You can modify the defaults defined by [`QueryClient`](https://tanstack.com/query/latest/docs/reference/QueryClient).
-
-Gloablly, for all components:
+
-```js
-// pages/+config.js
-// Applies to all pages.
+## Settings
-export default {
- queryClientConfig: {
- defaultOptions: {
- queries: {
- staleTime: 60 * 1000
- }
- }
- }
-}
-```
-
-For the components of one page:
+You can modify the defaults defined by [`QueryClient`](https://tanstack.com/query/latest/docs/reference/QueryClient).
```js
-// pages/product/@id/+config.js
-
-// Applies only to /product/@id/+Page.js (given there is only
-// one +Page.js file under the /pages/product/@id directory).
+// +config.js
export default {
queryClientConfig: {
@@ -151,23 +131,9 @@ export default {
}
```
-For the components of a group of pages:
+You can apply settings to all pages, a group of pages, or only one page. See [Vike Docs > Config > Inheritance](https://vike.dev/config#inheritance).
-```js
-// pages/admin/+config.js
-
-// Applies to all /pages/admin/**/+Page.js
-
-export default {
- queryClientConfig: {
- defaultOptions: {
- queries: {
- staleTime: 60 * 1000
- }
- }
- }
-}
-```
+
## Usage with Telefunc
@@ -179,7 +145,7 @@ You can use `vike-react-query` with [Telefunc](https://telefunc.com).
With Telefunc, the query function always runs on the server.
-#### Query example
+**Query example**
```tsx
// movie.telefunc.ts
@@ -223,7 +189,7 @@ const Movie = withFallback(
)
```
-#### Mutation example
+**Mutation example**
```tsx
// movie.telefunc.ts
@@ -262,7 +228,7 @@ const CreateMovie = () => {
}
```
-#### Putting it together
+**Putting it together**
```tsx
// movie.telefunc.ts
@@ -331,3 +297,18 @@ const Movies = withFallback(
}
)
```
+
+
+
+
+## How it works
+
+Upon SSR, the component is rendered to HTML and its data loaded on the server-side. On the client side, the component is merely [hydrated](https://vike.dev/hydration).
+
+Upon page navigation (and rendering the first page if [SSR is disabled](https://vike.dev/ssr)), the component is rendered and its data loaded on the client-side.
+
+> [!NOTE]
+> With `vike-react-query` you fetch data on a component-level instead of using Vike's [`data()` hook](https://vike.dev/data) which fetches data on a page-level.
+
+> [!NOTE]
+> Behind the scenes `vike-react-query` integrates TanStack Query into [the HTML stream](https://github.com/brillout/react-streaming#readme).