docs(preact-query): document functions and components with JSDoc for generated reference docs

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

@@ -7,7 +7,13 @@ title: HydrationBoundary
 function HydrationBoundary(__namedParameters): Element;
 ```
 
-Defined in: [preact-query/src/HydrationBoundary.tsx:26](https://github.com/TanStack/query/blob/main/packages/preact-query/src/HydrationBoundary.tsx#L26)
+Defined in: [preact-query/src/HydrationBoundary.tsx:51](https://github.com/TanStack/query/blob/main/packages/preact-query/src/HydrationBoundary.tsx#L51)
+
+`HydrationBoundary` adds a previously dehydrated state into the `queryClient` that would be returned by
+`useQueryClient()`. If the client already contains data, the new queries will be intelligently merged based on
+update timestamp.
+
+Note: Only `queries` can be dehydrated with an `HydrationBoundary`.
 
 ## Parameters
 
@@ -18,3 +24,13 @@ Defined in: [preact-query/src/HydrationBoundary.tsx:26](https://github.com/TanSt
 ## Returns
 
 `Element`
+
+## Example
+
+```tsx
+import { HydrationBoundary } from '@tanstack/preact-query'
+
+function App() {
+  return <HydrationBoundary state={dehydratedState}>...</HydrationBoundary>
+}
+```

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

@@ -7,7 +7,9 @@ title: QueryClientProvider
 function QueryClientProvider(__namedParameters): VNode;
 ```
 
