docs(preact-query): wrap hook and options-factory examples in components

docs/framework/preact/reference/functions/infiniteQueryOptions.md

@@ -80,7 +80,7 @@ function Projects() {
 function infiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options): OmitKeyof<UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>, "queryFn"> & object & QueryKeyWithDataTag<TQueryKey, InfiniteData<TQueryFnData, unknown>, TError>;
 ```
 
-Defined in: [preact-query/src/infiniteQueryOptions.ts:233](https://github.com/TanStack/query/blob/main/packages/preact-query/src/infiniteQueryOptions.ts#L233)
+Defined in: [preact-query/src/infiniteQueryOptions.ts:239](https://github.com/TanStack/query/blob/main/packages/preact-query/src/infiniteQueryOptions.ts#L239)
 
 You can generally pass everything to `infiniteQueryOptions` that you can also pass to `useInfiniteQuery`.
 These options can be shared across hooks and imperative APIs such as `queryClient.infiniteQuery`.
@@ -123,14 +123,19 @@ The same options object, typed so that `queryKey` carries the inferred data type
 ### Examples
 
 ```tsx
-import { infiniteQueryOptions } from '@tanstack/preact-query'
+import { infiniteQueryOptions, useInfiniteQuery } from '@tanstack/preact-query'
 
 export const projectsOptions = infiniteQueryOptions({
   queryKey: ['projects'],
   queryFn: ({ pageParam }) => fetchProjects(pageParam),
   initialPageParam: 0,
   getNextPageParam: (lastPage) => lastPage.nextId,
 })
+
+function Projects() {
+  const { data } = useInfiniteQuery(projectsOptions)
+  return <>{data?.pages.map((page) => page.projects.map((p) => <p key={p.id}>{p.name}</p>))}</>
+}
 ```
 
 A parameterized factory, reused across a hook and an imperative call with the same cache entry:
@@ -150,11 +155,12 @@ export const commentsOptions = (postId: string) =>
   })
 
 function Comments({ postId }: { postId: string }) {
-  const result = useInfiniteQuery(commentsOptions(postId))
-  if (!result.isSuccess) return 'Loading...'
+  const { data, isPending, isError, error } = useInfiniteQuery(commentsOptions(postId))
+  if (isPending) return 'Loading...'
+  if (isError) return <span>Error: {error.message}</span>
   return (
     <>
-      {result.data.pages.map((page) => page.comments.map((c) => <p key={c.id}>{c.text}</p>))}
+      {data.pages.map((page) => page.comments.map((c) => <p key={c.id}>{c.text}</p>))}
     </>
   )
 }
@@ -173,7 +179,7 @@ queryClient.infiniteQuery(commentsOptions(postId)).catch(noop)
 function infiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options): UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & object & QueryKeyWithDataTag<TQueryKey, InfiniteData<TQueryFnData, unknown>, TError>;
 ```
 
-Defined in: [preact-query/src/infiniteQueryOptions.ts:309](https://github.com/TanStack/query/blob/main/packages/preact-query/src/infiniteQueryOptions.ts#L309)
+Defined in: [preact-query/src/infiniteQueryOptions.ts:321](https://github.com/TanStack/query/blob/main/packages/preact-query/src/infiniteQueryOptions.ts#L321)
 
 You can generally pass everything to `infiniteQueryOptions` that you can also pass to `useInfiniteQuery`.
 These options can be shared across hooks and imperative APIs such as `queryClient.infiniteQuery`.
@@ -216,14 +222,19 @@ The same options object, typed so that `queryKey` carries the inferred data type
 ### Examples
 
 ```tsx
-import { infiniteQueryOptions } from '@tanstack/preact-query'
+import { infiniteQueryOptions, useInfiniteQuery } from '@tanstack/preact-query'
 
 export const projectsOptions = infiniteQueryOptions({
   queryKey: ['projects'],
   queryFn: ({ pageParam }) => fetchProjects(pageParam),
   initialPageParam: 0,
   getNextPageParam: (lastPage) => lastPage.nextId,
 })
+
+function Projects() {
+  const { data } = useInfiniteQuery(projectsOptions)
+  return <>{data?.pages.map((page) => page.projects.map((p) => <p key={p.id}>{p.name}</p>))}</>
+}
 ```
 
 A parameterized factory, reused across a hook and an imperative call with the same cache entry:
@@ -243,11 +254,12 @@ export const commentsOptions = (postId: string) =>
   })
 
 function Comments({ postId }: { postId: string }) {
-  const result = useInfiniteQuery(commentsOptions(postId))
-  if (!result.isSuccess) return 'Loading...'
+  const { data, isPending, isError, error } = useInfiniteQuery(commentsOptions(postId))
+  if (isPending) return 'Loading...'
+  if (isError) return <span>Error: {error.message}</span>
   return (
     <>
-      {result.data.pages.map((page) => page.comments.map((c) => <p key={c.id}>{c.text}</p>))}
+      {data.pages.map((page) => page.comments.map((c) => <p key={c.id}>{c.text}</p>))}
     </>
   )
 }

