React Query now called as Tanstack Query is a library used to make API Calls.

It provides builtin caching, retrying, loading , error handling and much more.

Installation

npm i @tanstack/react-query

Step 1 - You need to wrap the react app inside the QueryClientProvider

App.js

import { QueryClient, QueryClientProvider} from 'react-query'
import { Route, RouterProvider, createBrowserRouter, createRoutesFromElements } from 'react-router-dom'

const queryClient = new QueryClient();

const router =  createBrowserRouter(createRoutesFromElements(
    <Route path='/' >
      <Route path='' element={<Home/>}/>
    </Route>
))

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
				<RouterProvider>
      <Example />
				</RouterProvider>
    </QueryClientProvider>
  )
}

Step 2 - using the query - useQuery is to make get requestion

const {data:products} = useQuery({
	queryKey: ["products"],
	queryFn: async()=>{ 
			const {data} = await axios.get("url");
			return data.products;
	},
	staleTime: 20000,
});

Mutation

• useMutation is used to make post/delete/put requests.

const {mutate,error,isLoading} = useMutation({
        mutationKey:["addProduct"],
        mutationFn:async()=>{
            const {data} = await axios.post("url",{body},{
                headers:{
                    "Content-Type":"application/json"
                }
            })
            return data;
        }
    })
.
.
.
.

<form onSubmit={(e)=>{
            e.preventDefault();
            mutate()
        }} >
</form>