TanStack Query

The @tanstack/angular-query-experimental package provides a first-class API for managing server state within Angular applications. It is designed to handle the complexities of fetching, caching, synchronizing, and updating asynchronous data.

Important Note: This package is currently in an experimental stage. Breaking changes may occur in both minor and patch releases. If using this in production, it is recommended to lock your version to a specific patch-level version to avoid unexpected breaking changes.

TanStack Query is an async state management library designed to simplify the process of fetching, caching, synchronizing, and updating server state. It is protocol-agnostic, meaning it can work with REST, GraphQL, promises, or any other fetching mechanism.

Key capabilities include:

• Caching & Synchronization: Automatic caching, refetching, and background updates.
• Data Fetching Patterns: Support for pagination, infinite scroll, and dependent queries.
• Mutations: Tools for updating server state.
• Advanced Features: Prefetching, request cancellation, and support for React Suspense.

The MutationCache is the storage for mutations. While it is the underlying storage, you will normally not interact with the MutationCache directly; instead, you should use the QueryClient for most mutation operations.

Use the MutationCache directly when you need to implement global side effects that cannot be overridden by individual mutation options, or when you need to subscribe to the entire cache for state changes.

import { MutationCache } from '@tanstack/react-query'

const mutationCache = new MutationCache({
  onError: (error) => {
    console.log(error)
  },
  onSuccess: (data) => {
    console.log(data)
  },
})

The QueryCache is the storage mechanism for TanStack Query. It stores all data, meta information, and the state of all queries it contains.

Note: In most applications, you should not interact with the QueryCache directly. Instead, use the QueryClient to manage your cache. Direct interaction is typically reserved for advanced scenarios, such as inspecting query state timestamps or subscribing to global cache updates.

import { QueryCache } from '@tanstack/react-query'

const queryCache = new QueryCache({
  onError: (error) => {
    console.log(error)
  },
  onSuccess: (data) => {
    console.log(data)
  },
  onSettled: (data, error) => {
    console.log(data, error)
  },
})

TanStack Query (formerly React Query) is a library designed to manage fetching, caching, synchronizing, and updating server state in web applications.

Unlike traditional state management libraries that focus on client state, TanStack Query is specifically built to handle the unique challenges of server state, which includes:

• Data that is persisted remotely and may be changed by other users.
• Data that requires asynchronous APIs to fetch or update.
• Data that can become "out of date" if not carefully synchronized.

It solves complex problems such as caching, request deduping, background updates, pagination, and memory management.

To prevent excessive memory consumption and slow refetching in infinite queries, TanStack Query v5 introduces the maxPages option. This option limits the number of pages stored in the query data and subsequently refetched.

To use this effectively for bi-directional infinite lists, ensure both getNextPageParam and getPreviousPageParam are defined.

By default, Vue Query only includes successful queries in the dehydrated state. If a query fails on the server, it is excluded from dehydration, causing the client to see a loading state and attempt to refetch the query.

If you need to render an error page with a specific status code instead of showing a loading state, use queryClient.fetchQuery and catch the error manually to handle the response.