TanStack Query Vue

https://tanstack.com/query/latest/docs/framework/vue/
Admin
TanStack Query Vue is a powerful data synchronization library for Vue applications that manages...
Tokens:159,193
Snippets:1,220
Trust Score:10
Update:6 days ago
Show doc for...
Tokens:
Raw
### Example: build()

Source: https://tanstack.com/query/latest/docs/framework/vue/reference/classes/QueryCache.md

Example of using the build() method to get or create a query with a given queryKey and queryFn.

```typescript
const queryCache = queryClient.getQueryCache()

const query = queryCache.build(queryClient, {
  queryKey: ['posts'],
  queryFn: fetchPosts,
})
```

--------------------------------

### Use useQuery with <script setup>

Source: https://tanstack.com/query/latest/docs/framework/vue/installation

Example of using useQuery inside a <script setup> block, returning reactive properties for the template.

```vue
<script setup>
import { useQuery } from '@tanstack/vue-query'

const { isPending, isFetching, isError, data, error } = useQuery({
  queryKey: ['todos'],
  queryFn: getTodos,
})
</script>

<template>...</template>
```

--------------------------------

### findAll() usage example

Source: https://tanstack.com/query/latest/docs/framework/vue/reference/classes/QueryCache.md

Example of using the findAll() method to get all queries matching a query key.

```typescript
const queryCache = queryClient.getQueryCache()

const queries = queryCache.findAll({ queryKey: ['posts'] })
```

--------------------------------

### Nuxt 3 Minimal Starter README

Source: https://tanstack.com/query/latest/docs/framework/vue/examples/nuxt3

The README for the Nuxt 3 minimal starter. It includes setup, development, and production commands: pnpm install, pnpm dev, and pnpm build.

```markdown
# Nuxt 3 Minimal Starter

We recommend looking at the [documentation](https://nuxt.com/docs/3.x/getting-started/introduction).

## Setup

Make sure to install the dependencies

```bash
pnpm install
```

## Development

Start the development server on http://localhost:3000

```bash
pnpm dev
```

## Production

Build the application for production:

```bash
pnpm build
```

Check out the [deployment documentation](https://nuxt.com/docs/3.x/getting-started/deployment).
```

--------------------------------

### get() usage example

Source: https://tanstack.com/query/latest/docs/framework/vue/reference/classes/QueryCache.md

Example of using the get() method to retrieve a query by its hash.

```typescript
const queryCache = queryClient.getQueryCache()
const queryHash = hashKey(['posts'])

const query = queryCache.get(queryHash)
```

--------------------------------

### queryOptions Usage Example in Vue

Source: https://tanstack.com/query/latest/docs/framework/vue/reference/functions/queryOptions.md

A Vue script setup example showing a parameterized factory function that reuses query options per id.

```vue
<script setup lang="ts">
import { queryOptions, useQuery } from '@tanstack/vue-query'

function postOptions(id: string) {
  return queryOptions({
    queryKey: ['post', id],
    queryFn: () => fetchPost(id),
  })
}

const { data, isPending, isError, error } = useQuery(postOptions('1'))
</script>
```

--------------------------------

### Install Vue Query with bun

Source: https://tanstack.com/query/latest/docs/framework/vue/installation

Install the @tanstack/vue-query package using bun.

```bash
bun add @tanstack/vue-query
```

--------------------------------

### Install @tanstack/query-persist-client-core

Source: https://tanstack.com/query/latest/docs/framework/vue/plugins/createPersister.md

Install the @tanstack/query-persist-client-core package using your preferred package manager.

```bash
npm install @tanstack/query-persist-client-core
```

```bash
pnpm add @tanstack/query-persist-client-core
```

```bash
yarn add @tanstack/query-persist-client-core
```

```bash
bun add @tanstack/query-persist-client-core
```

--------------------------------

### Install Vue Query with yarn

Source: https://tanstack.com/query/latest/docs/framework/vue/installation

Install the @tanstack/vue-query package using yarn.

```bash
yarn add @tanstack/vue-query
```

--------------------------------

### Install Vue Query with npm

Source: https://tanstack.com/query/latest/docs/framework/vue/installation

Install the @tanstack/vue-query package using npm.

```bash
npm i @tanstack/vue-query
```

--------------------------------

### setOptions() usage example

Source: https://tanstack.com/query/latest/docs/framework/vue/reference/classes/QueryObserver.md

Example of setting observer options for a query, then switching to a different query by updating the queryKey and queryFn.

```typescript
observer.setOptions({ queryKey: ['posts', 1], queryFn: () => fetchPost(1) })
// later: switch to a different query, reusing the same observer
observer.setOptions({ queryKey: ['posts', 2], queryFn: () => fetchPost(2) })
```

--------------------------------

### Install Vue Query with pnpm

Source: https://tanstack.com/query/latest/docs/framework/vue/installation

