React Query Tutorial #2 - The useQuery Hook

In this React Query tutorial we'll go over how to use the useQuery hook in order to get & manage async data in our React components.

🐱‍👤🐱‍👤 JOIN THE GANG -
----------------------------------------
🐱‍💻 🐱‍💻 My Udemy Courses:

🐱‍💻 🐱‍💻 Course Files:

🐱‍💻 🐱‍💻 Other Related Free Courses:

[kiran]

I am going to put "Trained by Shaun" on my resume and get all the jobs!

[Etheriiss]

I would love to see react + typescript series if it's possible :D

[songwright]

I got errors until I changed my App as follows:

import React, { useState } from 'react';
import { QueryClient, QueryClientProvider } from 'react-query'
import Navbar from './components/Navbar';
import Planets from './components/Planets';
import People from './components/People';

const queryClient = new QueryClient()

function App() {
const [page, setPage] = useState('planets');
return (
<QueryClientProvider client={queryClient}>
<div className="App">
<h1>Star Wars Info</h1>
<Navbar setPage={setPage} />
<div className="content">
{ page === 'planets' ? <Planets /> : <People />}
</div>
</div>
</QueryClientProvider>
);
}

[kevgits]

Fantastic work. Thanks. At 13:00 when replacing multiple similar values, consider using Ctrl + H. It's much faster.

[sadev]

Your'e not coming slow, this is amazing content :D
thanks :)

[ahmedmuhammedelsaid]

You are amazing Ninja !!
The best ever <3

[shazaalbeik]

now I see your udemy course and its amazing, I really thank you

[chriskennedy]

you're gonna hit 1 million subs at this rate

[fouflo]

React Query is making the component life-cylce usage totally abstracted ("componentDidMount" or "useEffect") that's getting so easy now... Great video BTW as usual :)

[kristianulvund]

The speed of this lesson is kinda perfect :-)

[neelkremalliabo]

first i appreciated your work for us and thank you for that am asking about sapper hope to be next bez source for that is to few and really you are my resource

[Elduque]

You can mock a slow connection from the Network tab so we can see the loading screen/ status 😃

[salmansayeed]

I almost killed myself trying to implement a loading screen. Thanks for saving my life xD

[AhmadMaartmesrini]

I have been working on it for 6 months, and now I'm working with a startup company 🙂
But the point is that I have a lot on plate lately I mean there's tons of tech things you gotta be super comfortable with and I'm not yet

[stevensunsunsun]

Hi, thank you for this tutorial! I have this working on localhost but there is a status of error on the deployment. Is there another step for production?

[arpanchattopadhyay]

useMutation and queryCache along with optimistic UI updates will be great, if covered 🙂

[ricardoolartepuell]

Hi, it's there any difference you have the fetch function outside function component, with having it inside the function component???

[todaysrapsux]

Is this the just a shorthand equivalent of using the useEffect hook to fetch data and useState hook to save the fetched data?

[davidho]

you can also use isLoading, isError or error and isSuccess instead of status.

[joeuser]

The first parameter in useQuery(''planets') is it just descriptive and a visual help to tell you what the endpoint is, or am I missing something?