From fb0e81e3c553588f6b5dfbc6de22ade07dece5fa Mon Sep 17 00:00:00 2001
From: Wonsuk Choi <sukvvon@gmail.com>
Date: Mon, 31 Aug 2026 11:38:30 +0900
Subject: [PATCH 1/3] docs(preact-query): add 'select' example to 'useQuery'

---
 .../preact/reference/functions/useQuery.md    | 25 ++++++++++++++++++-
 packages/preact-query/src/useQuery.ts         | 24 ++++++++++++++++++
 2 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/docs/framework/preact/reference/functions/useQuery.md b/docs/framework/preact/reference/functions/useQuery.md
index 4f002e036d5..c22f068e447 100644
--- a/docs/framework/preact/reference/functions/useQuery.md
+++ b/docs/framework/preact/reference/functions/useQuery.md
@@ -190,7 +190,7 @@ function Posts() {
 function useQuery<TQueryFnData, TError, TData, TQueryKey>(options, queryClient?): UseQueryResult<TData, TError>;
 ```
 
-Defined in: [preact-query/src/useQuery.ts:261](https://github.com/TanStack/query/blob/main/packages/preact-query/src/useQuery.ts#L261)
+Defined in: [preact-query/src/useQuery.ts:285](https://github.com/TanStack/query/blob/main/packages/preact-query/src/useQuery.ts#L285)
 
 ### Type Parameters
 
@@ -358,3 +358,26 @@ function Posts() {
   )
 }
 ```
+
+`select` shapes the returned `data` without changing what's stored in the cache — the cache still
+holds the full `Post[]`:
+```tsx
+import { useQuery } from '@tanstack/preact-query'
+
+function PostTitles() {
+  const { data, isPending, isError, error } = useQuery({
+    queryKey: ['posts'],
+    queryFn: fetchPosts,
+    select: (posts) => posts.map((post) => post.title),
+  })
+
+  if (isPending) return 'Loading...'
+  if (isError) return <span>Error: {error.message}</span>
+
+  return (
+    <ul>
+      {data.map((title) => <li key={title}>{title}</li>)}
+    </ul>
+  )
+}
+```
diff --git a/packages/preact-query/src/useQuery.ts b/packages/preact-query/src/useQuery.ts
index dfa19538c15..a2560c5ad1d 100644
--- a/packages/preact-query/src/useQuery.ts
+++ b/packages/preact-query/src/useQuery.ts
@@ -257,6 +257,30 @@ export function useQuery<
  *   )
  * }
  * ```
+ *
+ * @example
+ * `select` shapes the returned `data` without changing what's stored in the cache — the cache still
+ * holds the full `Post[]`:
+ * ```tsx
+ * import { useQuery } from '@tanstack/preact-query'
+ *
+ * function PostTitles() {
+ *   const { data, isPending, isError, error } = useQuery({
+ *     queryKey: ['posts'],
+ *     queryFn: fetchPosts,
+ *     select: (posts) => posts.map((post) => post.title),
+ *   })
+ *
+ *   if (isPending) return 'Loading...'
+ *   if (isError) return <span>Error: {error.message}</span>
+ *
+ *   return (
+ *     <ul>
+ *       {data.map((title) => <li key={title}>{title}</li>)}
+ *     </ul>
+ *   )
+ * }
+ * ```
  */
 export function useQuery<
   TQueryFnData = unknown,

From fb5512acae66c0eb1d7870890f11cdf36e656c2d Mon Sep 17 00:00:00 2001
From: Wonsuk Choi <sukvvon@gmail.com>
Date: Mon, 31 Aug 2026 11:40:39 +0900
Subject: [PATCH 2/3] docs(preact-query): move 'select' example right after the
 basic 'useQuery' example

---
 .../preact/reference/functions/useQuery.md    | 46 +++++++++---------
 packages/preact-query/src/useQuery.ts         | 48 +++++++++----------
 2 files changed, 47 insertions(+), 47 deletions(-)

diff --git a/docs/framework/preact/reference/functions/useQuery.md b/docs/framework/preact/reference/functions/useQuery.md
index c22f068e447..b415c787278 100644
--- a/docs/framework/preact/reference/functions/useQuery.md
+++ b/docs/framework/preact/reference/functions/useQuery.md
@@ -264,6 +264,29 @@ function Posts() {
 }
 ```
 