Install the @tanstack/vue-query package using pnpm.

```bash
pnpm add @tanstack/vue-query
```

--------------------------------

### Install @tanstack/vue-query-devtools with bun

Source: https://tanstack.com/query/latest/docs/framework/vue/devtools.md

Install the Vue Query Devtools package using bun. The devtools are only included in development bundles by default.

```bash
bun add @tanstack/vue-query-devtools
```

--------------------------------

### getAll() usage example

Source: https://tanstack.com/query/latest/docs/framework/vue/reference/classes/QueryCache.md

Example of using the getAll() method to retrieve all queries from the cache.

```typescript
const queryCache = queryClient.getQueryCache()

const queries = queryCache.getAll()
```

--------------------------------

### find() usage example

Source: https://tanstack.com/query/latest/docs/framework/vue/reference/classes/QueryCache.md

Example of using the find() method to get a query from the cache by query key.

```typescript
const queryCache = queryClient.getQueryCache()

const query = queryCache.find({ queryKey: ['posts'] })
```

--------------------------------

### QueryClient.prototype.mount

Source: https://tanstack.com/query/latest/docs/framework/vue/reference/classes/QueryClient.md

Starts listening for focus/online events and resumes paused mutations when the adapter provider mounts.

```APIDOC
## mount

### Description
Called by a framework adapter's `QueryClientProvider`-equivalent when it mounts, to start listening for focus/online events and resume paused mutations. Ref-counted via an internal mount count, so nested or multiple providers sharing the same `QueryClient` don't tear down shared listeners until the last one unmounts.

### Signature
```ts
mount(): void
```

### Parameters
None.

### Return Value
`void`
```

--------------------------------

### fetchNextPage() usage example

Source: https://tanstack.com/query/latest/docs/framework/vue/reference/classes/InfiniteQueryObserver.md

Example showing how to check hasNextPage and call fetchNextPage() to load the next page.

```typescript
const { hasNextPage } = observer.getCurrentResult()

if (hasNextPage) {
  await observer.fetchNextPage()
}
```

--------------------------------

### Install VueQueryPlugin with default configuration

Source: https://tanstack.com/query/latest/docs/framework/vue/reference/variables/VueQueryPlugin.md

Installs the plugin on a Vue application using default settings.

```ts
import { createApp } from 'vue'
import { VueQueryPlugin } from '@tanstack/vue-query'

const app = createApp(App)
app.use(VueQueryPlugin)
```

--------------------------------

### Example: clear()

Source: https://tanstack.com/query/latest/docs/framework/vue/reference/classes/QueryCache.md

Example of using the clear() method to remove all queries from the cache.

```typescript
const queryCache = queryClient.getQueryCache()

queryCache.clear()
```

--------------------------------

### subscribe usage example

Source: https://tanstack.com/query/latest/docs/framework/vue/reference/classes/InfiniteQueryObserver.md

Example of subscribing to an observer and then unsubscribing. The listener reacts to updates.

```ts
const unsubscribe = subscribable.subscribe(() => {
  // react to the update
})

unsubscribe()
```

--------------------------------

### Vue component using useIsMutating with mutationKey

Source: https://tanstack.com/query/latest/docs/framework/vue/reference/functions/useIsMutating.md

Vue 3 script setup example importing useIsMutating from '@tanstack/vue-query' and using it with a mutationKey filter to count pending mutations for the 'posts' prefix. The template displays a loading message when the count is truthy.

```vue
<script setup lang="ts">
import { useIsMutating } from '@tanstack/vue-query'

// How many mutations matching the posts prefix are in progress?
const isMutatingPosts = useIsMutating({ mutationKey: ['posts'] })
</script>

<template>
  <span v-if="isMutatingPosts">Saving posts...</span>
</template>
```

--------------------------------

### fetchOptimistic() usage example

Source: https://tanstack.com/query/latest/docs/framework/vue/reference/classes/InfiniteQueryObserver.md

Example showing how to prefetch data using fetchOptimistic() with a query key and query function.

```typescript
const result = await observer.fetchOptimistic({
  queryKey: ['posts', 2],
  queryFn: () => fetchPost(2),
})
console.log(result.data)
```

--------------------------------

### fetchPreviousPage() usage example

Source: https://tanstack.com/query/latest/docs/framework/vue/reference/classes/InfiniteQueryObserver.md

Example showing how to check hasPreviousPage and call fetchPreviousPage() to load the previous page.

```typescript
const { hasPreviousPage } = observer.getCurrentResult()

if (hasPreviousPage) {
  await observer.fetchPreviousPage()
}
```

--------------------------------

### Install @tanstack/vue-query-devtools with yarn

Source: https://tanstack.com/query/latest/docs/framework/vue/devtools.md

Install the Vue Query Devtools package using yarn. The devtools are only included in development bundles by default.

