Handle Loading and Error States in RTK Query with isLoading and Error Values
Both queries and mutations in RTK Query return isLoading and error values from the hook you call in your component. There are also about 8 other values you have access to in your component.
While isLoading is pretty obvious it's important to understand how the error value is put together. They contain the status and data properties, where data is whatever is returned from the server. Also unlike fetch, RTK Query will respond with an error on non-200 responses. However, RTK Query won't ever throw unless you call .unwrap() on a failed request.
See https://redux-toolkit.js.org/rtk-query/usage/error-handling#overview for more info.
Jamund Ferguson: [0:00] On our service details page, you'll notice when I load the page from scratch, you'll see this temporary state for a while that says Could not find service. You'll also notice if I go to an invalid service ID, we don't do a particularly good job of displaying an error message.
[0:14] Let's fix both of those issues now by doping up the ServiceDetailsPage. From the useGetServiceQuery hook, we want to destructure two additional values -- isLoading and error. We're also going to pull in a new loader component to help us deal with the loadingState.
[0:27] Type import { loader } from "../../components/Loader". At the top of our component response here, we'll say isLoading ? display the loader. Otherwise if there's an error, then we'll display error.status Could not find service: {serviced}. Then down here in our paragraph we'll display error.data.message.
[0:58] We pull off the isLoading and error states from our useGetServiceQuery hook. If it's loading, we display a loader. If there's an error, we'll then display the status and data.message properties of the error object. If none of those things are true, we should be pretty confident at that point that we have our service, so we can safely display the service details there.
[1:18] Let's take a look at what that shows us now. An invalid service will properly show us this. This message here, "The service was not found within our mock data," is actually being returned from our API. If you go into our inspector here and open up the Network tab, reload the page, you'll see the response here is The service was not found within our mock data.
[1:37] It's a 404 response when we make our call to api/services, and that message is exactly what's being shown here. That's the error.data.message property. The error.status property, of course, is the 404 status code. If we go to a service that is happy, such as this one, you see then it will display that little loading state before showing the service on the screen.
[2:00] Whether you're using a mutation or a query, all the custom hooks provided by RTK Query are going to provide this isLoading and error states, as well as several others that may be useful in your applications.