or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

helpers.mdindex.mdmutations.mdplugin-setup.mdqueries.mdquery-client.mdstatus-utilities.md
tile.json

tessl/npm-tanstack--vue-query

Hooks for managing, caching and syncing asynchronous and remote data in Vue

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@tanstack/vue-query@5.86.x

To install, run

npx @tessl/cli install tessl/npm-tanstack--vue-query@5.86.0

index.mddocs/

TanStack Vue Query

TanStack Vue Query is a powerful data synchronization library for Vue.js applications that provides composables for fetching, caching, and managing asynchronous data. It offers transport-agnostic data fetching with automatic caching, background refetching, and stale-while-revalidate strategies for both Vue 2.x and Vue 3.x.

Package Information

  • Package Name: @tanstack/vue-query
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @tanstack/vue-query
  • Vue Compatibility: Vue 2.6+ and Vue 3.3+ (via vue-demi)

Core Imports

import { useQuery, useMutation, QueryClient, VueQueryPlugin } from "@tanstack/vue-query";

For CommonJS:

const { useQuery, useMutation, QueryClient, VueQueryPlugin } = require("@tanstack/vue-query");

Basic Usage

import { createApp } from 'vue';
import { VueQueryPlugin, QueryClient, useQuery } from '@tanstack/vue-query';

// Setup
const queryClient = new QueryClient();
const app = createApp(App);
app.use(VueQueryPlugin, { queryClient });

// In a component
export default {
  setup() {
    // Fetch data
    const { data, isLoading, error } = useQuery({
      queryKey: ['todos'],
      queryFn: () => fetch('/api/todos').then(res => res.json()),
    });

    // Mutate data
    const { mutate, isPending } = useMutation({
      mutationFn: (newTodo) => fetch('/api/todos', {
        method: 'POST',
        body: JSON.stringify(newTodo),
      }),
      onSuccess: () => {
        queryClient.invalidateQueries({ queryKey: ['todos'] });
      },
    });

    return { data, isLoading, error, mutate, isPending };
  }
};

Architecture

TanStack Vue Query is built around several key components:

  • Query Client: Central hub for managing all query and mutation state
  • Composables: Vue-specific hooks (useQuery, useMutation, etc.) that integrate with Vue's reactivity system
  • Observers: Core classes that manage individual query/mutation lifecycle
  • Cache System: Intelligent caching with automatic garbage collection and background refetching
  • Plugin System: Vue plugin for global configuration and dependency injection

Capabilities

Data Queries

Core composables for fetching and caching data with reactive state management. Supports automatic background refetching, cache invalidation, and optimistic updates.

function useQuery<TQueryFnData, TError, TData, TQueryKey>(
  options: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>
): UseQueryReturnType<TData, TError>;

function useInfiniteQuery<TQueryFnData, TError, TData, TQueryKey, TPageParam>(
  options: UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>
): UseInfiniteQueryReturnType<TData, TError>;

function useQueries<T extends Array<any>>(
  options: { queries: UseQueriesOptions<T> }
): Readonly<Ref<UseQueriesResults<T>>>;

Data Queries

Data Mutations

Composables for creating, updating, and deleting data with optimistic updates and automatic query invalidation.

function useMutation<TData, TError, TVariables, TContext>(
  options: UseMutationOptions<TData, TError, TVariables, TContext>
): UseMutationReturnType<TData, TError, TVariables, TContext>;

Data Mutations

Query Client

Central management system for all query and mutation operations, cache control, and global configuration.

class QueryClient {
  constructor(config?: QueryClientConfig);
  
  // Query data management
  getQueryData<TData>(queryKey: QueryKey): TData | undefined;
  setQueryData<TData>(queryKey: QueryKey, updater: Updater<TData | undefined, TData | undefined>): TData | undefined;
  
  // Cache operations
  invalidateQueries(filters?: InvalidateQueryFilters): Promise<void>;
  refetchQueries(filters?: RefetchQueryFilters): Promise<void>;
  removeQueries(filters?: QueryFilters): void;
  
  // Query execution
  fetchQuery<TData>(options: FetchQueryOptions<TData>): Promise<TData>;
  prefetchQuery<TData>(options: FetchQueryOptions<TData>): Promise<void>;
}

function useQueryClient(id?: string): QueryClient;

Query Client

Vue Plugin & Setup

Vue plugin for installing TanStack Query with global configuration and dependency injection.

interface VueQueryPlugin {
  install(app: any, options?: VueQueryPluginOptions): void;
}

interface VueQueryPluginOptions {
  queryClient?: QueryClient;
  queryClientConfig?: QueryClientConfig;
  queryClientKey?: string;
  enableDevtoolsV6Plugin?: boolean;
  clientPersister?: (client: QueryClient) => [() => void, Promise<void>];  
  clientPersisterOnSuccess?: (client: QueryClient) => void;
}

Plugin & Setup

Status & Utilities

Utility composables for tracking query and mutation status across the application.

function useIsFetching(filters?: QueryFilters): Ref<number>;
function useIsMutating(filters?: MutationFilters): Ref<number>;
function useMutationState<TResult>(
  options?: MutationStateOptions<TResult>
): Readonly<Ref<Array<TResult>>>;

Status & Utilities

Helper Functions

Type-safe helper functions for creating query and infinite query options.

function queryOptions<TQueryFnData, TError, TData, TQueryKey>(
  options: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>
): UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>;

function infiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>(
  options: UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>
): UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>;

Helper Functions

Core Types

// Vue-specific reactive types
type MaybeRef<T> = Ref<T> | ComputedRef<T> | T;
type MaybeRefOrGetter<T> = MaybeRef<T> | (() => T);
type MaybeRefDeep<T> = MaybeRef<T extends Function ? T : T extends object ? { [K in keyof T]: MaybeRefDeep<T[K]> } : T>;

// Query key and function types
type QueryKey = ReadonlyArray<unknown>;
type QueryFunction<T = unknown, TQueryKey extends QueryKey = QueryKey> = (
  context: QueryFunctionContext<TQueryKey>
) => T | Promise<T>;

// Status types
type QueryStatus = 'pending' | 'error' | 'success';
type FetchStatus = 'fetching' | 'paused' | 'idle';
type MutationStatus = 'idle' | 'pending' | 'success' | 'error';

// Configuration options
interface ShallowOption {
  shallow?: boolean;
}

interface QueryClientConfig {
  queryCache?: QueryCache;
  mutationCache?: MutationCache;
  defaultOptions?: DefaultOptions;
}

All types and classes from @tanstack/query-core are also available through re-export, providing the complete TanStack Query type system and utility functions.