```bash
yarn add @tanstack/vue-query-devtools
```

--------------------------------

### Install @tanstack/vue-query-devtools with pnpm

Source: https://tanstack.com/query/latest/docs/framework/vue/devtools.md

Install the Vue Query Devtools package using pnpm. The devtools are only included in development bundles by default.

```bash
pnpm add @tanstack/vue-query-devtools
```

--------------------------------

### queryOptions Usage Example (Vue)

Source: https://tanstack.com/query/latest/docs/framework/vue/reference/functions/queryOptions.md

Vue 3 example showing how to use queryOptions with a getter that closes over a ref. Pass the getter itself to useQuery so the query reacts to reactive changes.

```vue
<script setup lang="ts">
import { ref } from 'vue'
import { queryOptions, useQuery } from '@tanstack/vue-query'

const postId = ref(1)
const postOptions = queryOptions(() => ({
  queryKey: ['post', postId.value],
  queryFn: () => fetchPost(postId.value),
  initialData: { id: postId.value, title: '' },
}))

// Pass the getter itself, not `postOptions()`, so the query keeps reacting to `postId` changes.
const { data } = useQuery(postOptions)
</script>
```

--------------------------------

### Implementing Infinite Loading with useInfiniteQuery

Source: https://tanstack.com/query/latest/docs/framework/vue/guides/infinite-queries.md

A complete Vue component example demonstrating the use of useInfiniteQuery to fetch and display paginated project data with a 'Load More' button.

```vue
<script setup>
import { useInfiniteQuery } from '@tanstack/vue-query'

const fetchProjects = async ({ pageParam }) => {
  const res = await fetch('/api/projects?cursor=' + pageParam)
  return res.json()
}

const {
  data,
  error,
  fetchNextPage,
  hasNextPage,
  isFetching,
  isFetchingNextPage,
  isPending,
  isError,
} = useInfiniteQuery({
  queryKey: ['projects'],
  queryFn: fetchProjects,
  initialPageParam: 0,
  getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
})
</script>

<template>
  <span v-if="isPending">Loading...</span>
  <span v-else-if="isError">Error: {{ error.message }}</span>
  <div v-else-if="data">
    <span v-if="isFetching && !isFetchingNextPage">Fetching...</span>
    <ul v-for="(group, index) in data.pages" :key="index">
      <li v-for="project in group.projects" :key="project.id">
        {{ project.name }}
      </li>
    </ul>
    <button
      @click="() => fetchNextPage()"
      :disabled="!hasNextPage || isFetchingNextPage"
    >
      <span v-if="isFetchingNextPage">Loading more...</span>
      <span v-else-if="hasNextPage">Load More</span>
      <span v-else>Nothing more to load</span>
    </button>
  </div>
</template>
```

--------------------------------

### Install @tanstack/vue-query-devtools with npm

Source: https://tanstack.com/query/latest/docs/framework/vue/devtools.md

Install the Vue Query Devtools package using npm. The devtools are only included in development bundles by default.

```bash
npm i @tanstack/vue-query-devtools
```

--------------------------------

### App.vue - Basic Vue Query Example

Source: https://tanstack.com/query/latest/docs/framework/vue/examples/basic

The main App component for the basic Vue Query example. It tracks visited posts and manages the currently selected post ID, rendering either the Post or Posts component. Includes VueQueryDevtools for development.

```Vue
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { VueQueryDevtools } from '@tanstack/vue-query-devtools'

import Posts from './Posts.vue'
import Post from './Post.vue'

export default defineComponent({
  name: 'App',
  components: { Posts, Post, VueQueryDevtools },
  setup() {
    const visitedPosts = ref(new Set())
    const isVisited = (id: number) => visitedPosts.value.has(id)

    const postId = ref(-1)
    const setPostId = (id: number) => {
      visitedPosts.value.add(id)
      postId.value = id
    }

    return {
      isVisited,
      postId,
      setPostId,
    }
  },
})
</script>

<template>
  <h1>Vue Query - Basic</h1>
  <p>
    As you visit the posts below, you will notice them in a loading state the
    first time you load them. However, after you return to this list and click
    on any posts you have already visited again, you will see them load
    instantly and background refresh right before your eyes!
    <strong>
      (You may need to throttle your network speed to simulate longer loading
      sequences)
    </strong>
  </p>
  <Post v-if="postId > -1" :postId="postId" @setPostId="setPostId" />
  <Posts v-else :isVisited="isVisited" @setPostId="setPostId" />
  <VueQueryDevtools />
</template>

```

--------------------------------

### App.vue - Vue 2.6 Basic Example

Source: https://tanstack.com/query/latest/docs/framework/vue/examples/2.6-basic

The main App component for the Vue 2.6 basic example. It uses the composition API with @vue/composition-api, tracks visited posts with a Set, and conditionally renders either the Post or Posts component based on the selected postId.

