diff --git a/docs/framework/preact/reference/functions/infiniteQueryOptions.md b/docs/framework/preact/reference/functions/infiniteQueryOptions.md index 206087481c..7e751c9bdb 100644 --- a/docs/framework/preact/reference/functions/infiniteQueryOptions.md +++ b/docs/framework/preact/reference/functions/infiniteQueryOptions.md @@ -95,7 +95,7 @@ function Projects() { function infiniteQueryOptions(options): OmitKeyof, "queryFn"> & object & QueryKeyWithDataTag, TError>; ``` -Defined in: [preact-query/src/infiniteQueryOptions.ts:240](https://github.com/TanStack/query/blob/main/packages/preact-query/src/infiniteQueryOptions.ts#L240) +Defined in: [preact-query/src/infiniteQueryOptions.ts:231](https://github.com/TanStack/query/blob/main/packages/preact-query/src/infiniteQueryOptions.ts#L231) 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`. @@ -142,13 +142,9 @@ automatically as the user scrolls. ### Example -A parameterized factory, reused across a hook and an imperative call with the same cache entry: +A parameterized factory, so the same options object can be reused per `postId`: ```tsx -import { - infiniteQueryOptions, - noop, - useInfiniteQuery, -} from '@tanstack/preact-query' +import { infiniteQueryOptions, useInfiniteQuery } from '@tanstack/preact-query' export const commentsOptions = (postId: string) => infiniteQueryOptions({ @@ -170,11 +166,6 @@ function Comments({ postId }: { postId: string }) { ) } - -// `commentsOptions` also works with imperative APIs like `queryClient.infiniteQuery` — -// see `useInfiniteQuery` for an example that warms the cache this way before rendering ``. -const postId = '1' -queryClient.infiniteQuery(commentsOptions(postId)).catch(noop) ``` ### See @@ -187,7 +178,7 @@ queryClient.infiniteQuery(commentsOptions(postId)).catch(noop) function infiniteQueryOptions(options): UseInfiniteQueryOptions & object & QueryKeyWithDataTag, TError>; ``` -Defined in: [preact-query/src/infiniteQueryOptions.ts:311](https://github.com/TanStack/query/blob/main/packages/preact-query/src/infiniteQueryOptions.ts#L311) +Defined in: [preact-query/src/infiniteQueryOptions.ts:293](https://github.com/TanStack/query/blob/main/packages/preact-query/src/infiniteQueryOptions.ts#L293) 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`. @@ -234,13 +225,9 @@ automatically as the user scrolls) and that use `skipToken` to disable the query ### Example -A parameterized factory, reused across a hook and an imperative call with the same cache entry: +A parameterized factory, so the same options object can be reused per `postId`: ```tsx -import { - infiniteQueryOptions, - noop, - useInfiniteQuery, -} from '@tanstack/preact-query' +import { infiniteQueryOptions, useInfiniteQuery } from '@tanstack/preact-query' export const commentsOptions = (postId: string) => infiniteQueryOptions({ @@ -262,11 +249,6 @@ function Comments({ postId }: { postId: string }) { ) } - -// `commentsOptions` also works with imperative APIs like `queryClient.infiniteQuery` — -// see `useInfiniteQuery` for an example that warms the cache this way before rendering ``. -const postId = '1' -queryClient.infiniteQuery(commentsOptions(postId)).catch(noop) ``` ### See diff --git a/docs/framework/preact/reference/functions/queryOptions.md b/docs/framework/preact/reference/functions/queryOptions.md index 4e6f33a105..3802e22028 100644 --- a/docs/framework/preact/reference/functions/queryOptions.md +++ b/docs/framework/preact/reference/functions/queryOptions.md @@ -84,7 +84,7 @@ function Posts() { function queryOptions(options): OmitKeyof, "queryFn"> & object & QueryKeyWithDataTag; ``` -Defined in: [preact-query/src/queryOptions.ts:213](https://github.com/TanStack/query/blob/main/packages/preact-query/src/queryOptions.ts#L213) +Defined in: [preact-query/src/queryOptions.ts:180](https://github.com/TanStack/query/blob/main/packages/preact-query/src/queryOptions.ts#L180) 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 @@ -124,11 +124,11 @@ The same options object, typed so that `queryKey` carries the inferred data type [useQuery](useQuery.md) to run a query with these options. -### Examples +### Example -A parameterized factory, reused across a hook and an imperative call with the same cache entry: +A parameterized factory, so the same options object can be reused per `id`: ```tsx -import { noop, queryOptions, useQuery } from '@tanstack/preact-query' +import { queryOptions, useQuery } from '@tanstack/preact-query' export const postOptions = (id: string) => queryOptions({ @@ -144,38 +144,6 @@ function Post({ id }: { id: string }) { return

{data.title}

} - -// `postOptions` also works with imperative APIs like `queryClient.query` — -// see `useQuery` for an example that warms the cache this way before rendering ``. -const postId = '1' -queryClient.query(postOptions(postId)).catch(noop) -``` - -The same options object works with every API that accepts query options: -```tsx -import { noop, queryOptions, useQuery } from '@tanstack/preact-query' - -const todosOptions = queryOptions({ - queryKey: ['todos'], - queryFn: fetchTodos, -}) - -function Todos() { - const { data, isPending, isError, error } = useQuery(todosOptions) - - if (isPending) return 'Loading...' - if (isError) return Error: {error.message} - - return ( -
    - {data.map((todo) =>
  • {todo.title}
  • )} -
