Learn about React Query
Fetching data
useQuery docs
In the example above, fetchMovies is our async call that will return an array with all the movies; this can be an Axios call or a simple fetch. The useQuery hook result contains some states we can use in our app
import { useQuery } from 'react-query'
function App() {
const { isLoading, isError, data, error } = useQuery('movies', fetchMovies)
}
isLoading will be true when the query has no data yet, very useful to render a spinner while you can't show data to the user yet.
isError will be true if the async call returned an error, and, of course, the error state will give us more information about it. This is helpful if we need to render some error message when things go wrong.
data will bring us the result of the async call, and we can use it to render our data and show it to the user.
If you didn't notice, we never used anything but the useQuery hook. We didn't use things such a useEffect to pull the data to an useState constant. React Query does all of that behind curtains for us.