```Vue
<script lang="ts">
import { defineComponent, ref } from '@vue/composition-api'

import Posts from './Posts.vue'
import Post from './Post.vue'

export default defineComponent({
  name: 'App',
  components: { Posts, Post },
  setup() {
    const visitedPosts = ref(new Set())
    const isVisited = (id: number) => visitedPosts.value.has(id)

    const postId = ref(-1)
    const setPostId = (id: number) => {
      visitedPosts.value.add(id)
      postId.value = id
    }

    return {
      isVisited,
      postId,
      setPostId,
    }
  },
})
</script>

<template>
  <div>
    <h1>Vue Query - Basic</h1>
    <p>
      As you visit the posts below, you will notice them in a loading state the
      first time you load them. However, after you return to this list and click
      on any posts you have already visited again, you will see them load
      instantly and background refresh right before your eyes!
      <strong>
        (You may need to throttle your network speed to simulate longer loading
        sequences)
      </strong>
    </p>
    <Post v-if="postId > -1" :postId="postId" @setPostId="setPostId" />
    <Posts v-else :isVisited="isVisited" @setPostId="setPostId" />
  </div>
</template>
```

--------------------------------

### getCurrentResult usage example

Source: https://tanstack.com/query/latest/docs/framework/vue/reference/classes/InfiniteQueryObserver.md

Example of calling getCurrentResult on an observer to get the latest result and logging its status and data.

```ts
const result = observer.getCurrentResult()
console.log(result.status, result.data)
```

--------------------------------

### useQueryClient(id?)

Source: https://tanstack.com/query/latest/docs/framework/vue/reference/functions/useQueryClient.md

Retrieves the QueryClient installed by VueQueryPlugin via Vue's inject. Must be called inside setup() or another function that supports an injection context.

```APIDOC
## useQueryClient(id?)

### Description
Retrieves the `QueryClient` installed by `VueQueryPlugin`, via Vue's `inject`. Must be called inside `setup()` or another function that supports an injection context.

### Signature
```ts
function useQueryClient(id?: string): QueryClient;
```

### Parameters
- **id** (`string`, optional, default: `''`) - The `queryClientKey` passed to `VueQueryPlugin` — only needed when multiple `QueryClient`s are installed in the same app.

### Returns
- **QueryClient** - The installed `QueryClient`.

### Throws
- Throws an error if called outside an injection context, or if no `QueryClient` was installed via `VueQueryPlugin`.

### Example
```vue
<script setup lang="ts">
import { useQueryClient } from '@tanstack/vue-query'

const queryClient = useQueryClient()

function invalidate() {
  queryClient.invalidateQueries({ queryKey: ['todos'] })
}
</script>
```
```

--------------------------------

### VueQueryPlugin.install(app, options?)

Source: https://tanstack.com/query/latest/docs/framework/vue/reference/variables/VueQueryPlugin.md

Installs a QueryClient on a Vue application instance, allowing descendant components to access QueryClient via useQueryClient. Accepts optional configuration or an existing QueryClient instance.

```APIDOC
### Function
`VueQueryPlugin.install(app, options?)`

### Description
Installs a `QueryClient` on the Vue app, making it available to every descendant component through `useQueryClient` — functioning as an app-level plugin equivalent of `QueryClientProvider`.

### Parameters
- **app** (`any`) - The Vue application instance.
- **options** (`VueQueryPluginOptions`, optional) - Configuration options for the plugin, such as a custom `queryClient` instance or `queryClientConfig` defaults. Defaults to `{}`.

### Returns
`void`

### Usage Examples

**Basic Plugin Installation:**
```ts
import { createApp } from 'vue'
import { VueQueryPlugin } from '@tanstack/vue-query'

const app = createApp(App)
app.use(VueQueryPlugin)
```

**Passing a Custom QueryClient:**
```ts
import { QueryClient, VueQueryPlugin } from '@tanstack/vue-query'

const queryClient = new QueryClient()
app.use(VueQueryPlugin, { queryClient })
```

**Passing QueryClient Configuration:**
```ts
app.use(VueQueryPlugin, {
  queryClientConfig: {
    defaultOptions: { queries: { staleTime: 5 * 1000 } },
  },
})
```
```

--------------------------------

### Invalidate queries by prefix with useQueryClient

Source: https://tanstack.com/query/latest/docs/framework/vue/guides/query-invalidation.md

Uses `useQueryClient` to get the client and invalidates queries whose key starts with 'todos'. Both queries with keys `['todos']` and `['todos', { page: 1 }]` are invalidated.

