ReactQuery.md

React Query (TanStack) Notes

---

STEP:1 Install package

npm i @tanstack/react-query

---

STEP:2 Main.jsx setup

import { QueryClientProvider } from "@tanstack/react-query"

const queryClient = new QueryClient(); // create a instance

// routes

---

Assume:

const getUserData = ()=>{ return await api.get("userData"); }

---

STEP:3 Fetch Data

const {data}= useQuery({
// data is by default key provided by tanStack queryKey:['userData'], queryFn: getUserData })

---

STEP:4 Loading & error handling

const {data,isPending, isError , error}= useQuery({
// isPending, isError , error is by default key provided by tanStack queryKey:['userData'], queryFn: getUserData })

---

STEP:5 ReactQuery Dev Tool

npm i @tanstack/react-query-devtools

import {ReactQueryDevtools} from "@tanstack/react-query-devtools"

---

STEP:6 STALE TIME

It is use to send request to the server after specific time else get from catch

const {data,isPending, isError , error}= useQuery({ queryKey:['userData'], queryFn: getUserData staleTime:4000 //4s })

---

useMutation: It is used to delete , put or petch data from database . you should not use "useQuery" Fn to delete or update data form database

Syntax: useMutation({ mutationFn : (data)=> })

how to use: const queryClient = useQueryClient(); //get access of catch memory

const deleteMutaion=useMutation({ mutationFn : (id)=> deletePost(id); onSuccess:(data,id)=>{ queryClient.setQueryData(['post',pageNumber], (element)=>{ //change data of catch memory return element.filter((postID)=> postID != id))} } })

onclick={()=>deleteMutaion.mutate(id)} // to call mutete function