docs/framework/preact/reference/functions/queryOptions.md

@@ -75,7 +75,7 @@ function Posts() {
 function queryOptions<TQueryFnData, TError, TData, TQueryKey>(options): OmitKeyof<UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, "queryFn"> & object & QueryKeyWithDataTag<TQueryKey, TQueryFnData, TError>;
 ```
 
-Defined in: [preact-query/src/queryOptions.ts:201](https://github.com/TanStack/query/blob/main/packages/preact-query/src/queryOptions.ts#L201)
+Defined in: [preact-query/src/queryOptions.ts:205](https://github.com/TanStack/query/blob/main/packages/preact-query/src/queryOptions.ts#L205)
 
 You can generally pass everything to `queryOptions` that you can also pass to `useQuery`. These options can
 be shared across hooks and imperative APIs such as `queryClient.query`. `options.queryKey` is required and
@@ -118,12 +118,17 @@ The same options object, typed so that `queryKey` carries the inferred data type
 ### Examples
 
 ```tsx
-import { queryOptions } from '@tanstack/preact-query'
+import { queryOptions, useQuery } from '@tanstack/preact-query'
 
 export const postsOptions = queryOptions({
   queryKey: ['posts'],
   queryFn: fetchPosts,
 })
+
+function Posts() {
+  const { data } = useQuery(postsOptions)
+  return <>{data?.map((post) => <p key={post.id}>{post.title}</p>)}</>
+}
 ```
 
 A parameterized factory, reused across a hook and an imperative call with the same cache entry:
@@ -147,20 +152,19 @@ queryClient.query(postOptions(id)).catch(noop)
 
 The same options object works with every API that accepts query options:
 ```tsx
-import {
-  noop,
-  queryOptions,
-  useQuery,
-  useSuspenseQuery,
-} from '@tanstack/preact-query'
+import { noop, queryOptions, useQuery } from '@tanstack/preact-query'
 
 const todosOptions = queryOptions({
   queryKey: ['todos'],
   queryFn: fetchTodos,
 })
 
-useQuery(todosOptions)
-useSuspenseQuery(todosOptions)
+function Todos() {
+  const { data } = useQuery(todosOptions)
+  return <>{data?.map((todo) => <p key={todo.id}>{todo.title}</p>)}</>
+}
+
+// Elsewhere, e.g. to warm the cache before rendering `<Todos>`:
 queryClient.query(todosOptions).catch(noop)
 queryClient.getQueryData(todosOptions.queryKey) // typed as Array<Todo> | undefined
 ```
@@ -171,7 +175,7 @@ queryClient.getQueryData(todosOptions.queryKey) // typed as Array<Todo> | undefi
 function queryOptions<TQueryFnData, TError, TData, TQueryKey>(options): UseQueryOptions<TQueryFnData, TError, TData, TQueryKey> & object & QueryKeyWithDataTag<TQueryKey, TQueryFnData, TError>;
 ```
 
-Defined in: [preact-query/src/queryOptions.ts:271](https://github.com/TanStack/query/blob/main/packages/preact-query/src/queryOptions.ts#L271)
+Defined in: [preact-query/src/queryOptions.ts:279](https://github.com/TanStack/query/blob/main/packages/preact-query/src/queryOptions.ts#L279)
 
 You can generally pass everything to `queryOptions` that you can also pass to `useQuery`. These options can
 be shared across hooks and imperative APIs such as `queryClient.query`. `options.queryKey` is required and
@@ -214,12 +218,17 @@ The same options object, typed so that `queryKey` carries the inferred data type
 ### Examples
 
 ```tsx
-import { queryOptions } from '@tanstack/preact-query'
+import { queryOptions, useQuery } from '@tanstack/preact-query'
 
 export const postsOptions = queryOptions({
   queryKey: ['posts'],
   queryFn: fetchPosts,
 })
+
+function Posts() {
+  const { data } = useQuery(postsOptions)
+  return <>{data?.map((post) => <p key={post.id}>{post.title}</p>)}</>
+}
 ```
 
 A parameterized factory, reused across a hook and an imperative call with the same cache entry:
@@ -243,20 +252,19 @@ queryClient.query(postOptions(id)).catch(noop)
 
 The same options object works with every API that accepts query options:
 ```tsx
-import {
-  noop,
-  queryOptions,
-  useQuery,
-  useSuspenseQuery,
-} from '@tanstack/preact-query'
+import { noop, queryOptions, useQuery } from '@tanstack/preact-query'
 
 const todosOptions = queryOptions({
   queryKey: ['todos'],
   queryFn: fetchTodos,
 })
 
-useQuery(todosOptions)
-useSuspenseQuery(todosOptions)
+function Todos() {
+  const { data } = useQuery(todosOptions)
+  return <>{data?.map((todo) => <p key={todo.id}>{todo.title}</p>)}</>
+}
+
+// Elsewhere, e.g. to warm the cache before rendering `<Todos>`:
 queryClient.query(todosOptions).catch(noop)
 queryClient.getQueryData(todosOptions.queryKey) // typed as Array<Todo> | undefined
 ```

docs/framework/preact/reference/functions/useInfiniteQuery.md

@@ -95,7 +95,7 @@ function Projects() {
 function useInfiniteQuery<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options, queryClient?): UseInfiniteQueryResult<TData, TError>;
 ```
 
-Defined in: [preact-query/src/useInfiniteQuery.ts:115](https://github.com/TanStack/query/blob/main/packages/preact-query/src/useInfiniteQuery.ts#L115)
+Defined in: [preact-query/src/useInfiniteQuery.ts:131](https://github.com/TanStack/query/blob/main/packages/preact-query/src/useInfiniteQuery.ts#L131)
 
 The options for `useInfiniteQuery` are identical to `useQuery`, with the addition of `queryFn`,
 `initialPageParam`, `getNextPageParam`, `getPreviousPageParam`, and `maxPages`.
@@ -161,25 +161,41 @@ actions, or add conditions like `hasNextPage && !isFetching`.
 import { useInfiniteQuery } from '@tanstack/preact-query'
 
 function Projects() {
-  const { data, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =
-    useInfiniteQuery({
-      queryKey: ['projects'],
-      queryFn: ({ pageParam }) => fetchProjects(pageParam),
-      initialPageParam: 0,
-      getNextPageParam: (lastPage) => lastPage.nextId,
-    })
+  const {
+    data,
+    isPending,
+    isError,
+    error,
+    fetchNextPage,
+    hasNextPage,
+    isFetching,
+    isFetchingNextPage,
+  } = useInfiniteQuery({
+    queryKey: ['projects'],
+    queryFn: ({ pageParam }) => fetchProjects(pageParam),
+    initialPageParam: 0,
+    getNextPageParam: (lastPage) => lastPage.nextId,
+  })
+
+  if (isPending) return 'Loading...'
+  if (isError) return <span>Error: {error.message}</span>
 
   return (
-    <button
-      onClick={() => fetchNextPage()}
-      disabled={!hasNextPage || isFetching}
-    >
-      {isFetchingNextPage
-        ? 'Loading more...'
-        : hasNextPage
-          ? 'Load More'
-          : 'Nothing more to load'}
-    </button>
+    <>
+      {data.pages.map((page) =>
+        page.projects.map((project) => <p key={project.id}>{project.name}</p>),
+      )}
+      <button
+        onClick={() => fetchNextPage()}
+        disabled={!hasNextPage || isFetching}
+      >
+        {isFetchingNextPage
+          ? 'Loading more...'
+          : hasNextPage
+            ? 'Load More'
+            : 'Nothing more to load'}
+      </button>
+    </>
   )
 }
 ```
@@ -190,7 +206,7 @@ function Projects() {
 function useInfiniteQuery<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options, queryClient?): UseInfiniteQueryResult<TData, TError>;
 ```
 
-Defined in: [preact-query/src/useInfiniteQuery.ts:175](https://github.com/TanStack/query/blob/main/packages/preact-query/src/useInfiniteQuery.ts#L175)
+Defined in: [preact-query/src/useInfiniteQuery.ts:207](https://github.com/TanStack/query/blob/main/packages/preact-query/src/useInfiniteQuery.ts#L207)
 
 The options for `useInfiniteQuery` are identical to `useQuery`, with the addition of `queryFn`,
 `initialPageParam`, `getNextPageParam`, `getPreviousPageParam`, and `maxPages`.
@@ -256,25 +272,41 @@ actions, or add conditions like `hasNextPage && !isFetching`.
 import { useInfiniteQuery } from '@tanstack/preact-query'
 
 function Projects() {
-  const { data, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =
-    useInfiniteQuery({
-      queryKey: ['projects'],
-      queryFn: ({ pageParam }) => fetchProjects(pageParam),
-      initialPageParam: 0,
-      getNextPageParam: (lastPage) => lastPage.nextId,
-    })
+  const {
+    data,
+    isPending,
+    isError,
+    error,
+    fetchNextPage,
+    hasNextPage,
+    isFetching,
+    isFetchingNextPage,
+  } = useInfiniteQuery({
+    queryKey: ['projects'],
+    queryFn: ({ pageParam }) => fetchProjects(pageParam),
+    initialPageParam: 0,
+    getNextPageParam: (lastPage) => lastPage.nextId,
+  })
+
+  if (isPending) return 'Loading...'
+  if (isError) return <span>Error: {error.message}</span>
 
   return (
-    <button
-      onClick={() => fetchNextPage()}
-      disabled={!hasNextPage || isFetching}
-    >
-      {isFetchingNextPage
-        ? 'Loading more...'
-        : hasNextPage
-          ? 'Load More'
-          : 'Nothing more to load'}
-    </button>
+    <>
+      {data.pages.map((page) =>
+        page.projects.map((project) => <p key={project.id}>{project.name}</p>),
+      )}
+      <button
+        onClick={() => fetchNextPage()}
+        disabled={!hasNextPage || isFetching}
+      >
+        {isFetchingNextPage
+          ? 'Loading more...'
+          : hasNextPage
+            ? 'Load More'
+            : 'Nothing more to load'}
+      </button>
+    </>
   )
 }
 ```

docs/framework/preact/reference/functions/useIsFetching.md

@@ -7,7 +7,7 @@ title: useIsFetching
 function useIsFetching(filters?, queryClient?): number;
 ```
 
-Defined in: [preact-query/src/useIsFetching.ts:42](https://github.com/TanStack/query/blob/main/packages/preact-query/src/useIsFetching.ts#L42)
+Defined in: [preact-query/src/useIsFetching.ts:44](https://github.com/TanStack/query/blob/main/packages/preact-query/src/useIsFetching.ts#L44)
 
 `useIsFetching` is an optional hook that returns the `number` of the queries that your application is loading or
 fetching in the background (useful for app-wide loading indicators).
@@ -39,10 +39,12 @@ background.
 ```tsx
 import { useIsFetching } from '@tanstack/preact-query'
 
-// How many queries are fetching?
-const isFetching = useIsFetching()
-// How many queries matching the posts prefix are fetching?
-const isFetchingPosts = useIsFetching({ queryKey: ['posts'] })
+function PostsFetchingIndicator() {
+  // How many queries matching the posts prefix are fetching?
+  const isFetchingPosts = useIsFetching({ queryKey: ['posts'] })
+
+  return isFetchingPosts ? <span>Refreshing posts...</span> : null
+}
 ```
 
 A global loading indicator for any query fetching in the background, not just the ones on screen:

docs/framework/preact/reference/functions/useIsMutating.md

@@ -7,7 +7,7 @@ title: useIsMutating
 function useIsMutating(filters?, queryClient?): number;
 ```
 
-Defined in: [preact-query/src/useMutationState.ts:33](https://github.com/TanStack/query/blob/main/packages/preact-query/src/useMutationState.ts#L33)
+Defined in: [preact-query/src/useMutationState.ts:35](https://github.com/TanStack/query/blob/main/packages/preact-query/src/useMutationState.ts#L35)
 
 `useIsMutating` is an optional hook that returns the `number` of mutations that your application is fetching
 (useful for app-wide loading indicators).
@@ -38,8 +38,10 @@ Will be the `number` of the mutations that your application is currently fetchin
 ```tsx
 import { useIsMutating } from '@tanstack/preact-query'
 
-// How many mutations are fetching?
-const isMutating = useIsMutating()
-// How many mutations matching the posts prefix are fetching?
-const isMutatingPosts = useIsMutating({ mutationKey: ['posts'] })
+function PostsMutatingIndicator() {
+  // How many mutations matching the posts prefix are in progress?
+  const isMutatingPosts = useIsMutating({ mutationKey: ['posts'] })
+
+  return isMutatingPosts ? <span>Saving posts...</span> : null
+}
 ```