```tsx
import { useQuery, useQueryClient } from '@tanstack/vue-query'

// Get QueryClient from the context
const queryClient = useQueryClient()

queryClient.invalidateQueries({ queryKey: ['todos'] })

// Both queries below will be invalidated
const todoListQuery = useQuery({
  queryKey: ['todos'],
  queryFn: fetchTodoList,
})
const todoListQuery = useQuery({
  queryKey: ['todos', { page: 1 }],
  queryFn: fetchTodoList,
})
```

--------------------------------

### Get all variables of all running mutations

Source: https://tanstack.com/query/latest/docs/framework/vue/reference/functions/useMutationState.md

Vue SFC example using useMutationState with a status filter of 'pending' and a select function to retrieve the variables of each pending mutation. The result is a ref that can be used in the template.

```vue
<script setup lang="ts">
import { useMutationState } from '@tanstack/vue-query'

const pendingVariables = useMutationState({
  filters: { status: 'pending' },
  select: (mutation) => mutation.state.variables,
})
</script>

<template>{{ pendingVariables.length }} posts saving...</template>
```

--------------------------------

### Get all data for specific mutations via mutationKey

Source: https://tanstack.com/query/latest/docs/framework/vue/reference/functions/useMutationState.md

Vue SFC example showing how to use useMutationState with a mutationKey filter and a select function to retrieve the data of successful mutations. The mutationKey must match the key of the mutation you want to track.

```vue
<script setup lang="ts">
import { useMutation, useMutationState } from '@tanstack/vue-query'

const mutationKey = ['posts']

// Some mutation that we want to get the state for
const mutation = useMutation({
  mutationKey,
  mutationFn: createPosts,
})

const savedPosts = useMutationState({
  // this mutation key needs to match the mutation key of the given mutation (see above)
  filters: { mutationKey, status: 'success' },
  select: (mutation) => mutation.state.data,
})
</script>

<template>
  <button @click="mutation.mutate(['New Post'])">
    Create post ({{ savedPosts.length }} saved so far)
  </button>
</template>
```

--------------------------------

### Access the latest successful mutation data via mutationKey

Source: https://tanstack.com/query/latest/docs/framework/vue/reference/functions/useMutationState.md

Vue SFC example demonstrating how to get the latest successful mutation data by filtering with a mutationKey and status 'success', then using a computed property to access the last item in the returned array.

```vue
<script setup lang="ts">
import { computed } from 'vue'
import { useMutationState } from '@tanstack/vue-query'

const savedPosts = useMutationState({
  filters: { mutationKey: ['posts'], status: 'success' },
  select: (mutation) => mutation.state.data,
})

const latestSavedPost = computed(() => savedPosts.value[savedPosts.value.length - 1])
</script>

<template>{{ latestSavedPost ? 'Saved' : 'Nothing saved yet' }}</template>
```

--------------------------------

### build()

Source: https://tanstack.com/query/latest/docs/framework/vue/reference/classes/QueryCache.md

Returns the existing Query instance for the given options' queryKey/queryHash, or builds and adds a new one to the cache if none exists yet. Used by framework adapters and plugins that need to get-or-create a Query directly.

```APIDOC
## Method: build()

### Description
Returns the existing Query instance for the given options' queryKey/queryHash, or builds and adds a new one to the cache if none exists yet. Used by framework adapters and plugins (e.g. broadcast/persistence) that need to get-or-create a Query directly, bypassing the reactive QueryObserver machinery.

### Parameters
- **client** (QueryClient) - Required - The client the query belongs to, used to default its options.
- **options** (WithRequired<QueryOptions<TQueryFnData, TError, TData, TQueryKey, never>, "queryKey">) - Required - The query options, including the queryKey. A new query is created with the options defaulted by QueryClient#defaultQueryOptions.
- **state** (QueryState<TData, TError>) - Optional - The initial state of a newly created query, e.g. when hydrating. Ignored if the query already exists.

### Returns
- **Query<TQueryFnData, TError, TData, TQueryKey>** - The existing or newly created query.

### Example
```ts
const queryCache = queryClient.getQueryCache()

const query = queryCache.build(queryClient, {
  queryKey: ['posts'],
  queryFn: fetchPosts,
})
```
```

--------------------------------

### queryOptions<TQueryFnData, TError, TData, TQueryKey>(options)

Source: https://tanstack.com/query/latest/docs/framework/vue/reference/functions/queryOptions.md

Creates query options for useQuery and other APIs. Requires queryKey and returns options with inferred data type when initialData is set.