+`select` shapes the returned `data` without changing what's stored in the cache — the cache still
+holds the full `Post[]`:
+```tsx
+import { useQuery } from '@tanstack/preact-query'
+
+function PostTitles() {
+  const { data, isPending, isError, error } = useQuery({
+    queryKey: ['posts'],
+    queryFn: fetchPosts,
+    select: (posts) => posts.map((post) => post.title),
+  })
+
+  if (isPending) return 'Loading...'
+  if (isError) return <span>Error: {error.message}</span>
+
+  return (
+    <ul>
+      {data.map((title) => <li key={title}>{title}</li>)}
+    </ul>
+  )
+}
+```
+
 A dependent query, only enabled once `postId` is set — use `isLoading`, not `isPending`, so the
 loading state doesn't show while the query is disabled:
 ```tsx
@@ -358,26 +381,3 @@ function Posts() {
   )
 }
 ```
-
-`select` shapes the returned `data` without changing what's stored in the cache — the cache still
-holds the full `Post[]`:
-```tsx
-import { useQuery } from '@tanstack/preact-query'
-
-function PostTitles() {
-  const { data, isPending, isError, error } = useQuery({
-    queryKey: ['posts'],
-    queryFn: fetchPosts,
-    select: (posts) => posts.map((post) => post.title),
-  })
-
-  if (isPending) return 'Loading...'
-  if (isError) return <span>Error: {error.message}</span>
-
-  return (
-    <ul>
-      {data.map((title) => <li key={title}>{title}</li>)}
-    </ul>
-  )
-}
-```
diff --git a/packages/preact-query/src/useQuery.ts b/packages/preact-query/src/useQuery.ts
index a2560c5ad1d..00fe93ff4fd 100644
--- a/packages/preact-query/src/useQuery.ts
+++ b/packages/preact-query/src/useQuery.ts
@@ -160,6 +160,30 @@ export function useQuery<
  * ```
  *
  * @example
+ * `select` shapes the returned `data` without changing what's stored in the cache — the cache still
+ * holds the full `Post[]`:
+ * ```tsx
+ * import { useQuery } from '@tanstack/preact-query'
+ *
+ * function PostTitles() {
+ *   const { data, isPending, isError, error } = useQuery({
+ *     queryKey: ['posts'],
+ *     queryFn: fetchPosts,
+ *     select: (posts) => posts.map((post) => post.title),
+ *   })
+ *
+ *   if (isPending) return 'Loading...'
+ *   if (isError) return <span>Error: {error.message}</span>
+ *
+ *   return (
+ *     <ul>
+ *       {data.map((title) => <li key={title}>{title}</li>)}
+ *     </ul>
+ *   )
+ * }
+ * ```
+ *
+ * @example
  * A dependent query, only enabled once `postId` is set — use `isLoading`, not `isPending`, so the
  * loading state doesn't show while the query is disabled:
  * ```tsx
