Scribd
Upload
80 views

29slides Reactquery

Uploaded by

surendrakakinada
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
80 views

29slides Reactquery

Uploaded by

surendrakakinada
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

formerly React Query

Data Fetching with Tanstack Query


Sending HTTP Requests With Ease

What Is Tanstack Query & Why Would You Use It?

Fetching & Mutating Data

Con guring Tanstack Query

Advanced Concepts: Cache Invalidation, Optimistic Updating & More


fi
Frontend Backend

Controls the UI HTTP Request Manages backend


tasks & data
May “talk” to a
database

React Query
(Tanstack Query)
What Is Tanstack Query?
What Is Tanstack Query?
A library that helps with sending
HTTP requests & keeping your
frontend UI in sync
You Don’t Need Tanstack Query!
You Don’t Need Tanstack Query!
But it can vastly simplify your code
(and your life as a developer)
Tanstack Query Does Not
Send HTTP Requests
At least not on its own
You have to write the code that
sends the actual HTTP request
Tanstack Query then manages the
data, errors, caching & much more!
Tanstack Query Caches Query Data

useQuery({
queryKey: [‘some-key’], fetchData() is executed
Data is received
queryFn: fetchData & HTTP request is sent
}); {
id: ‘d1’,
Called in Component A @ 10:32 title: ‘Some data’
}

useQuery({
queryKey: [‘some-key’],
queryFn: fetchData
}); Cached data is reused & shown Cached (stored) by Tanstack
Called in Component B @ 10:34 on the screen immediately Query

You might also like