```APIDOC
## queryOptions<TQueryFnData, TError, TData, TQueryKey>(options)

### Description
Generates query options that can be shared across hooks and imperative APIs such as `queryClient.query`. Requires `options.queryKey` and returns the same options object typed so that `queryKey` carries the inferred data type.

### Signature
```ts
function queryOptions<TQueryFnData, TError, TData, TQueryKey>(options: DefinedInitialQueryOptions<TQueryFnData, TError, TData, TQueryKey>): DefinedInitialQueryOptionsWithDataTag<TQueryFnData, TError, TData, TQueryKey>;
```

### Type Parameters
- **TQueryFnData** = `unknown`
- **TError** = `Error`
- **TData** = `TQueryFnData`
- **TQueryKey** extends readonly `unknown`[] = readonly `unknown`[]

### Parameters
- **options** (`DefinedInitialQueryOptions<TQueryFnData, TError, TData, TQueryKey>`) - Required - The options to use, everything you can pass to `useQuery`, with `initialData` set.

### Returns
- **DefinedInitialQueryOptionsWithDataTag<TQueryFnData, TError, TData, TQueryKey>** - The same options object, typed so that `queryKey` carries the inferred data type.

### Example
```vue
<script setup lang="ts">
import { queryOptions, useQuery } from '@tanstack/vue-query'

const postsOptions = queryOptions({
  queryKey: ['posts'],
  queryFn: fetchPosts,
  initialData: [],
})

// `data` is `Post[]`, never `undefined`, thanks to `initialData` — even if a refetch fails,
// so the list stays visible alongside the error.
const { data, isError, error } = useQuery(postsOptions)
</script>
```

### See Also
- [useQuery](useQuery.md) to run a query with these options.
```

--------------------------------

### Create and configure experimental_createQueryPersister

Source: https://tanstack.com/query/latest/docs/framework/vue/plugins/createPersister.md

Create a query persister with experimental_createQueryPersister and configure it as the default persister for all queries in the QueryClient. The storage must adhere to the AsyncStorage interface. Each query is persisted separately using the query hash as key, and staleTime is respected after restoration.

```tsx
import { QueryClient } from '@tanstack/vue-query'
import { experimental_createQueryPersister } from '@tanstack/query-persist-client-core'

const persister = experimental_createQueryPersister({
  storage: AsyncStorage,
  maxAge: 1000 * 60 * 60 * 12, // 12 hours
})

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      gcTime: 1000 * 30, // 30 seconds
      persister: persister.persisterFn,
    },
  },
})
```

--------------------------------

### Prefetch query data in Vue setup script

Source: https://tanstack.com/query/latest/docs/framework/vue/reference/functions/usePrefetchQuery.md

Fires a prefetch before child components mount and invoke useQuery. The fetch is skipped if cached state already exists.

```vue
<script setup lang="ts">
import { usePrefetchQuery } from '@tanstack/vue-query'
import Posts from './Posts.vue'

// Fire the prefetch as soon as this component runs, before `Posts` mounts and calls `useQuery`.
usePrefetchQuery({
  queryKey: ['posts'],
  queryFn: fetchPosts,
})
</script>

<template>
  <Posts />
</template>
```

--------------------------------

### new QueryObserver(client, options)

Source: https://tanstack.com/query/latest/docs/framework/vue/reference/classes/QueryObserver.md

Creates a new QueryObserver instance with the given QueryClient and options. The observer watches a single query and computes a QueryObserverResult from its state.

```APIDOC
## Constructor

### Description
Creates a new QueryObserver instance.

### Method
Constructor

### Signature
```ts
new QueryObserver<TQueryFnData, TError, TData, TQueryData, TQueryKey>(client: QueryClient, options: QueryObserverOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>): QueryObserver<TQueryFnData, TError, TData, TQueryData, TQueryKey>;
```

### Parameters
- **client** (`QueryClient`) - Required - The QueryClient instance.
- **options** (`QueryObserverOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>`) - Required - The observer options.

### Returns
`QueryObserver<TQueryFnData, TError, TData, TQueryData, TQueryKey>`

### Example
```ts
const observer = new QueryObserver(queryClient, {
  queryKey: ['posts'],
  queryFn: fetchPosts,
})
```
```

--------------------------------

### queryOptions<TQueryFnData, TError, TData, TQueryKey>(options)

Source: https://tanstack.com/query/latest/docs/framework/vue/reference/functions/queryOptions.md

Creates a typed query options object. Accepts all options that useQuery accepts, with queryKey required. Returns the same options object with a typed queryKey that carries the inferred data type.

```APIDOC
## queryOptions<TQueryFnData, TError, TData, TQueryKey>(options)

### Description
Creates a typed query options object that can be shared across hooks and imperative APIs such as `queryClient.query`. The `options.queryKey` is required and is used to generate options for.

### Signature
```ts
function queryOptions<TQueryFnData, TError, TData, TQueryKey>(options: UndefinedInitialQueryOptions<TQueryFnData, TError, TData, TQueryKey>): UndefinedInitialQueryOptionsWithDataTag<TQueryFnData, TError, TData, TQueryKey>;
```

### Type Parameters
- **TQueryFnData** = `unknown`
- **TError** = `Error`
- **TData** = `TQueryFnData`
- **TQueryKey** extends readonly `unknown`[] = readonly `unknown`[]

### Parameters
- **options** (`UndefinedInitialQueryOptions<TQueryFnData, TError, TData, TQueryKey>`) - Required - The options to use, everything you can pass to `useQuery`.

### Returns
`UndefinedInitialQueryOptionsWithDataTag<TQueryFnData, TError, TData, TQueryKey>` - The same options object, typed so that `queryKey` carries the inferred data type.

### Example
A parameterized factory, so the same options object can be reused per `id`:
```vue
<script setup lang="ts">
import { queryOptions, useQuery } from '@tanstack/vue-query'

