React Query

 Project Setup

1) Wrap entire app.js with QueryProvider


 2) New create instance of QueryClient and add it to client as shown in video

 

 

#LEARN BASIC QUERY

1)

a) Import useQuery and axios

b) Use useQuery with a key which needs to be unique and return the result


 c) We get lots of value upon a execution of useQuery so we destructure and get only the two value mentioned. Please note that we have to atleast get two value


 d)  While loading use isLoading flag and for fetching data use data flag

If we had use useEffect and state than the code would had been much more so first advantage of this.

Common pattern also use is that using fetcher function as seperate function.Please note use the function inside RQSuperHero... ! As an improvement its better if you put fetchSuperHeros function inside RQSuperHeroesPage component with usecallback instead of outside component.

but I think this is done to help decouple the two functions. If you moved the fetchSuperHeroes to a separate file, you could more easily make changes to the two without stepping on the toes of each function. 


 Traditionally Handle Error

 Handling Error using react-qery

a) Use isError to check error is there

b) Use error to get the error data

React Query Dev Tools

Add it in app.js


 Query cache

Query cache allows to show prev data instaed of showing loading again. while it refetch in backgrund and show when data is available for better ui experience

How it works

 it first check if cache data is availbae for particular query key ,if yes than directly show data and only after it fectch data 

 

 isFetching is used to fetch data in background .

5 mins is default value of query cache before it again do isLoading which is a good value

However,to change do below step

 Use cacheTime to change default value (in ms)


Stale Time

Stale time is something which means that react-query wont even fetch latest data in background for that time coz of which isFetching remains false if you visit that page during that time.

This is usually done for stuff if you have data which don't get update often.

During that stale time in dev tool the fresh flag remains open that data is fresh and dont to be refetch

 After staleTime is over query will be change to stale.

It will again show isFetching as true and than false     

Default stale time is 0 sec.

Refetch Defaults

1) Refetch on Mount

Data is fetch when compoenent is mount and is true by default (

 

2) Refetch on window focus

 

This means that when we again go back to that website the data automatically is refetch. This is default to true

The above logic is good if u want your UI to be in sync with your database.

Important Point: Data is always fetch so plz note

Polling Data:

Polling data at regular interval irresective of reftchonMount or Windowfocus

Background refetching is turn of by default

However, to enable 

 

 UseQuery for click

Fetch data on browser event

1) when enabled is false data is not fetch automatically

2) add refetch to manually fetch data

 

When we click on button data fetching takes place. if u click again isLoading is false ..as told prev


Sucesss and Error Callbacks

 For error the data is fetch 3 time before error msg is show

 WE can also pass on the data as well as error message like this

This is pretty powerful as we can perform various callback based on success result or err message


b

Comments

Post a Comment

Popular posts from this blog

Form Part 2

App.jsx import React , { useState } from 'react' ; const App = () => { const [ Name , setName ] = useState (); const [ Pass , setPass ] = useState (); const [ seename , seename1 ] = useState (); const [ seepass , seepass1 ] = useState (); const inputEvent = ( event ) => { setName ( event . target . value ); }; const inputEvent1 = ( event ) => { setPass ( event . target . value ); }; const onSubmit = ( event ) => { event . preventDefault (); seename1 ( Name ); seepass1 ( Pass ); } return ( < > < div > < form onSubmit = { onSubmit } > < h1 > Hello { seename } { seepass } </ h1 > < input type = "text" placeholder = "Enter your Name" value = { Name } ...
Read more

Event mini project by Thapa#33

 Index.jsx import React from 'react' import ReactDOM from 'react-dom' ; import "./index.css" ; import App from "./App" ; ReactDOM . render ( < App /> , document . getElementById ( "root" )); index.css * { margin : 0 ; padding : 0 ; } div { width : 100% ; height : 100vh ; background : rgb ( 221 , 39 , 221 ); display : flex ; flex-direction : column ; justify-content : center ; align-items : center ; } button { padding : 12px 20px ; background : #9b59b6 ; color : white ; border : 2px solid #ecf0f1 ; outline : none ; border-radius : 5px ; text-transform : uppercase ; cursor : pointer ; } app.jsx import React , { useState } from 'react' ; const App =() => { const Purple = "yellow" ; const Old = "Click Me" const [ bg , setBg ] = useState ( Purple ); const [ name , newName ] = useState ( Old ); const bgChange =() => { let ...
Read more

De-mystifying 'this' keyword of Javascript

 Hello today I will be talking about 'this' keyword of javascript.It is one of the most confusing term of javascript. Since it is quite a confusion thing I will be compiling stuffs based on the materials I have learnt from the internet so as to help myself in the future. 'this' keyword can be considered quite the literal this word is English alphabet atleast for the initial understanding. Let's consider a main table of a house. It will be termed in js langauge as this.table = "main table" If we console log window.table or this.table than we will be considering the main house's table console.log(window.table) //main table Now let consider the dinning table of the house. It will be  this.dinning={ table:"dinning table"} If we want to call it will be  this.dinning.table // dinning table   Now let consider a private room and in this case it will be a function and if we want to use there we can use as mentioned below let johnsroom = { table:'j...
Read more