How do you handle request errors or loading states?

Question

Accepted Answer

RTK Query provides built-in status flags to help you handle loading, success, and error states in your components without manually tracking them. These flags make it easy to manage UI feedback for API requests. **`isLoading`:** Indicates the request is in progress and no data is yet available. **`isFetching`:** True when data is being refetched, even if cached data is available. **`isSuccess`:** Set to true when data has been successfully fetched. **`isError`:** Becomes true if the request fails for any reason. **`error`:** Contains details about the error (status code, message, etc.). import React from 'react'; import { useGetUserQuery } from './services/api'; export const UserProfile = () => { const { data, error, isLoading, isFetching, isError } = useGetUserQuery(); if (isLoading) return

Loading user data...

; if (isFetching) return

Refreshing data...

; if (isError) return

Error: {error?.data?.message || 'Failed to fetch user data'}

; return (

{data.name}

Email: {data.email}

); }; In this example, `isLoading` and `isFetching` control the display of loading messages, while `isError` and `error` are used to show appropriate error feedback to users. import React from 'react'; import { useUpdateUserMutation } from './services/api'; export const UpdateUser = () => { const [updateUser, { isLoading, isError, error, isSuccess }] = useUpdateUserMutation(); const handleUpdate = async () => { try { await updateUser({ name: 'New Name' }).unwrap(); alert('User updated successfully'); } catch (err) { console.error('Update failed:', err); } }; return (

{isError &&

Error: {error?.data?.message}

} {isSuccess &&

Update successful!

}

); }; For mutations, you can use **`unwrap()`** to handle errors with standard `try/catch` syntax. This gives you fine control over how errors are displayed or logged. Using these built-in flags, RTK Query simplifies UI state management for network operations, ensuring smooth and reliable user feedback for loading and error handling.

How do you handle request errors or loading states?

How do you handle request errors or loading states?

Scenario Questions

Follow-up Questions