function postOptions(id: string) {
  return queryOptions({
    queryKey: ['post', id],
    queryFn: () => fetchPost(id),
  })
}

const { data, isPending, isError, error } = useQuery(postOptions('1'))
</script>
```

### See Also
- [useQuery](useQuery.md) to run a query with these options.
```

--------------------------------

### Create and subscribe to a QueryObserver

Source: https://tanstack.com/query/latest/docs/framework/vue/reference/classes/QueryObserver.md

Instantiates a QueryObserver with a query key and fetch function, then subscribes to receive query results. The unsubscribe function stops the subscription.

```typescript
const observer = new QueryObserver(queryClient, {
  queryKey: ['posts'],
  queryFn: fetchPosts,
})

const unsubscribe = observer.subscribe((result) => {
  console.log(result.data)
})
```

--------------------------------

### get() method signature

Source: https://tanstack.com/query/latest/docs/framework/vue/reference/classes/QueryCache.md

TypeScript signature for the get() method, which retrieves a query by its hash. Returns undefined if not found.

```typescript
get<TQueryFnData, TError, TData, TQueryKey>(queryHash: string): 
  | Query<TQueryFnData, TError, TData, TQueryKey>
  | undefined;
```

--------------------------------

### new InfiniteQueryObserver()

Source: https://tanstack.com/query/latest/docs/framework/vue/reference/classes/InfiniteQueryObserver.md

Creates a new InfiniteQueryObserver instance with the given QueryClient and options. This is the constructor for the InfiniteQueryObserver class.

```APIDOC
## new InfiniteQueryObserver()

### Description
Creates a new InfiniteQueryObserver instance with the given QueryClient and options. This is the constructor for the InfiniteQueryObserver class.

### Method
Constructor

### Signature
```ts
new InfiniteQueryObserver<TQueryFnData, TError, TData, TQueryKey, TPageParam>(client: QueryClient, options: InfiniteQueryObserverOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>): InfiniteQueryObserver<TQueryFnData, TError, TData, TQueryKey, TPageParam>;
```

### Parameters
- **client** (`QueryClient`) - Required - The QueryClient instance to use.
- **options** (`InfiniteQueryObserverOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>`) - Required - The options for the infinite query observer.

### Returns
`InfiniteQueryObserver<TQueryFnData, TError, TData, TQueryKey, TPageParam>` - The new observer instance.

### Example
```ts
const observer = new InfiniteQueryObserver(queryClient, {
  queryKey: ['projects'],
  queryFn: ({ pageParam }) => fetchProjects(pageParam),
  initialPageParam: 0,
  getNextPageParam: (lastPage) => lastPage.nextCursor,
})
```
```

--------------------------------

### queryOptions<TQueryFnData, TError, TData, TQueryKey>(options: () => UndefinedInitialQueryOptions<TQueryFnData, TError, TData, TQueryKey>): () => UndefinedInitialQueryOptionsWithDataTag<TQueryFnData, TError, TData, TQueryKey>

Source: https://tanstack.com/query/latest/docs/framework/vue/reference/functions/queryOptions.md

Creates query options from a getter function that closes over reactive state. The getter is re-evaluated on demand so that queryKey and other derived values react to changes. Returns a function that provides the options with an inferred data type on the queryKey.

```APIDOC
## queryOptions (Getter Overload)

### Description
Creates query options from a getter function that closes over reactive state. The getter is re-evaluated on demand so that queryKey and other derived values react to changes. Returns a function that provides the options with an inferred data type on the queryKey.

### Method
Function

### Signature
```ts
function queryOptions<TQueryFnData, TError, TData, TQueryKey>(options: () => UndefinedInitialQueryOptions<TQueryFnData, TError, TData, TQueryKey>): () => UndefinedInitialQueryOptionsWithDataTag<TQueryFnData, TError, TData, TQueryKey>;
```

### Type Parameters
- **TQueryFnData** = `unknown`
- **TError** = `Error`
- **TData** = `TQueryFnData`
- **TQueryKey** extends readonly `unknown`[] = readonly `unknown`[]

### Parameters
- **options** (() => UndefinedInitialQueryOptions<TQueryFnData, TError, TData, TQueryKey>) - Required - A function returning the UndefinedInitialQueryOptions to use, re-evaluated on demand.

### Returns
- () => UndefinedInitialQueryOptionsWithDataTag<TQueryFnData, TError, TData, TQueryKey> - A function that returns the same options object, typed so that queryKey carries the inferred data type.

### See
- [useQuery](useQuery.md) to run a query with these options.

### Examples

#### Example 1: Reactive query options
```vue
<script setup lang="ts">
import { ref } from 'vue'
import { queryOptions, useQuery, useQueryClient } from '@tanstack/vue-query'