@@ -257,30 +281,6 @@ export function useQuery<
  *   )
  * }
  * ```
- *
- * @example
- * `select` shapes the returned `data` without changing what's stored in the cache — the cache still
- * holds the full `Post[]`:
- * ```tsx
- * import { useQuery } from '@tanstack/preact-query'
- *
- * function PostTitles() {
- *   const { data, isPending, isError, error } = useQuery({
- *     queryKey: ['posts'],
- *     queryFn: fetchPosts,
- *     select: (posts) => posts.map((post) => post.title),
- *   })
- *
- *   if (isPending) return 'Loading...'
- *   if (isError) return <span>Error: {error.message}</span>
- *
- *   return (
- *     <ul>
- *       {data.map((title) => <li key={title}>{title}</li>)}
- *     </ul>
- *   )
- * }
- * ```
  */
 export function useQuery<
   TQueryFnData = unknown,

From 362adb02ba23363e6b6995c2d3b79d76e8e5ac64 Mon Sep 17 00:00:00 2001
From: Wonsuk Choi <sukvvon@gmail.com>
Date: Mon, 31 Aug 2026 11:56:44 +0900
Subject: [PATCH 3/3] docs(preact-query): make 'select' example derive a
 different type instead of a subset

---
 .../preact/reference/functions/useQuery.md       | 16 ++++++----------
 packages/preact-query/src/useQuery.ts            | 14 +++++---------
 2 files changed, 11 insertions(+), 19 deletions(-)

diff --git a/docs/framework/preact/reference/functions/useQuery.md b/docs/framework/preact/reference/functions/useQuery.md
index b415c787278..2d1320fd0fc 100644
--- a/docs/framework/preact/reference/functions/useQuery.md
+++ b/docs/framework/preact/reference/functions/useQuery.md
@@ -190,7 +190,7 @@ function Posts() {
 function useQuery<TQueryFnData, TError, TData, TQueryKey>(options, queryClient?): UseQueryResult<TData, TError>;
 ```
 
-Defined in: [preact-query/src/useQuery.ts:285](https://github.com/TanStack/query/blob/main/packages/preact-query/src/useQuery.ts#L285)
+Defined in: [preact-query/src/useQuery.ts:281](https://github.com/TanStack/query/blob/main/packages/preact-query/src/useQuery.ts#L281)
 
 ### Type Parameters
 
@@ -264,26 +264,22 @@ function Posts() {
 }
 ```
 
-`select` shapes the returned `data` without changing what's stored in the cache — the cache still
-holds the full `Post[]`:
+`select` derives whatever `data` a component needs from the cached value, without changing what's
+actually stored in the cache — the cache still holds the full `Post[]`, but `data` here is a `number`:
 ```tsx
 import { useQuery } from '@tanstack/preact-query'
 
-function PostTitles() {
+function PostCount() {
   const { data, isPending, isError, error } = useQuery({
     queryKey: ['posts'],
     queryFn: fetchPosts,
-    select: (posts) => posts.map((post) => post.title),
+    select: (posts) => posts.length,
   })
 
   if (isPending) return 'Loading...'
   if (isError) return <span>Error: {error.message}</span>
 
-  return (
-    <ul>
-      {data.map((title) => <li key={title}>{title}</li>)}
-    </ul>
-  )
+  return <span>{data} posts</span>
 }
 ```
 
diff --git a/packages/preact-query/src/useQuery.ts b/packages/preact-query/src/useQuery.ts
index 00fe93ff4fd..13fff59759f 100644
--- a/packages/preact-query/src/useQuery.ts
+++ b/packages/preact-query/src/useQuery.ts
@@ -160,26 +160,22 @@ export function useQuery<
  * ```
  *
  * @example
- * `select` shapes the returned `data` without changing what's stored in the cache — the cache still
- * holds the full `Post[]`:
+ * `select` derives whatever `data` a component needs from the cached value, without changing what's
+ * actually stored in the cache — the cache still holds the full `Post[]`, but `data` here is a `number`:
  * ```tsx
  * import { useQuery } from '@tanstack/preact-query'
  *
- * function PostTitles() {
+ * function PostCount() {
  *   const { data, isPending, isError, error } = useQuery({
  *     queryKey: ['posts'],
  *     queryFn: fetchPosts,
- *     select: (posts) => posts.map((post) => post.title),
+ *     select: (posts) => posts.length,
  *   })
  *
  *   if (isPending) return 'Loading...'
  *   if (isError) return <span>Error: {error.message}</span>
  *
- *   return (
- *     <ul>
- *       {data.map((title) => <li key={title}>{title}</li>)}
- *     </ul>
- *   )
+ *   return <span>{data} posts</span>
  * }
  * ```
  *