Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
164 changes: 136 additions & 28 deletions docs/config.json
Original file line number Diff line number Diff line change
Expand Up @@ -1282,60 +1282,168 @@
"label": "vue",
"children": [
{
"label": "useQuery",
"to": "framework/vue/reference/useQuery"
"label": "Vue Reference",
"to": "framework/vue/reference/index"
},
{
"label": "useQueries",
"to": "framework/vue/reference/useQueries"
"label": "Classes / MutationCache",
"to": "framework/vue/reference/classes/MutationCache"
},
{
"label": "useInfiniteQuery",
"to": "framework/vue/reference/useInfiniteQuery"
"label": "Classes / QueryCache",
"to": "framework/vue/reference/classes/QueryCache"
},
{
"label": "useMutation",
"to": "framework/vue/reference/useMutation"
"label": "Classes / QueryClient",
"to": "framework/vue/reference/classes/QueryClient"
},
{
"label": "Types / DefinedInitialDataInfiniteOptions",
"to": "framework/vue/reference/type-aliases/DefinedInitialDataInfiniteOptions"
},
{
"label": "Types / DefinedInitialQueryOptions",
"to": "framework/vue/reference/type-aliases/DefinedInitialQueryOptions"
},
{
"label": "Types / DefinedInitialQueryOptionsWithDataTag",
"to": "framework/vue/reference/type-aliases/DefinedInitialQueryOptionsWithDataTag"
},
{
"label": "Types / MutationFilters",
"to": "framework/vue/reference/type-aliases/MutationFilters"
},
{
"label": "Types / MutationOptions",
"to": "framework/vue/reference/type-aliases/MutationOptions"
},
{
"label": "Types / MutationStateOptions",
"to": "framework/vue/reference/type-aliases/MutationStateOptions"
},
{
"label": "Types / QueryFilters",
"to": "framework/vue/reference/type-aliases/QueryFilters"
},
{
"label": "Types / QueryOptions",
"to": "framework/vue/reference/type-aliases/QueryOptions"
},
{
"label": "Types / UndefinedInitialDataInfiniteOptions",
"to": "framework/vue/reference/type-aliases/UndefinedInitialDataInfiniteOptions"
},
{
"label": "Types / UndefinedInitialQueryOptions",
"to": "framework/vue/reference/type-aliases/UndefinedInitialQueryOptions"
},
{
"label": "Types / UndefinedInitialQueryOptionsWithDataTag",
"to": "framework/vue/reference/type-aliases/UndefinedInitialQueryOptionsWithDataTag"
},
{
"label": "Types / UseInfiniteQueryOptions",
"to": "framework/vue/reference/type-aliases/UseInfiniteQueryOptions"
},
{
"label": "Types / UseInfiniteQueryReturnType",
"to": "framework/vue/reference/type-aliases/UseInfiniteQueryReturnType"
},
{
"label": "Types / UseMutationOptions",
"to": "framework/vue/reference/type-aliases/UseMutationOptions"
},
{
"label": "Types / UseMutationReturnType",
"to": "framework/vue/reference/type-aliases/UseMutationReturnType"
},
{
"label": "Types / UsePrefetchInfiniteQueryOptions",
"to": "framework/vue/reference/type-aliases/UsePrefetchInfiniteQueryOptions"
},
{
"label": "Types / UsePrefetchQueryOptions",
"to": "framework/vue/reference/type-aliases/UsePrefetchQueryOptions"
},
{
"label": "Types / UseQueriesOptions",
"to": "framework/vue/reference/type-aliases/UseQueriesOptions"
},
{
"label": "Types / UseQueriesResults",
"to": "framework/vue/reference/type-aliases/UseQueriesResults"
},
{
"label": "Types / UseQueryDefinedReturnType",
"to": "framework/vue/reference/type-aliases/UseQueryDefinedReturnType"
},
{
"label": "Types / UseQueryOptions",
"to": "framework/vue/reference/type-aliases/UseQueryOptions"
},
{
"label": "Types / UseQueryReturnType",
"to": "framework/vue/reference/type-aliases/UseQueryReturnType"
},
{
"label": "Types / VueQueryPluginOptions",
"to": "framework/vue/reference/type-aliases/VueQueryPluginOptions"
},
{
"label": "Variables / VueQueryPlugin",
"to": "framework/vue/reference/variables/VueQueryPlugin"
},
{
"label": "useIsFetching",
"to": "framework/vue/reference/useIsFetching"
"label": "Functions / infiniteQueryOptions",
"to": "framework/vue/reference/functions/infiniteQueryOptions"
},
{
"label": "useIsMutating",
"to": "framework/vue/reference/useIsMutating"
"label": "Functions / mutationOptions",
"to": "framework/vue/reference/functions/mutationOptions"
},
{
"label": "useMutationState",
"to": "framework/vue/reference/useMutationState"
"label": "Functions / queryOptions",
"to": "framework/vue/reference/functions/queryOptions"
},
{
"label": "useQueryClient",
"to": "framework/vue/reference/useQueryClient"
"label": "Functions / useInfiniteQuery",
"to": "framework/vue/reference/functions/useInfiniteQuery"
},
{
"label": "queryOptions",
"to": "framework/vue/reference/queryOptions"
"label": "Functions / useIsFetching",
"to": "framework/vue/reference/functions/useIsFetching"
},
{
"label": "infiniteQueryOptions",
"to": "framework/vue/reference/infiniteQueryOptions"
"label": "Functions / useIsMutating",
"to": "framework/vue/reference/functions/useIsMutating"
},
{
"label": "mutationOptions",
"to": "framework/vue/reference/mutationOptions"
"label": "Functions / useMutation",
"to": "framework/vue/reference/functions/useMutation"
},
{
"label": "usePrefetchQuery",
"to": "framework/vue/reference/usePrefetchQuery"
"label": "Functions / useMutationState",
"to": "framework/vue/reference/functions/useMutationState"
},
{
"label": "usePrefetchInfiniteQuery",
"to": "framework/vue/reference/usePrefetchInfiniteQuery"
"label": "Functions / usePrefetchInfiniteQuery",
"to": "framework/vue/reference/functions/usePrefetchInfiniteQuery"
},
{
"label": "hydration",
"to": "framework/vue/reference/hydration"
"label": "Functions / usePrefetchQuery",
"to": "framework/vue/reference/functions/usePrefetchQuery"
},
{
"label": "Functions / useQueries",
"to": "framework/vue/reference/functions/useQueries"
},
{
"label": "Functions / useQuery",
"to": "framework/vue/reference/functions/useQuery"
},
{
"label": "Functions / useQueryClient",
"to": "framework/vue/reference/functions/useQueryClient"
}
]
},
Expand Down
19 changes: 19 additions & 0 deletions docs/framework/vue/guides/ssr.md
Original file line number Diff line number Diff line change
Expand Up @@ -256,4 +256,23 @@ On the server, `gcTime` defaults to `Infinity` which disables manual garbage col

