diff --git a/docs/framework/react/guides/migrating-to-v5.md b/docs/framework/react/guides/migrating-to-v5.md index edc1b604b71..c87dc7bb792 100644 --- a/docs/framework/react/guides/migrating-to-v5.md +++ b/docs/framework/react/guides/migrating-to-v5.md @@ -9,7 +9,7 @@ v5 is a major version, so there are some breaking changes to be aware of: ### Supports a single signature, one object -useQuery and friends used to have many overloads in TypeScript - different ways how the function can be invoked. Not only this was tough to maintain, type wise, it also required a runtime check to see which type the first and the second parameter, to correctly create options. +useQuery and friends used to have many overloads in TypeScript: different ways how the function could be invoked. Not only was this tough to maintain, type wise, it also required a runtime check to see which types the first and the second parameter were, to correctly create options. now we only support the object format. diff --git a/docs/framework/react/plugins/createPersister.md b/docs/framework/react/plugins/createPersister.md index 24206b8bfc4..5bd71b1e6b8 100644 --- a/docs/framework/react/plugins/createPersister.md +++ b/docs/framework/react/plugins/createPersister.md @@ -39,6 +39,7 @@ bun add @tanstack/query-persist-client-core - Pass that `persister` as an option to your Query. This can be done either by passing it to the `defaultOptions` of the `QueryClient` or to any `useQuery` hook instance. - If you pass this `persister` as `defaultOptions`, all queries will be persisted to the provided `storage`. You can additionally narrow this down by passing `filters`. In contrast to the `persistClient` plugin, this will not persist the whole query client as a single item, but each query separately. As a key, the query hash is used. - If you provide this `persister` to a single `useQuery` hook, only this Query will be persisted. +- Note: `queryClient.setQueryData()` operations are not persisted, this means that if you perform an optimistic update and refresh the page before the query has been invalidated, your changes to the query data will be lost. See https://github.com/TanStack/query/issues/6310 This way, you do not need to store whole `QueryClient`, but choose what is worth to be persisted in your application. Each query is lazily restored (when the Query is first used) and persisted (after each run of the `queryFn`), so it does not need to be throttled. `staleTime` is also respected after restoring the Query, so if data is considered `stale`, it will be refetched immediately after restoring. If data is `fresh`, the `queryFn` will not run. diff --git a/docs/framework/vue/guides/disabling-queries.md b/docs/framework/vue/guides/disabling-queries.md index 11c0e1c8f20..50ee2fd77ca 100644 --- a/docs/framework/vue/guides/disabling-queries.md +++ b/docs/framework/vue/guides/disabling-queries.md @@ -18,15 +18,16 @@ const { isLoading, isError, data, error, refetch, isFetching } = useQuery({ ``` diff --git a/packages/vue-query/src/queryClient.ts b/packages/vue-query/src/queryClient.ts index c7e02bbdf08..b8d149261af 100644 --- a/packages/vue-query/src/queryClient.ts +++ b/packages/vue-query/src/queryClient.ts @@ -3,6 +3,9 @@ import { QueryClient as QC } from '@tanstack/query-core' import { cloneDeepUnref } from './utils' import { QueryCache } from './queryCache' import { MutationCache } from './mutationCache' +import type { UseQueryOptions } from './useQuery' +import type { Ref } from 'vue-demi' +import type { MaybeRefDeep, NoUnknown, QueryClientConfig } from './types' import type { CancelOptions, DefaultError, @@ -20,7 +23,6 @@ import type { MutationObserverOptions, NoInfer, OmitKeyof, - QueryClientConfig, QueryFilters, QueryKey, QueryObserverOptions, @@ -31,9 +33,6 @@ import type { SetDataOptions, Updater, } from '@tanstack/query-core' -import type { UseQueryOptions } from './useQuery' -import type { Ref } from 'vue-demi' -import type { MaybeRefDeep, NoUnknown } from './types' export class QueryClient extends QC { constructor(config: QueryClientConfig = {}) { diff --git a/packages/vue-query/src/types.ts b/packages/vue-query/src/types.ts index 4a5d82671c5..b6ab0ee210b 100644 --- a/packages/vue-query/src/types.ts +++ b/packages/vue-query/src/types.ts @@ -1,3 +1,13 @@ +import type { + DefaultError, + DehydrateOptions, + HydrateOptions, + MutationCache, + MutationObserverOptions, + OmitKeyof, + QueryCache, + QueryObserverOptions, +} from '@tanstack/query-core' import type { ComputedRef, Ref, UnwrapRef } from 'vue-demi' type Primitive = string | number | boolean | bigint | symbol | undefined | null @@ -48,3 +58,29 @@ export type DeepUnwrapRef = T extends UnwrapLeaf export type DistributiveOmit = T extends any ? Omit : never + +export interface DefaultOptions { + queries?: OmitKeyof< + QueryObserverOptions, + 'queryKey' | 'queryFn' + > & { + /** + * Return data in a shallow ref object (it is `false` by default). It can be set to `true` to return data in a shallow ref object, which can improve performance if your data does not need to be deeply reactive. + */ + shallow?: boolean + } + mutations?: MutationObserverOptions & { + /** + * Return data in a shallow ref object (it is `false` by default). It can be set to `true` to return data in a shallow ref object, which can improve performance if your data does not need to be deeply reactive. + */ + shallow?: boolean + } + hydrate?: HydrateOptions['defaultOptions'] + dehydrate?: DehydrateOptions +} + +export interface QueryClientConfig { + queryCache?: QueryCache + mutationCache?: MutationCache + defaultOptions?: DefaultOptions +} diff --git a/packages/vue-query/src/useMutation.ts b/packages/vue-query/src/useMutation.ts index 91aff2655b1..e68983106a1 100644 --- a/packages/vue-query/src/useMutation.ts +++ b/packages/vue-query/src/useMutation.ts @@ -29,6 +29,9 @@ type MutationResult = DistributiveOmit< type UseMutationOptionsBase = MutationObserverOptions & { + /** + * Return data in a shallow ref object (it is `false` by default). It can be set to `true` to return data in a shallow ref object, which can improve performance if your data does not need to be deeply reactive. + */ shallow?: boolean } diff --git a/packages/vue-query/src/useQuery.ts b/packages/vue-query/src/useQuery.ts index af3f1ea31d4..a27258c2aaa 100644 --- a/packages/vue-query/src/useQuery.ts +++ b/packages/vue-query/src/useQuery.ts @@ -51,6 +51,9 @@ export type UseQueryOptions< >[Property] > } & { + /** + * Return data in a shallow ref object (it is `false` by default). It can be set to `true` to return data in a shallow ref object, which can improve performance if your data does not need to be deeply reactive. + */ shallow?: boolean } > diff --git a/packages/vue-query/src/vueQueryPlugin.ts b/packages/vue-query/src/vueQueryPlugin.ts index 47997c00685..04d254ffdbf 100644 --- a/packages/vue-query/src/vueQueryPlugin.ts +++ b/packages/vue-query/src/vueQueryPlugin.ts @@ -4,7 +4,7 @@ import { isServer } from '@tanstack/query-core' import { QueryClient } from './queryClient' import { getClientKey } from './utils' import { setupDevtools } from './devtools/devtools' -import type { QueryClientConfig } from '@tanstack/query-core' +import type { QueryClientConfig } from './types' type ClientPersister = (client: QueryClient) => [() => void, Promise]