I never really created my own loading and error handling before without using React query. I know you can achieve the loading and error state using 

 method is also great when you want to accomplish this loading and error state for your UI.

React-query has a lot of great lifecycle methods, but I usually use the 

 methods. There are lot more state to use actually but these 3 will do for achieving the loading and error state you want for your UI.

Here’s how you would do it ( a straightforward use )

So very straight forward as I said, you can get the 

 from your fetching method. Then just use them to generate your component as such.

 if your fetching is still in progress or not.

 to check if your API fetching returns an error.

Sometimes our internet and server fail us and we want something to show users that there’s a delay in “loading” or there is an error on the data that they want to see. So with react-query lifecycle method can help us make sure that we make it so.

I never really created my own loading and error handling before without using React query.

React Query Basic: Query Lifecycle

I’ve been using React Query for some time now but didn’t really understand it as I’ve used my old company project code in React Query and used it on my other projects without knowing why the code does that. This time I tried learning it through the documentation and courses. ( Yes I bought a course so sue me! )

In a way, I somehow got it now. So writing this so that in the future ( because I’m old and forget things a lot ) I will refer to this. And this will be a series like the React Typescript that is not yet finished 😅

Combining useState, useEffect, and Context together in an attempt to “manage” state will lead to pain and suffering.

Manage server state without doing a lot of work 😉.

And of course, React Query can handle this for you

React Query is NOT a data fetching library

React-query is an async state manager that is also acutely aware of the needs of the server state.

React Query doesn't fetch data for you, instead, you provide it with a promise and it will then take the data that the promise resolves with and make it available wherever you need it on your application.

wrapping your MAIN parent component inside the 

 prop, React Query will make the query cache available to you anywhere in your component tree.

with this it allows you to access the cache and interact with React Query wherever you want, without having to worry about triggering unnecessary re-renders.

by default if there’s already data allocated in the cache of the 

 will return that data immediately making it so you don’t have to fetch your API again. Otherwise, it will invoke the 

 which you provided a promise-based method and then put in the cache of the 

must return a promise that resolves with the data you want to cache.

I’ve been using React Query for some time now but didn’t really understand it as I’ve used my old company project code in React Query and used it on my other projects without knowing why the code does that. 

Tags

React Query Basic: Query Lifecycle

React Query Basic