r is present, you can access error properties after narrowing the type to either ` FetchBaseQueryError ` or ` SerializedError ` . 
    
    
    import { api } from './services/api'  
      
    function PostDetail() {  
      const { data, error, isLoading } = usePostsQuery()  
      
      if (isLoading) {  
        return <div>Loading...</div>  
      }  
      
      if (error) {  
        if ('status' in error) {  
          // you can access all properties of `FetchBaseQueryError` here  
          const errMsg = 'error' in error ? error.error : JSON.stringify(error.data)  
      
          return (  
            <div>  
              <div>An error has occurred:</div>  
              <div>{errMsg}</div>  
            </div>  
          )  
        } else {  
          // you can access all properties of `SerializedError` here  
          return <div>{error.message}</div>  
        }  
      }  
      
      if (data) {  
        return (  
          <div>  
            {data.map((post) => (  
              <div key={post.id}>Name: {post.name}</div>  
            ))}  
          </div>  
        )  
      }  
      
      return null  
    }  
    

###  Inline error handling example  ​

When handling errors inline after [ ` unwrapping `
](/api/createAsyncThunk#unwrapping-result-actions) a mutation call, a thrown
error will have a type of ` any ` for typescript versions below 4.4, or [ `
unknown ` for versions 4.4+
](https://devblogs.microsoft.com/typescript/announcing-typescript-4-4/#use-
unknown-catch-variables) . In order to safely access properties of the error,
you must first narrow the type to a known type. This can be done using a [
type predicate
](https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-
predicates) as shown below.

services/helpers.ts

    
    
    import { FetchBaseQueryError } from '@reduxjs/toolkit/query'  
      
    /**  
     * Type predicate to narrow an unknown error to `FetchBaseQueryError`  
     */  
    export function isFetchBaseQueryError(  
      error: unknown,  
    ): error is FetchBaseQueryError {  
      return typeof error === 'object' && error != null && 'status' in error  
    }  
      
    /**  
     * Type predicate to narrow an unknown error to an object with a string 'message' property  
     */  
    export function isErrorWithMessage(  
      error: unknown,  
    ): error is { message: string } {  
      return (  
        typeof error === 'object' &&  
        error != null &&  
        'message' in error &&  
        typeof (error as any).message === 'string'  
      )  
    }  
    

addPost.tsx

    
    
    import { useState } from 'react'  
    import { useSnackbar } from 'notistack'  
    import { api } from './services/api'  
    import { isFetchBaseQueryError, isErrorWithMessage } from './services/helpers'  
      
    function AddPost() {  
      const { enqueueSnackbar, closeSnackbar } = useSnackbar()  
      const [name, setName] = useState('')  
      const [addPost] = useAddPostMutation()  
      
      async function handleAddPost() {  
        try {  
          await addPost(name).unwrap()  
          setName('')  
        } catch (err) {  
          if (isFetchBaseQueryError(err)) {  
            // you can access all properties of `FetchBaseQueryError` here  
            const errMsg = 'error' in err ? err.error : JSON.stringify(err.data)  
            enqueueSnackbar(errMsg, { variant: 'error' })  
          } else if (isErrorWithMessage(err)) {  
            // you can access a string 'message' property here  
            enqueueSnackbar(err.message, { variant: 'error' })  
          }  
        }  
      }  
      
      return (  
        <div>  
          <input value={name} onChange={(e) => setName(e.target.value)} />  
          <button>Add post</button>  
        </div>  
      )  
    }  
    

Last updated  on ** Jan 29, 2024  **

[ Previous  Examples  ](/rtk-query/usage/examples) [ Next  Queries  ](/rtk-
query/usage/que