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. 

React Query Basic

ComponentProps are typically used when you want to create a component using a native html element like 

Can also use ComponentProps to get the props of a component ( reference 

https://www.totaltypescript.com/react-component-props-type-helper

Here are some basic type and useful prop types when using Typescript in React.

TS for React: Prop Types

At the moment the missus uses a worksheet to store her tasks and meeting notes for her work. This application will help her store it on a cloud database for portability and additional features that she wants like sorting by categories or adding priority level to her task.

My goal for this project is to learn the NextJs Server Component use Appwrite as my database and do all my code using Typescript.

A task list application for storing work-related tasks and notes. Unlike a simple to-do list application this will be able to add categories and priorities for sorting and reporting purposes. 

Tasks List

After 4 years of Front-end Development, I decided to update my old portfolio website. 

For my new portfolio website, I planned to incorporate Nextjs and Sanityio. Additionally, I aim to include a feature where I can share updates on my web development journey, including blogs and showcase my work.

I am currently updating my portfolio website after three years of working as a front-end developer, utilizing ReactJs and NextJs.

Hi, I'm Owa Aquino.

👉 This website is here to help me become a better developer.

💻 What I'm working on

Tasks List

Portfolio v3

📝Latest Posts

React Query Basic: Query Lifecycle

React Query Basic

TS for React: Prop Types