TanStack Query

tags: Library

#React Query

The missing data-fetching library for React. In more technical terms, it provides a Hook for fetching, caching and updating asynchronous data without touching any global state.

Initially, it seems like a simple library; however, it is packed with complex features which handle most of the server state management issues you might have in an application.

#Vue / Solid / Svelte Query is coming soon 🙂

Motivation

React applications do not come with an opinionated way of fetching or updating data from your components so developers end up building their own ways of fetching data. (Like using React hooks, design pattern, state management libraries (Redux))

state can be divided into two types:
Client state - sync APP data (UI element, theme)
Server state - async Fetch data, token

The further challenges of server state：🤢

User Performance

• Caching
• Reflecting updates to data as quickly as possible
• Performance optimizations like pagination and lazy loading data

Code Performance

• Memoizing query results with structural sharing
• Managing memory and garbage collection of server state

Correctness

• Updating out of date data in the background
• Knowing when data is out of date
• Deduping(重複刪除) multiple requests for the same data into a single request

React Query is hands down for managing server state.

• out-of-the-box
• with zero-config
• can be customized

and more…

• Help you erase a bunch of unneeded lines of code(useState)
• Enable advanced maintainability
• Have a direct impact on your end-users or site visitors by making your application speedier and more reactive.
• Increase memory performance

Important Defaults

Query instances via useQuery or useInfiniteQuery by default consider cached data as stale（To change this behavior staleTime）

Stale queries are refetched automatically in the background when:

• New instances of the query mount
• The window is refocused
• The network is reconnected.
• The query is optionally configured with a refetch interval.

ps. If the data is not expect maybe is doing refetchOnWindowFocus

• Query results that have no more active instances of useQuery, useInfiniteQuery or query observers are labeled as "inactive" and remain in the cache in case they are used again at a later time.
• By default, "inactive" queries are garbage collected after 5 minutes.(-> cacheTime)
• Queries that fail are silently retried 3 times, with exponential backoff delay before capturing and displaying an error to the UI.(Change this default by retry and retryDelay option)
• Query results by default are structurally shared to detect if data has actually changed and if not, the data reference remains unchanged to better help with value stabilization with regards to useMemo and useCallback. If this concept sounds foreign, then don't worry about it! 99.9% of the time you will not need to disable this and it makes your app more performant at zero cost to you.
  • Structural sharing only works with JSON-compatible values, any other value types will always be considered as changed.
  • If you are seeing performance issues because of large responses for example, you can disable this feature with the config.structuralSharing flag. If you are dealing with non-JSON compatible values in your query responses and still want to detect if data has changed or not, you can define a data compare function with config.isDataEqual.

Query Basics

A query is a declarative dependency on an asynchronous source of data that is tied to a unique key.

• A query can be used with any Promise based method (including GET and POST methods) to fetch data from a server. If your method modifies data on the server, we recommend using Mutations instead.

result object contains:

STATUS

status	type
isLoading	boolean
isError	boolean
isSuccess	boolean
isIdle	boolean
status	'loading' 'error' 'success' 'idle'

DATA HANDLE

• data
• error
• isFetching: boolean