- ) -} - -// The same options object works with the imperative APIs too: -queryClient.query(todosOptions).catch(noop) -queryClient.getQueryData(todosOptions.queryKey) // typed as Array | undefined ``` ## Call Signature @@ -184,7 +152,7 @@ queryClient.getQueryData(todosOptions.queryKey) // typed as Array | undefi function queryOptions(options): UseQueryOptions & object & QueryKeyWithDataTag; ``` -Defined in: [preact-query/src/queryOptions.ts:309](https://github.com/TanStack/query/blob/main/packages/preact-query/src/queryOptions.ts#L309) +Defined in: [preact-query/src/queryOptions.ts:243](https://github.com/TanStack/query/blob/main/packages/preact-query/src/queryOptions.ts#L243) 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 @@ -230,9 +198,9 @@ This is the only overload that accepts `queryFn: skipToken`, shown below. ### Examples -A parameterized factory, reused across a hook and an imperative call with the same cache entry: +A parameterized factory, so the same options object can be reused per `id`: ```tsx -import { noop, queryOptions, useQuery } from '@tanstack/preact-query' +import { queryOptions, useQuery } from '@tanstack/preact-query' export const postOptions = (id: string) => queryOptions({ @@ -248,38 +216,6 @@ function Post({ id }: { id: string }) { return

{data.title}

} - -// `postOptions` also works with imperative APIs like `queryClient.query` — -// see `useQuery` for an example that warms the cache this way before rendering ``. -const postId = '1' -queryClient.query(postOptions(postId)).catch(noop) -``` - -The same options object works with every API that accepts query options: -```tsx -import { noop, queryOptions, useQuery } from '@tanstack/preact-query' - -const todosOptions = queryOptions({ - queryKey: ['todos'], - queryFn: fetchTodos, -}) - -function Todos() { - const { data, isPending, isError, error } = useQuery(todosOptions) - - if (isPending) return 'Loading...' - if (isError) return Error: {error.message} - - return ( -
    - {data.map((todo) =>
  • {todo.title}
  • )} -
