React Queryのグローバルなエラーハンドリング

React QueryでAPI呼び出し時のエラーをグローバルにハンドリングする方法についてまとめます。

1. QueryClientの設定

// provider.tsx
// グローバルのエラーハンドリング
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: false, // 意図してエラーハンドリングしたいのでfalseにする
    },
  },
  queryCache: new QueryCache({
    onError: (error, query) => {
      /** グローバルのエラーハンドリングの処理をする */
    },
  }),
})

export function ReactQueryProvider({ children }: ReactFlowProviderProps) {
  return (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  )
}

2. コンポーネントでのAPI呼び出し例

const Example = () => {
  const { data } = useQuery({
    queryKey: ['test'],
    queryFn: async () => (await fetch('/api/error-test')).json(),
  })

  return <>{data}</>
}

• QueryClientのqueryCache.onErrorで全体のエラー処理を一元化できます。
• retry: falseにすることで、意図的にエラーをハンドリングしやすくなります。