Source: https://tanstack.com/query/latest/docs/reference/QueryObserver

TanStack

Query v5v5

Search...

+ K

Auto

Log In

TanStack StartRC

Docs Examples GitHub Contributors

TanStack Router

Docs Examples GitHub Contributors

TanStack Query

Docs Examples GitHub Contributors

TanStack Table

Docs Examples Github Contributors

TanStack Formnew

Docs Examples Github Contributors

TanStack DBbeta

Docs Github Contributors

TanStack Virtual

Docs Examples Github Contributors

TanStack Paceralpha

Docs Examples Github Contributors

TanStack Storealpha

Docs Examples Github Contributors

TanStack Devtoolsalpha

Docs Github Contributors

More Libraries

Maintainers Partners Support Learn StatsBETA Discord Merch Blog GitHub Ethos Brand Guide

Documentation

Framework

React

Version

Latest

Search...

+ K

Menu

• Home

• Frameworks

• Contributors

• Community Resources

• GitHub

• Discord

Getting Started

• Overview
  
  react

• Installation
  
  react

• Quick Start
  
  react

• Devtools
  
  react

• Comparison
  
  react

• TypeScript
  
  react

• GraphQL
  
  react

• React Native
  
  react

Guides & Concepts

• Important Defaults
  
  react

• Queries
  
  react

• Query Keys
  
  react

• Query Functions
  
  react

• Query Options
  
  react

• Network Mode
  
  react

• Parallel Queries
  
  react

• Dependent Queries
  
  react

• Background Fetching Indicators
  
  react

• Window Focus Refetching
  
  react

• Disabling/Pausing Queries
  
  react

• Query Retries
  
  react

• Paginated Queries
  
  react

• Infinite Queries
  
  react

• Initial Query Data
  
  react

• Placeholder Query Data
  
  react

• Mutations
  
  react

• Query Invalidation
  
  react

• Invalidation from Mutations
  
  react

• Updates from Mutation Responses
  
  react

• Optimistic Updates
  
  react

• Query Cancellation
  
  react

• Scroll Restoration
  
  react

• Filters
  
  react

• Performance & Request Waterfalls
  
  react

• Prefetching & Router Integration
  
  react

• Server Rendering & Hydration
  
  react

• Advanced Server Rendering
  
  react

• Caching
  
  react

• Render Optimizations
  
  react

• Default Query Fn
  
  react

• Suspense
  
  react

• Testing
  
  react

• Does this replace [Redux, MobX, etc]?
  
  react

• Migrating to v3
  
  react

• Migrating to v4
  
  react

• Migrating to v5
  
  react

API Reference

• QueryClient
  
  core

• QueryCache
  
  core

• MutationCache
  
  core

• QueryObserver
  
  core

• InfiniteQueryObserver
  
  core

• QueriesObserver
  
  core

• streamedQuery
  
  core

• focusManager
  
  core

• onlineManager
  
  core

• notifyManager
  
  core

• timeoutManager
  
  core

• useQuery
  
  react

• useQueries
  
  react

• useInfiniteQuery
  
  react

• useMutation
  
  react

• useIsFetching
  
  react

• useIsMutating
  
  react

• useMutationState
  
  react

• useSuspenseQuery
  
  react

• useSuspenseInfiniteQuery
  
  react

• useSuspenseQueries
  
  react

• QueryClientProvider
  
  react

• useQueryClient
  
  react

• queryOptions
  
  react

• infiniteQueryOptions
  
  react

• mutationOptions
  
  react

• usePrefetchQuery
  
  react

• usePrefetchInfiniteQuery
  
  react

• QueryErrorResetBoundary
  
  react

• useQueryErrorResetBoundary
  
  react

• hydration
  
  react

ESLint

• ESLint Plugin Query
  
  core

• Exhaustive Deps
  
  core

• Stable Query Client
  
  core

• No Rest Destructuring
  
  core

• No Unstable Deps
  
  core

• Infinite Query Property Order
  
  core

Examples

• Simple
  
  react

• Basic
  
  react

• Basic w/ GraphQL-Request
  
  react

• Auto Refetching / Polling / Realtime
  
  react

• Optimistic Updates (UI)
  
  react

• Optimistic Updates (Cache)
  
  react

• Pagination
  
  react

• Load-More & Infinite Scroll
  
  react

• Infinite query with Max pages
  
  react

• Suspense
  
  react

• Default Query Function
  
  react

• Playground
  
  react

• Prefetching
  
  react

• Star Wars
  
  react

• Rick And Morty
  
  react

• Next.js Pages
  
  react

• Next.js app with prefetching
  
  react

• Next.js app with streaming
  
  react

• React Native
  
  react

• React Router
  
  react

• Offline Queries and Mutations
  
  react

• Algolia
  
  react

• Shadow DOM
  
  react

• Devtools Embedded Panel
  
  react

• Chat example (streaming)
  
  react

Plugins

• persistQueryClient
  
  react

