エラー処理

概要

fetchBaseQuery を使用しているときに、クエリまたはミューテーションでエラーがスローされた場合、それぞれのフックの error プロパティに返されます。その場合、コンポーネントは再レンダリングされ、必要に応じてエラーデータに基づいて適切なUIを表示できます。

エラー表示例

クエリエラー

function PostsList() {
  const { data, error } = useGetPostsQuery()

  return (
    <div>
      {error.status} {JSON.stringify(error.data)}
    </div>
  )
}

ミューテーションエラー

function AddPost() {
  const [addPost, { error }] = useAddPostMutation()

  return (
    <div>
      {error.status} {JSON.stringify(error.data)}
    </div>
  )
}

ヒント

ミューテーションの直後にエラーまたは成功ペイロードにアクセスする必要がある場合は、 .unwrap() をチェーンできます。

.unwrapの使い方

addPost({ id: 1, name: 'Example' })
  .unwrap()
  .then((payload) => console.log('fulfilled', payload))
  .catch((error) => console.error('rejected', error))

手動でエラーを選択する

function PostsList() {
  const { error } = useSelector(api.endpoints.getPosts.select())

  return (
    <div>
      {error.status} {JSON.stringify(error.data)}
    </div>
  )
}

カスタム baseQuery でのエラー

レスポンスが data または error として返されるかどうかは、提供された baseQuery によって決まります。

最終的には、 baseQuery で使用するライブラリを自由に選択できますが、正しいレスポンス形式を返すことが重要です。fetchBaseQuery をまだ試していない場合は、試してみてください。そうでない場合は、返されるエラーを変更する方法については、クエリの カスタマイズ を参照してください。

マクロレベルでのエラー処理

エラーを管理するには非常に多くの方法があり、場合によっては、非同期エラーに対して汎用的なトースト通知を表示したい場合があります。RTK QueryはReduxとRedux-Toolkitの上に構築されているため、この目的のためにストアにミドルウェアを簡単に追加できます。

ヒント

Redux Toolkitには、追加のカスタム動作に活用できるアクションマッチングユーティリティがあります。

エラーキャッチミドルウェアの例

import { isRejectedWithValue } from '@reduxjs/toolkit'
import type { MiddlewareAPI, Middleware } from '@reduxjs/toolkit'
import { toast } from 'your-cool-library'

/**
 * Log a warning and show a toast!
 */
export const rtkQueryErrorLogger: Middleware =
  (api: MiddlewareAPI) => (next) => (action) => {
    // RTK Query uses `createAsyncThunk` from redux-toolkit under the hood, so we're able to utilize these matchers!
    if (isRejectedWithValue(action)) {
      console.warn('We got a rejected action!')
      toast.warn({
        title: 'Async error!',
        message:
          'data' in action.error
            ? (action.error.data as { message: string }).message
            : action.error.message,
      })
    }

    return next(action)
  }