Skip to the content

/

TanStack Query

TanStack Query 5

TanStack Query: 0% done

Module 1 · Servers, APIs and JSON

This course builds one app: a book catalogue

Loading the slide…

A line of words about as long as a slide’s first line, and its second.

Another line, shorter.

1 / 183 · Servers, APIs and JSON

Course progress

0%

This course builds one app: a book catalogue
Your app asks; a server answers
, 1 to practiseAn API is the list of questions a server accepts
, 1 to practiseA URL says where to ask, and with which details
, 1 to practiseThe method says what you want to do
, 1 to practiseEvery answer starts with a status code
, 1 to practiseData travels as JSON
, 1 to practiseA whole exchange, start to finish
Recap

Code can’t stop and wait for the network
A promise is a receipt for an answer that hasn’t arrived
, 1 to practisefetch sends a request and returns a promise
async and await read like ordinary code
, 1 to practisefetch doesn’t fail on a 404
, 1 to practiseCatching errors with try and catch
, 1 to practiseSending data: method, headers and body
, 1 to practiseTry it: send a review
One small helper for every read
Recap

A component is a function that returns what to show
, 1 to practiseState is what a component remembers
, 1 to practiseAn effect runs after the screen updates
Loading books with useEffect
An empty list and "still loading" look the same
, 1 to practiseAnd a third state for when it fails
, 1 to practiseFetching again when the input changes
, 1 to practiseCount what one list costs
Recap

, 1 to practiseAnswers can arrive in the wrong order
Fixing the race by hand
Two components, two identical requests
, 1 to practiseWhat you fetched starts going out of date at once
, 1 to practiseServer state is not like other state
A cache is a labelled shelf of copies
, 1 to practiseTanStack Query is that cache, for React
Recap

Installing the package
The QueryClient holds the cache
, 1 to practiseThe provider makes the client reachable everywhere
useQuery: a key, a function, a result
, 2 to practiseWhich part does what
What you no longer write
, 1 to practiseSame key, one request
The devtools show you the cache
, 1 to practiseReading the first errors you will meet
Recap

A key is the label on a cache entry
, 1 to practiseEvery input to the query belongs in the key
, 1 to practiseWhen the key changes, the query changes
, 1 to practiseKeys are compared by value
Order keys from general to specific
The query function is given its key
, 1 to practiseThe signal cancels requests nobody wants
, 1 to practiseWrite keys in one place
, 1 to practiseTry it: a key factory
Recap

status says whether there is data
, 1 to practisefetchStatus says whether a request is running
, 1 to practiseisLoading is the very first load
Show every state, in order
, 1 to practiseA query only fails if its function throws
, 1 to practiseTry it: a query function that fails properly
, 1 to practiseFailed queries are retried, three times by default
, 1 to practiseDon’t retry what can’t succeed
, 1 to practiseA failed refresh keeps the data you had
Recap

Every cached answer is fresh, then stale
, 1 to practiseStale queries refetch on certain events
Raise staleTime for data that changes slowly
, 1 to practisePredict the requests
, 1 to practiseTry it: the staleness rule
Unused data waits five minutes, then goes
, 1 to practisestaleTime and gcTime answer different questions
Set defaults on the client, override per query
, 1 to practisePolling, and refetching by hand
Reading freshness in the devtools
Recap

, 1 to practiseQueries in one component run in parallel
useQueries for a list of queries
, 1 to practiseenabled: false holds a query back
, 1 to practiseskipToken: switch off, with better types
, 1 to practiseselect reshapes the data for one component
Keep the previous results while new ones load
, 1 to practiseinitialData seeds the cache from what you already have
, 1 to practiseWaterfalls: requests that wait for no reason
Recap

, 1 to practiseQueries read; mutations write
useMutation wraps a function that writes
, 1 to practiseA mutation has its own status
After a write, the cache is out of date
, 1 to practiseReturn the invalidation to stay pending until it is done
, 1 to practiseCallbacks: on the hook and on each call
, 1 to practisemutateAsync when you need to wait
Show the server’s reasons
Recap

, 1 to practiseInvalidating marks stale, then refetches what is on screen
Filters choose which queries to touch
, 1 to practiseAsk: what did this write change?
When the server sends the new data back, store it
, 1 to practiseNever change cached data in place
, 1 to practiseWrite or refetch?
, 1 to practiseReading the cache outside a component
Invalidate after every mutation, in one place
Recap

, 1 to practiseOptimistic updates show success before the server says so
The simple way: show the pending variables
The cache way: write, remember, roll back
, 2 to practiseWhy cancel queries first
, 1 to practiseTake the snapshot before you write
, 1 to practiseOptimistic updates inside one item
, 1 to practiseTry it: the updater function
Overlapping mutations
, 1 to practiseNew items need a temporary id
Recap

Big lists come in pages
, 1 to practiseNumbered pages: the page goes in the key
Fetch the next page before it is asked for
useInfiniteQuery: many pages in one entry
, 1 to practiseThe shape of infinite data
, 1 to practiseLoading more
, 1 to practiseRefetching an infinite list refetches every page
, 1 to practiseChoosing between them
Recap

, 1 to practiseFetch on hover, show on click
Fetch when navigation starts
Suspense moves loading up to a boundary
, 2 to practiseSuspense queries in one component run one after another
Error boundaries catch what a region throws
, 1 to practise"Try again" needs a reset
, 1 to practiseKeep the old page while the new key suspends
Recap

A test is code that checks your code
, 1 to practiseA fresh client for every test
, 1 to practiseReplace the network
, 1 to practiseWait for what the person would wait for
, 1 to practiseTesting a custom hook
, 1 to practiseTesting the error path
Testing a mutation end to end
Recap

Four objects do the work
, 1 to practiseOne query, one promise: why requests are shared
, 1 to practiseKeys become hashes
, 1 to practiseStructural sharing keeps unchanged parts identical
, 1 to practiseComponents only render for the fields they read
select runs when data or the function changes
, 1 to practiseFocus and network come from two managers
Watching the cache from outside React
Recap

Server rendering draws the first screen on the server
, 1 to practisePrefetch, dehydrate, hydrate
, 1 to practiseThe two halves in code
, 1 to practiseOne client per request on the server
In the browser, one client per app, kept in state
, 1 to practiseSet a staleTime, or the browser fetches again at once
, 1 to practiseFailed prefetches are left for the browser
Streaming, and what not to send
Recap

, 1 to practiseOffline, queries pause instead of failing
, 1 to practisenetworkMode decides what "offline" means for a query
Mutations pause too, and run when back online
Persisting the cache across reloads
, 1 to practisegcTime must be at least as long as maxAge
, 1 to practiseResuming saved mutations after a reload
, 1 to practiseChoose what to save
Recap

, 1 to practiseThe same query, written five times, drifts
queryOptions defines a query once, with its types
A query factory per feature
, 1 to practiseInvalidation reads like the sentence you mean
, 1 to practiseCustom hooks or shared options?
Organise by feature
Typing errors and meta for the whole app
, 1 to practiseLet a linter check the rules
Recap

Predict, debug, choose
, 1 to practisePredict: a morning in the cache
, 1 to practisePredict: what an invalidation touches
, 1 to practiseDebug: the list that flashes empty
, 1 to practiseDebug: the rollback that rolls back too far
, 1 to practiseDebug: the page that fetches twice
, 2 to practiseChoose: the right tool for each job
, 1 to practiseWrite it: a review mutation done right
Recap: the whole course