- ) -} - -// The same options object works with the imperative APIs too: -queryClient.query(todosOptions).catch(noop) -queryClient.getQueryData(todosOptions.queryKey) // typed as Array | undefined ``` A factory that disables the query, type safe, until `postId` is set: diff --git a/packages/preact-query/src/infiniteQueryOptions.ts b/packages/preact-query/src/infiniteQueryOptions.ts index ece6e2c7fb..b4985e6ed5 100644 --- a/packages/preact-query/src/infiniteQueryOptions.ts +++ b/packages/preact-query/src/infiniteQueryOptions.ts @@ -199,13 +199,9 @@ export function infiniteQueryOptions< * automatically as the user scrolls. * * @example - * A parameterized factory, reused across a hook and an imperative call with the same cache entry: + * A parameterized factory, so the same options object can be reused per `postId`: * ```tsx - * import { - * infiniteQueryOptions, - * noop, - * useInfiniteQuery, - * } from '@tanstack/preact-query' + * import { infiniteQueryOptions, useInfiniteQuery } from '@tanstack/preact-query' * * export const commentsOptions = (postId: string) => * infiniteQueryOptions({ @@ -227,11 +223,6 @@ export function infiniteQueryOptions< * * ) * } - * - * // `commentsOptions` also works with imperative APIs like `queryClient.infiniteQuery` — - * // see `useInfiniteQuery` for an example that warms the cache this way before rendering ``. - * const postId = '1' - * queryClient.infiniteQuery(commentsOptions(postId)).catch(noop) * ``` * * @see {@link useInfiniteQuery} to run an infinite query with these options. @@ -270,13 +261,9 @@ export function infiniteQueryOptions< * automatically as the user scrolls) and that use `skipToken` to disable the query until `postId` is set. * * @example - * A parameterized factory, reused across a hook and an imperative call with the same cache entry: + * A parameterized factory, so the same options object can be reused per `postId`: * ```tsx - * import { - * infiniteQueryOptions, - * noop, - * useInfiniteQuery, - * } from '@tanstack/preact-query' + * import { infiniteQueryOptions, useInfiniteQuery } from '@tanstack/preact-query' * * export const commentsOptions = (postId: string) => * infiniteQueryOptions({ @@ -298,11 +285,6 @@ export function infiniteQueryOptions< * * ) * } - * - * // `commentsOptions` also works with imperative APIs like `queryClient.infiniteQuery` — - * // see `useInfiniteQuery` for an example that warms the cache this way before rendering ``. - * const postId = '1' - * queryClient.infiniteQuery(commentsOptions(postId)).catch(noop) * ``` * * @see {@link useInfiniteQuery} to run an infinite query with these options. diff --git a/packages/preact-query/src/queryOptions.ts b/packages/preact-query/src/queryOptions.ts index ef9aec009f..b1632dd86b 100644 --- a/packages/preact-query/src/queryOptions.ts +++ b/packages/preact-query/src/queryOptions.ts @@ -157,9 +157,9 @@ export function queryOptions< * @returns The same options object, typed so that `queryKey` carries the inferred data type. * * @example - * A parameterized factory, reused across a hook and an imperative call with the same cache entry: + * A parameterized factory, so the same options object can be reused per `id`: * ```tsx - * import { noop, queryOptions, useQuery } from '@tanstack/preact-query' + * import { queryOptions, useQuery } from '@tanstack/preact-query' * * export const postOptions = (id: string) => * queryOptions({ @@ -175,39 +175,6 @@ export function queryOptions< * * return

{data.title}

* } - * - * // `postOptions` also works with imperative APIs like `queryClient.query` — - * // see `useQuery` for an example that warms the cache this way before rendering ``. - * const postId = '1' - * queryClient.query(postOptions(postId)).catch(noop) - * ``` - * - * @example - * The same options object works with every API that accepts query options: - * ```tsx - * import { noop, queryOptions, useQuery } from '@tanstack/preact-query' - * - * const todosOptions = queryOptions({ - * queryKey: ['todos'], - * queryFn: fetchTodos, - * }) - * - * function Todos() { - * const { data, isPending, isError, error } = useQuery(todosOptions) - * - * if (isPending) return 'Loading...' - * if (isError) return Error: {error.message} - * - * return ( - *
    - * {data.map((todo) =>
  • {todo.title}
  • )} - *
- * ) - * } - * - * // The same options object works with the imperative APIs too: - * queryClient.query(todosOptions).catch(noop) - * queryClient.getQueryData(todosOptions.queryKey) // typed as Array | undefined * ``` */ export function queryOptions< @@ -231,9 +198,9 @@ export function queryOptions< * @remarks This is the only overload that accepts `queryFn: skipToken`, shown below. * * @example - * A parameterized factory, reused across a hook and an imperative call with the same cache entry: + * A parameterized factory, so the same options object can be reused per `id`: * ```tsx - * import { noop, queryOptions, useQuery } from '@tanstack/preact-query' + * import { queryOptions, useQuery } from '@tanstack/preact-query' * * export const postOptions = (id: string) => * queryOptions({ @@ -249,39 +216,6 @@ export function queryOptions< * * return

{data.title}

* } - * - * // `postOptions` also works with imperative APIs like `queryClient.query` — - * // see `useQuery` for an example that warms the cache this way before rendering ``. - * const postId = '1' - * queryClient.query(postOptions(postId)).catch(noop) - * ``` - * - * @example - * The same options object works with every API that accepts query options: - * ```tsx - * import { noop, queryOptions, useQuery } from '@tanstack/preact-query' - * - * const todosOptions = queryOptions({ - * queryKey: ['todos'], - * queryFn: fetchTodos, - * }) - * - * function Todos() { - * const { data, isPending, isError, error } = useQuery(todosOptions) - * - * if (isPending) return 'Loading...' - * if (isError) return Error: {error.message} - * - * return ( - *
    - * {data.map((todo) =>
  • {todo.title}
  • )} - *
- * ) - * } - * - * // The same options object works with the imperative APIs too: - * queryClient.query(todosOptions).catch(noop) - * queryClient.getQueryData(todosOptions.queryKey) // typed as Array | undefined * ``` * * @example