DEV Community

Cover image for Cleaner data fetching with react-query

Cleaner data fetching with react-query

Siddharth Venkatesh on August 14, 2021

Data-fetching is something I feel does not get the importance and limelight as say state management in the React world. People often combine client...
Collapse
 
hyggedev profile image
Chris Hansen

I just woke up. It's a little after 7 a.m. Just finished the drip for my coffee. So now i'm chillen' and sippin', having a good ol' time. So I'm cruising through my feed, and I stumbled across this 5 minute read.

EXCELLENT. I have always wanted to dig a tad deeper into React-Query, but always came across resources that were a little verbose. This is so easy to read through, and to understand. Your code snippets are also so intuitive and very simple and align exactly with your guide. Thanks man, you gave me a great start to my morning!

PS+
I have a question. I don't like to store keys or anything sensitive in react apps, also why I moved over to Next.js... is React-Query safe to use on the client side? Or how would you recommend storing keys safely while using create-react-app. I am aware of reacts built-in REACT_APP_="key", but can still be exposed in the browser.

Collapse
 
nizans profile image
Nitzan Savion

Thank for this very helpful!

How would you handle mutations in the same way?

Collapse
 
leodiegoo profile image
Leonardo Diego

Does anyone know what theme he's using? 😅

Collapse
 
siddharthvenkatesh profile image
Siddharth Venkatesh

Hey, the VSCode theme is called Synthwave '84 and I use Polacode for the pictures of code snippets

Collapse
 
mahikaushi65741 profile image
mahi kaushik

Thanks for sharing this helpful article about using React Query for cleaner data fetching! I recently started using this library and it has definitely made my code much cleaner and easier to manage. For anyone interested in learning more, I recommend checking out this React Query blog. Keep up the great work!

Collapse
 
kein1945 profile image
Kein

It’s similar to redux + normalizr libraries. But in case with normalizr we have more more powerful control of data.
What do you think about this approach?

Collapse
 
siddharthvenkatesh profile image
Siddharth Venkatesh

From what I've seen of normalizr, it helps you frame your backend response into something that is easier to render in your UI. react-query mainly focuses on how you fetch your data. Its also intelligent in terms of caching and refetching.
If you do want to use normalizr with react-query, you can apply the normalize function in the onSuccess handler of useQuery.

Collapse
 
caedes profile image
Romain Laurent

You will undoubtedly write much less code with react-query.

Collapse
 
peteregbujie profile image
Peter Egbujie

Excellent post. So how can I access the cached data for a single post. Did you use useFetchProduct(id) or queryClient.getQueryData?

Collapse
 
siddharthvenkatesh profile image
Siddharth Venkatesh

You can use useFetchProduct(id) to get data for a single post. If the data is stale, react-query will fetch from your server. If the cache contains the fresh data, it will return it from the cache.
The "staleTime" property determines how long your data is valid. If you give its value as 10000, your data will be valid for 10 seconds. In this 10 seconds, whenever you call useFetchProduct(id), react-query will return the data from the cache.
Hope it clears things up.

Collapse
 
brandiqa profile image
Michael Wanyoike

Wish I read your article before writing mine on Firebase + React Query. Very clean implementation. Kudos!

Collapse
 
siddharthvenkatesh profile image
Siddharth Venkatesh

Thank you so much. Glad you liked it.

Collapse
 
davboy profile image
Daithi O’Baoill

Excellent post, thank you

Collapse
 
lucasfrutig0 profile image
lucasfrutig0

The onError native callback of react query, to work ok, needs of a httpCode specific?

Collapse
 
ademola_isr profile image
ADEMOLA OGUNMOKUN

I will be glad if the mutation can be explained

Collapse
 
frankpoundz profile image
Frank Opare

Great!