React Query Tutorial - 13 - Custom Query Hook

Use coupon code: CodevolutionYoutube for any workspace upgrade. Select "Add promo code" on checkout, enter the code, then hit "Apply". This will apply a 100% OFF lifetime discount to your subscription. Enjoy and feel free to invite others to your workspace!

📱 Follow Codevolution

React Query Tutorial on Custom Query Hook
Custom Query Hook with React Query

[devinosborne]

I mean, man, your tutorials are truly some of the most informative and declarative I've ever listened to. I used your previous ones when learning angular, incredible stuff! Thank you so much!

[amandacarvalho]

Wow, you're a fantastic teacher! Thank you so much for this content!

[Fatima-iekj]

sir u have no idea how much i'm thankful to u tysm for providing quality content love from pakistan

[simbolmina]

Had trouble with a project full of react query calls. this is godsent. thx

[genesissaquibal]

in the next update the onSuccess, onError, and onSettled will be depreciated, i wonder how can we handle that?

[licokr]

I's like this teaching like skills. Thank you! Your videos are REALLY AWESOME!

[marsiyaissah]

Wow.. I am only half done but you are simply amazing!

[MohamedAhmed-nor]

it works fine but cannot refetch the data anymore on click, the data is already rendered

[alisajadahmadi]

Hi there, this is my solution to the homework is it the correct way?
import { useState } from 'react';
import useSuperHeroesData from

const NewSuperHeroes = () => {
const [isEnabled, setIsEnabled] = useState(false);
const onSucces = (data) => {
console.log('Perform side effect after data fetching', data);
if (data) {
setIsEnabled(true);
}
};

const onError = (error) => {
console.log('Perform side effect after encountering error', error);
};

const { data, isFetching, isLoading, isError, error, refetch } =
useSuperHeroesData(onSucces, onError, isEnabled);

return (
<div>
{isFetching && <h2>Loading...</h2>}
{isLoading && <h2>Loading...</h2>}
{isError && <h2>{error.message}</h2>}

<button onClick={refetch}>Fetch Heroes</button>
{data && (
<>
{data.map((heroName) => (
<div
))}
</>
)}
</div>
);
};

export default NewSuperHeroes;

[ftnsco]

Why do you return onSuccess and onError? Isn’t that the same as what react query already returns from useQuery hook?

[nicuhurd]

import {useState} from 'react'
import useSuperHeroesData from

const RQHomework = () => {

const [isQueryEnabled, setIsQueryEnabled] = useState(true)

const onSuccess = (data) => {
console.log('Perform side effect after data fetching');
if (data) {
setIsQueryEnabled(false)
}
}

const onError = (data) => {
console.log('Perform side effect after encountering error');
}

// destructure 'results' from useQuery
const { isLoading, data, isError, error, isFetching, refetch } = useSuperHeroesData(onSuccess, onError, isQueryEnabled)

if (isError) {
return <>
<div>Super-Heroes-onclick page</div>
<div>
An error occured :(
<div>{error.message}</div>
</div>
</>
}

console.log(isLoading, isFetching);

if (isLoading || isFetching) {
return <>
<div>Loading superheroes...</div>
</>
}

return (
<>
<div>RQUsingCustomHook page</div>
<button onClick={refetch}>Fetch heroes</button>
<div className='col-sm-12 col-lg-3 small'>
{data ? (<>
<table >
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
{data.map((heroname) => {
return <tr key={heroname}>
<td>{heroname}</td>
</tr>
})}
</tbody>
</table>
</>
) : ('no data')}

</div>

</>
)
}

export default RQHomework