-Defined in: [preact-query/src/QueryClientProvider.tsx:29](https://github.com/TanStack/query/blob/main/packages/preact-query/src/QueryClientProvider.tsx#L29)
+Defined in: [preact-query/src/QueryClientProvider.tsx:54](https://github.com/TanStack/query/blob/main/packages/preact-query/src/QueryClientProvider.tsx#L54)
+
+Use the `QueryClientProvider` component to connect and provide a `QueryClient` to your application.
 
 ## Parameters
 
@@ -18,3 +20,15 @@ Defined in: [preact-query/src/QueryClientProvider.tsx:29](https://github.com/Tan
 ## Returns
 
 `VNode`
+
+## Example
+
+```tsx
+import { QueryClient, QueryClientProvider } from '@tanstack/preact-query'
+
+const queryClient = new QueryClient()
+
+function App() {
+  return <QueryClientProvider client={queryClient}>...</QueryClientProvider>
+}
+```

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

@@ -7,7 +7,11 @@ title: QueryErrorResetBoundary
 function QueryErrorResetBoundary(__namedParameters): Element;
 ```
 
-Defined in: [preact-query/src/QueryErrorResetBoundary.tsx:48](https://github.com/TanStack/query/blob/main/packages/preact-query/src/QueryErrorResetBoundary.tsx#L48)
+Defined in: [preact-query/src/QueryErrorResetBoundary.tsx:116](https://github.com/TanStack/query/blob/main/packages/preact-query/src/QueryErrorResetBoundary.tsx#L116)
+
+When using **suspense** or **throwOnError** in your queries, you need a way to let queries know that you want to
+try again when re-rendering after some error occurred. With the `QueryErrorResetBoundary` component you can
+reset any query errors within the boundaries of the component.
 
 ## Parameters
 
@@ -18,3 +22,41 @@ Defined in: [preact-query/src/QueryErrorResetBoundary.tsx:48](https://github.com
 ## Returns
 
 `Element`
+
+## Example
+
+```tsx
+import { useErrorBoundary } from 'preact/hooks'
+import { QueryErrorResetBoundary } from '@tanstack/preact-query'
+
+function ErrorBoundary({
+  children,
+  reset,
+}: {
+  children: ComponentChildren
+  reset: () => void
+}) {
+  const [error, resetError] = useErrorBoundary(() => reset())
+
+  if (error) {
+    return (
+      <div>
+        There was an error!
+        <button onClick={() => resetError()}>Try again</button>
+      </div>
+    )
+  }
+
+  return children
+}
+
+const App = () => (
+  <QueryErrorResetBoundary>
+    {({ reset }) => (
+      <ErrorBoundary reset={reset}>
+        <Page />
+      </ErrorBoundary>
+    )}
+  </QueryErrorResetBoundary>
+)
+```

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

@@ -9,7 +9,11 @@ title: infiniteQueryOptions
 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:76](https://github.com/TanStack/query/blob/main/packages/preact-query/src/infiniteQueryOptions.ts#L76)
+Defined in: [preact-query/src/infiniteQueryOptions.ts:81](https://github.com/TanStack/query/blob/main/packages/preact-query/src/infiniteQueryOptions.ts#L81)
+
+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`.
+`options.queryKey` is required and is the query key to generate options for.
 
 ### Type Parameters
 
@@ -49,7 +53,11 @@ Defined in: [preact-query/src/infiniteQueryOptions.ts:76](https://github.com/Tan
 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:99](https://github.com/TanStack/query/blob/main/packages/preact-query/src/infiniteQueryOptions.ts#L99)
+Defined in: [preact-query/src/infiniteQueryOptions.ts:109](https://github.com/TanStack/query/blob/main/packages/preact-query/src/infiniteQueryOptions.ts#L109)
+
+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`.
+`options.queryKey` is required and is the query key to generate options for.
 
 ### Type Parameters
 
@@ -89,7 +97,11 @@ Defined in: [preact-query/src/infiniteQueryOptions.ts:99](https://github.com/Tan
 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:122](https://github.com/TanStack/query/blob/main/packages/preact-query/src/infiniteQueryOptions.ts#L122)
+Defined in: [preact-query/src/infiniteQueryOptions.ts:137](https://github.com/TanStack/query/blob/main/packages/preact-query/src/infiniteQueryOptions.ts#L137)
+
+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`.
+`options.queryKey` is required and is the query key to generate options for.
 
 ### Type Parameters
 

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

@@ -9,7 +9,9 @@ title: mutationOptions
 function mutationOptions<TData, TError, TVariables, TOnMutateResult>(options): WithRequired<UseMutationOptions<TData, TError, TVariables, TOnMutateResult>, "mutationKey">;
 ```
 
-Defined in: [preact-query/src/mutationOptions.ts:5](https://github.com/TanStack/query/blob/main/packages/preact-query/src/mutationOptions.ts#L5)
+Defined in: [preact-query/src/mutationOptions.ts:8](https://github.com/TanStack/query/blob/main/packages/preact-query/src/mutationOptions.ts#L8)
+
+You can generally pass everything to `mutationOptions` that you can also pass to `useMutation`.
 
 ### Type Parameters
 
@@ -45,7 +47,9 @@ Defined in: [preact-query/src/mutationOptions.ts:5](https://github.com/TanStack/
 function mutationOptions<TData, TError, TVariables, TOnMutateResult>(options): Omit<UseMutationOptions<TData, TError, TVariables, TOnMutateResult>, "mutationKey">;
 ```
 
-Defined in: [preact-query/src/mutationOptions.ts:19](https://github.com/TanStack/query/blob/main/packages/preact-query/src/mutationOptions.ts#L19)
+Defined in: [preact-query/src/mutationOptions.ts:25](https://github.com/TanStack/query/blob/main/packages/preact-query/src/mutationOptions.ts#L25)
+
+You can generally pass everything to `mutationOptions` that you can also pass to `useMutation`.
 
 ### Type Parameters
 

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

@@ -9,7 +9,11 @@ title: queryOptions
 function queryOptions<TQueryFnData, TError, TData, TQueryKey>(options): Omit<UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, "queryFn"> & object & QueryKeyWithDataTag<TQueryKey, TQueryFnData, TError>;
 ```
 
-Defined in: [preact-query/src/queryOptions.ts:53](https://github.com/TanStack/query/blob/main/packages/preact-query/src/queryOptions.ts#L53)
+Defined in: [preact-query/src/queryOptions.ts:71](https://github.com/TanStack/query/blob/main/packages/preact-query/src/queryOptions.ts#L71)
+
+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
+is the query key to generate options for.
 
 ### Type Parameters
 
@@ -39,13 +43,31 @@ Defined in: [preact-query/src/queryOptions.ts:53](https://github.com/TanStack/qu
 
 `Omit`\<[`UseQueryOptions`](../interfaces/UseQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>, `"queryFn"`\> & `object` & `QueryKeyWithDataTag`\<`TQueryKey`, `TQueryFnData`, `TError`\>
 
+### Example
+
+```tsx
+import { queryOptions } from '@tanstack/preact-query'
+
+export const pokemonOptions = queryOptions({
+  queryKey: ['pokemon'],
+  queryFn: async () => {
+    const response = await fetch('https://pokeapi.co/api/v2/pokemon/25')
+    return response.json()
+  },
+})
+```
+
 ## Call Signature
 
 ```ts
 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:63](https://github.com/TanStack/query/blob/main/packages/preact-query/src/queryOptions.ts#L63)
+Defined in: [preact-query/src/queryOptions.ts:99](https://github.com/TanStack/query/blob/main/packages/preact-query/src/queryOptions.ts#L99)
+
+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
+is the query key to generate options for.
 
 ### Type Parameters
 
@@ -75,13 +97,31 @@ Defined in: [preact-query/src/queryOptions.ts:63](https://github.com/TanStack/qu
 
 `OmitKeyof`\<[`UseQueryOptions`](../interfaces/UseQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\>, `"queryFn"`\> & `object` & `QueryKeyWithDataTag`\<`TQueryKey`, `TQueryFnData`, `TError`\>
 
+### Example
+
+```tsx
+import { queryOptions } from '@tanstack/preact-query'
+
+export const pokemonOptions = queryOptions({
+  queryKey: ['pokemon'],
+  queryFn: async () => {
+    const response = await fetch('https://pokeapi.co/api/v2/pokemon/25')
+    return response.json()
+  },
+})
+```
+
 ## Call Signature
 
 ```ts
 function queryOptions<TQueryFnData, TError, TData, TQueryKey>(options): UseQueryOptions<TQueryFnData, TError, TData, TQueryKey> & object & QueryKeyWithDataTag<TQueryKey, TQueryFnData, TError>;
 ```
 
-Defined in: [preact-query/src/queryOptions.ts:73](https://github.com/TanStack/query/blob/main/packages/preact-query/src/queryOptions.ts#L73)
+Defined in: [preact-query/src/queryOptions.ts:127](https://github.com/TanStack/query/blob/main/packages/preact-query/src/queryOptions.ts#L127)
+
+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
+is the query key to generate options for.
 
 ### Type Parameters
 
@@ -110,3 +150,17 @@ Defined in: [preact-query/src/queryOptions.ts:73](https://github.com/TanStack/qu
 ### Returns
 
 [`UseQueryOptions`](../interfaces/UseQueryOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`\> & `object` & `QueryKeyWithDataTag`\<`TQueryKey`, `TQueryFnData`, `TError`\>
+
+### Example
+
+```tsx
+import { queryOptions } from '@tanstack/preact-query'
+
+export const pokemonOptions = queryOptions({
+  queryKey: ['pokemon'],
+  queryFn: async () => {
+    const response = await fetch('https://pokeapi.co/api/v2/pokemon/25')
+    return response.json()
+  },
+})
+```

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

@@ -9,7 +9,10 @@ title: useInfiniteQuery
 function useInfiniteQuery<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options, queryClient?): DefinedUseInfiniteQueryResult<TData, TError>;
 ```
 
-Defined in: [preact-query/src/useInfiniteQuery.ts:21](https://github.com/TanStack/query/blob/main/packages/preact-query/src/useInfiniteQuery.ts#L21)
+Defined in: [preact-query/src/useInfiniteQuery.ts:28](https://github.com/TanStack/query/blob/main/packages/preact-query/src/useInfiniteQuery.ts#L28)
+
+The options for `useInfiniteQuery` are identical to `useQuery`, with the addition of `queryFn`,
+`initialPageParam`, `getNextPageParam`, `getPreviousPageParam`, and `maxPages`.
 
 ### Type Parameters
 
@@ -43,6 +46,9 @@ Defined in: [preact-query/src/useInfiniteQuery.ts:21](https://github.com/TanStac
 
 `QueryClient`
 
+Use this to use a custom QueryClient. Otherwise, the one from the nearest context will
+be used.
+
 ### Returns
 
 [`DefinedUseInfiniteQueryResult`](../type-aliases/DefinedUseInfiniteQueryResult.md)\<`TData`, `TError`\>
@@ -53,7 +59,10 @@ Defined in: [preact-query/src/useInfiniteQuery.ts:21](https://github.com/TanStac
 function useInfiniteQuery<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options, queryClient?): UseInfiniteQueryResult<TData, TError>;
 ```
 
-Defined in: [preact-query/src/useInfiniteQuery.ts:38](https://github.com/TanStack/query/blob/main/packages/preact-query/src/useInfiniteQuery.ts#L38)
+Defined in: [preact-query/src/useInfiniteQuery.ts:52](https://github.com/TanStack/query/blob/main/packages/preact-query/src/useInfiniteQuery.ts#L52)
+
+The options for `useInfiniteQuery` are identical to `useQuery`, with the addition of `queryFn`,
+`initialPageParam`, `getNextPageParam`, `getPreviousPageParam`, and `maxPages`.
 
 ### Type Parameters
 
@@ -87,6 +96,9 @@ Defined in: [preact-query/src/useInfiniteQuery.ts:38](https://github.com/TanStac
 
 `QueryClient`
 
+Use this to use a custom QueryClient. Otherwise, the one from the nearest context will
+be used.
+
 ### Returns
 
 [`UseInfiniteQueryResult`](../type-aliases/UseInfiniteQueryResult.md)\<`TData`, `TError`\>
@@ -97,7 +109,10 @@ Defined in: [preact-query/src/useInfiniteQuery.ts:38](https://github.com/TanStac
 function useInfiniteQuery<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options, queryClient?): UseInfiniteQueryResult<TData, TError>;
 ```
 
-Defined in: [preact-query/src/useInfiniteQuery.ts:55](https://github.com/TanStack/query/blob/main/packages/preact-query/src/useInfiniteQuery.ts#L55)
+Defined in: [preact-query/src/useInfiniteQuery.ts:110](https://github.com/TanStack/query/blob/main/packages/preact-query/src/useInfiniteQuery.ts#L110)
+
+The options for `useInfiniteQuery` are identical to `useQuery`, with the addition of `queryFn`,
+`initialPageParam`, `getNextPageParam`, `getPreviousPageParam`, and `maxPages`.
 
 ### Type Parameters
 
@@ -131,6 +146,45 @@ Defined in: [preact-query/src/useInfiniteQuery.ts:55](https://github.com/TanStac
 
 `QueryClient`
 
+Use this to use a custom QueryClient. Otherwise, the one from the nearest context will
+be used.
+
 ### Returns
 
 [`UseInfiniteQueryResult`](../type-aliases/UseInfiniteQueryResult.md)\<`TData`, `TError`\>
+
+The same properties as `useQuery`, with the addition of `data.pages`, `data.pageParams`,
+`fetchNextPage`, `fetchPreviousPage`, `hasNextPage`, `hasPreviousPage`, `isFetchingNextPage`, and
+`isFetchingPreviousPage`.
+
+Keep in mind that imperative fetch calls, such as `fetchNextPage`, may interfere with the default refetch
+behaviour, resulting in outdated data. Make sure to call these functions only in response to user actions,
+or add conditions like `hasNextPage && !isFetching`.
+
+### Example
+
+```tsx
+import { infiniteQueryOptions, useInfiniteQuery } from '@tanstack/preact-query'
+
+const projectsOptions = infiniteQueryOptions({
+  queryKey: ['projects'],
+  queryFn: ({ pageParam }) =>
+    fetch(`/api/projects?cursor=${pageParam}`).then((r) => r.json()),
+  initialPageParam: 0,
+  getNextPageParam: (lastPage) => lastPage.nextId,
+})
+
+function Projects() {
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
+    useInfiniteQuery(projectsOptions)
+
+  return (
+    <button
+      onClick={() => fetchNextPage()}
+      disabled={!hasNextPage || isFetchingNextPage}
+    >
+      Load More
+    </button>
+  )
+}
+```