錯誤處理

概觀

如果你在使用 fetchBaseQuery 時，查詢或突變發生錯誤，錯誤會回傳在對應 Hook 的 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)
  }