To clear the cache after it is not needed and to lower memory consumption, you can add a call to [`queryClient.clear()`](../../../reference/QueryClient/#queryclientclear) after the request is handled and dehydrated state has been sent to the client.

## `dehydrate`/`hydrate` options

`dehydrate` and `hydrate` are re-exported from `@tanstack/query-core`, so they're available directly from `@tanstack/vue-query` β€” as used throughout this guide.

`dehydrate(client, options?)` accepts a `DehydrateOptions` object:

- `shouldDehydrateMutation: (mutation) => boolean` β€” whether to dehydrate a given mutation. Called for each mutation in the cache; defaults to only including paused mutations. To extend the default behavior instead of replacing it, import and call `defaultShouldDehydrateMutation` as part of your return statement.
- `shouldDehydrateQuery: (query) => boolean` β€” whether to dehydrate a given query. Called for each query in the cache; defaults to only including successful queries (see [above](#only-successful-queries-are-included-in-dehydration)). Extend it the same way, with `defaultShouldDehydrateQuery`.
- `serializeData?: (data) => any` β€” transforms (serializes) data during dehydration.
- `shouldRedactErrors?: (error) => boolean` β€” only applies to queries still `pending` at dehydration time, whose promise is dehydrated too: decides whether to redact the error if that promise later rejects. Defaults to redacting all such errors. Does **not** apply to `query.state.error` on already-settled queries β€” that error is included in the dehydrated state as-is, so sanitize it yourself via `shouldDehydrateQuery` if it may contain sensitive data.

`hydrate(client, dehydratedState, options?)` accepts a `HydrateOptions` object:

- `defaultOptions.mutations` β€” default mutation options for the hydrated mutations.
- `defaultOptions.queries` β€” default query options for the hydrated queries.
- `defaultOptions.deserializeData?: (data) => any` β€” transforms (deserializes) data before it's put into the cache.

One caveat with `hydrate`: if a query being hydrated already exists in the cache, it's only overwritten when the incoming data is newer than what's already there β€” otherwise it's silently skipped.

Alternatively, you can set a smaller `gcTime`.
2 changes: 1 addition & 1 deletion docs/framework/vue/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,6 @@ replace: { 'React': 'Vue', 'react-query': 'vue-query' }

## You talked me into it, so what now?

- Learn Vue Query at your own pace with our amazingly thorough [Walkthrough Guide](./installation) and [API Reference](./reference/useQuery)
- Learn Vue Query at your own pace with our amazingly thorough [Walkthrough Guide](./installation) and [API Reference](./reference/functions/useQuery)

[//]: # 'Materials'
2 changes: 1 addition & 1 deletion docs/framework/vue/reactivity.md
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ export function useUserProjects(userId: MaybeRef<string>) {
}
```

More details on this option can be found on the [useQuery reference](./reference/useQuery.md) page.
More details on this option can be found on the [useQuery reference](./reference/functions/useQuery.md) page.

## Immutability

Expand Down
113 changes: 113 additions & 0 deletions docs/framework/vue/reference/classes/MutationCache.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
---
id: MutationCache
title: MutationCache
---

Defined in: [vue-query/src/mutationCache.ts:15](https://github.com/TanStack/query/blob/main/packages/vue-query/src/mutationCache.ts#L15)

Vue-aware subclass of `@tanstack/query-core`'s `MutationCache`. `find`/`findAll` also accept a
MaybeRefDeep filters object, so `ref`s can be passed directly without unwrapping. Access it via
`queryClient.getMutationCache()` β€” `QueryClient` constructs one of these by default.

## Extends

- `MutationCache`

## Constructors

### Constructor

```ts
new MutationCache(config?): MutationCache;
```

Defined in: query-core/dist-ts/src/mutationCache.d.ts:47

#### Parameters

##### config?

`MutationCacheConfig`

#### Returns

`MutationCache`

#### Inherited from

```ts
MC.constructor
```

## Methods

### find()

```ts
find<TData, TError, TVariables, TOnMutateResult>(filters):
| Mutation<TData, TError, TVariables, TOnMutateResult>
| undefined;
```

Defined in: [vue-query/src/mutationCache.ts:16](https://github.com/TanStack/query/blob/main/packages/vue-query/src/mutationCache.ts#L16)

#### Type Parameters

##### TData

`TData` = `unknown`

##### TError

`TError` = `Error`

##### TVariables

`TVariables` = `any`

##### TOnMutateResult

`TOnMutateResult` = `unknown`

#### Parameters

##### filters

`MaybeRefDeep`\<`MutationFilters`\<`unknown`, `Error`, `unknown`, `unknown`\>\>

#### Returns

\| `Mutation`\<`TData`, `TError`, `TVariables`, `TOnMutateResult`\>
\| `undefined`

#### Overrides

```ts
MC.find
```

***

### findAll()

```ts
findAll(filters): Mutation<unknown, Error, unknown, unknown>[];
```

Defined in: [vue-query/src/mutationCache.ts:27](https://github.com/TanStack/query/blob/main/packages/vue-query/src/mutationCache.ts#L27)

#### Parameters

##### filters

`MaybeRefDeep`\<`MutationFilters`\<`unknown`, `Error`, `unknown`, `unknown`\>\> = `{}`

#### Returns

`Mutation`\<`unknown`, `Error`, `unknown`, `unknown`\>[]

#### Overrides

```ts
MC.findAll
```
Loading
Loading