const postId = ref(1)
const postOptions = queryOptions(() => ({
  queryKey: ['post', postId.value],
  queryFn: () => fetchPost(postId.value),
}))

// Pass the getter itself, not `postOptions()`, so the query keeps reacting to `postId` changes.
const { data } = useQuery(postOptions)
const queryClient = useQueryClient()
// Here, call `postOptions()` so `invalidateQueries` reads the current `queryKey` right away.
queryClient.invalidateQueries(postOptions())
</script>
```

#### Example 2: Parameterized factory with skipToken
```vue
<script setup lang="ts">
import { queryOptions, skipToken, useQuery } from '@tanstack/vue-query'

function postOptions(postId: number | undefined) {
  return queryOptions(() => ({
    queryKey: ['post', postId],
    queryFn: postId != null ? () => fetchPost(postId) : skipToken,
  }))
}

const props = defineProps<{ postId: number | undefined }>()
const { data, isLoading, isError, error } = useQuery(postOptions(props.postId))
</script>
```
```

--------------------------------

### remove() usage example

Source: https://tanstack.com/query/latest/docs/framework/vue/reference/classes/QueryCache.md

Example of using the remove() method to remove a query from the cache. It finds a query by its queryKey and removes it if it exists.

```typescript
const queryCache = queryClient.getQueryCache()
const query = queryCache.find({ queryKey: ['posts'] })

if (query) {
  queryCache.remove(query)
}
```

--------------------------------

### refetch() usage example

Source: https://tanstack.com/query/latest/docs/framework/vue/reference/classes/QueryObserver.md

Example of calling refetch with cancelRefetch set to false to keep a running fetch, then logging the result data.

```typescript
const result = await observer.refetch({ cancelRefetch: false })
console.log(result.data)
```

--------------------------------

### Executing multiple dynamic queries with useQueries

Source: https://tanstack.com/query/latest/docs/framework/vue/reference/functions/useQueries.md

Demonstrates fetching multiple posts concurrently using useQueries based on a prop array of IDs.

```vue
<script setup lang="ts">
import { useQueries } from '@tanstack/vue-query'

const props = defineProps<{ ids: Array<number> }>()

const postQueries = useQueries({
  queries: () =>
    props.ids.map((id) => ({
      queryKey: ['post', id],
      queryFn: () => fetchPost(id),
      staleTime: Infinity,
    })),
})
</script>

<template>
  <ul>
    <li v-for="(query, index) in postQueries" :key="props.ids[index]">
      <span v-if="query.isPending">Loading...</span>
      <span v-else-if="query.isError">Error: {{ query.error.message }}</span>
      <span v-else>{{ query.data.title }}</span>
    </li>
  </ul>
</template>
```

--------------------------------

### VueQueryPlugin install method type declaration

Source: https://tanstack.com/query/latest/docs/framework/vue/reference/variables/VueQueryPlugin.md

Type signature for the install method of VueQueryPlugin accepting the Vue app instance and plugin options.

```ts
install: (app: any, options: VueQueryPluginOptions) => void;
```

--------------------------------

### useQuery with queryKey and queryFn

Source: https://tanstack.com/query/latest/docs/framework/vue/guides/queries.md

Basic usage of the useQuery hook with a unique query key and a promise-returning function.

```ts
import { useQuery } from '@tanstack/vue-query'

const result = useQuery({ queryKey: ['todos'], queryFn: fetchTodoList })
```

--------------------------------

### refetch() method signature and example

Source: https://tanstack.com/query/latest/docs/framework/vue/reference/classes/InfiniteQueryObserver.md

Refetches the observed query and returns a promise resolving with the resulting QueryObserverResult. The example shows using cancelRefetch: false to keep a running fetch.

```typescript
refetch(options?: RefetchOptions): Promise<QueryObserverResult<TData, TError>>;
```

```typescript
const result = await observer.refetch({ cancelRefetch: false })
console.log(result.data)
```

--------------------------------

### VueQueryPlugin

Source: https://tanstack.com/query/latest/docs/framework/vue/reference/index.md

Vue plugin to install TanStack Query.

```APIDOC
## VueQueryPlugin

### Description
Vue plugin to install TanStack Query.

### Method
Plugin

### Usage
Install the plugin in your Vue app.

### Example
```ts
app.use(VueQueryPlugin)
```
```
Tokens:
Raw