• createSyncStoragePersister
  
  react

• createAsyncStoragePersister
  
  react

• broadcastQueryClient (Experimental)
  
  react

• createPersister (Experimental)
  
  react

Framework

React

Version

Latest

Menu

• Home

• Frameworks

• Contributors

• Community Resources

• GitHub

• Discord

Getting Started

• Overview
  
  react

• Installation
  
  react

• Quick Start
  
  react

• Devtools
  
  react

• Comparison
  
  react

• TypeScript
  
  react

• GraphQL
  
  react

• React Native
  
  react

Guides & Concepts

• Important Defaults
  
  react

• Queries
  
  react

• Query Keys
  
  react

• Query Functions
  
  react

• Query Options
  
  react

• Network Mode
  
  react

• Parallel Queries
  
  react

• Dependent Queries
  
  react

• Background Fetching Indicators
  
  react

• Window Focus Refetching
  
  react

• Disabling/Pausing Queries
  
  react

• Query Retries
  
  react

• Paginated Queries
  
  react

• Infinite Queries
  
  react

• Initial Query Data
  
  react

• Placeholder Query Data
  
  react

• Mutations
  
  react

• Query Invalidation
  
  react

• Invalidation from Mutations
  
  react

• Updates from Mutation Responses
  
  react

• Optimistic Updates
  
  react

• Query Cancellation
  
  react

• Scroll Restoration
  
  react

• Filters
  
  react

• Performance & Request Waterfalls
  
  react

• Prefetching & Router Integration
  
  react

• Server Rendering & Hydration
  
  react

• Advanced Server Rendering
  
  react

• Caching
  
  react

• Render Optimizations
  
  react

• Default Query Fn
  
  react

• Suspense
  
  react

• Testing
  
  react

• Does this replace [Redux, MobX, etc]?
  
  react

• Migrating to v3
  
  react

• Migrating to v4
  
  react

• Migrating to v5
  
  react

API Reference

• QueryClient
  
  core

• QueryCache
  
  core

• MutationCache
  
  core

• QueryObserver
  
  core

• InfiniteQueryObserver
  
  core

• QueriesObserver
  
  core

• streamedQuery
  
  core

• focusManager
  
  core

• onlineManager
  
  core

• notifyManager
  
  core

• timeoutManager
  
  core

• useQuery
  
  react

• useQueries
  
  react

• useInfiniteQuery
  
  react

• useMutation
  
  react

• useIsFetching
  
  react

• useIsMutating
  
  react

• useMutationState
  
  react

• useSuspenseQuery
  
  react

• useSuspenseInfiniteQuery
  
  react

• useSuspenseQueries
  
  react

• QueryClientProvider
  
  react

• useQueryClient
  
  react

• queryOptions
  
  react

• infiniteQueryOptions
  
  react

• mutationOptions
  
  react

• usePrefetchQuery
  
  react

• usePrefetchInfiniteQuery
  
  react

• QueryErrorResetBoundary
  
  react

• useQueryErrorResetBoundary
  
  react

• hydration
  
  react

ESLint

• ESLint Plugin Query
  
  core

• Exhaustive Deps
  
  core

• Stable Query Client
  
  core

• No Rest Destructuring
  
  core

• No Unstable Deps
  
  core

• Infinite Query Property Order
  
  core

Examples

• Simple
  
  react

• Basic
  
  react

• Basic w/ GraphQL-Request
  
  react

• Auto Refetching / Polling / Realtime
  
  react

• Optimistic Updates (UI)
  
  react

• Optimistic Updates (Cache)
  
  react

• Pagination
  
  react

• Load-More & Infinite Scroll
  
  react

• Infinite query with Max pages
  
  react

• Suspense
  
  react

• Default Query Function
  
  react

• Playground
  
  react

• Prefetching
  
  react

• Star Wars
  
  react

• Rick And Morty
  
  react

• Next.js Pages
  
  react

• Next.js app with prefetching
  
  react

• Next.js app with streaming
  
  react

• React Native
  
  react

• React Router
  
  react

• Offline Queries and Mutations
  
  react

• Algolia
  
  react

• Shadow DOM
  
  react

• Devtools Embedded Panel
  
  react

• Chat example (streaming)
  
  react

Plugins

• persistQueryClient
  
  react

• createSyncStoragePersister
  
  react

• createAsyncStoragePersister
  
  react

• broadcastQueryClient (Experimental)
  
  react

• createPersister (Experimental)
  
  react

QueryObserver

Copy Markdown

The QueryObserver can be used to observe and switch between queries.

tsx

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

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


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

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

Options

The options for the QueryObserver are exactly the same as those of useQuery .

Edit on GitHub

MutationCache

InfiniteQueryObserver

Partners Become a Partner

[###### Want to Skip the Docs?

Query.gg - The Official React Query Course
\

“If you’re serious about *really* understanding React Query, there’s no better way than with query.gg”—Tanner Linsley

Learn More](https://query.gg/?s=tanstack)