0

これは、この質問に関連しています: 反応クエリでの無許可のリクエストの処理

エラーがないため、React-Query が応答コードを気にしないという点は理解しています。たとえば、サーバーが 400 の「Bad Request」で応答した場合、muate 関数によって返されたデータでこれを確認する必要がありますか?

 const handleFormSubmit = async (credentials) => {
    const data = await mutateLogin(credentials);
    //  Do i have to check this data if for example i wanna show an error message 
    // "Invalid Credentials"?
 };

ユーザーをキャッシュに保存する必要があります。

const useMutateLogin = () => {
  return useMutation(doLogin, {
  throwOnError: true,
  onSuccess: data => // Do i have to check here again if i receive the user or 400 code
  })
 }

ありがとう。

4

1 に答える 1

1

react-queryはリクエストを処理せず、Promiseがある限り、それらを作成するために使用するものに完全に依存しません。ドキュメントから、クエリ関数の次の仕様が得られます。

データを解決するか、エラーをスローする promise を返す必要があります。

したがって、特定のステータス コードで失敗する必要がある場合は、クエリ関数で処理する必要があります。

混乱が生じるのは、一般的なライブラリが通常それを処理してくれるからです。たとえば、axiosとjQuery.ajax()は、HTTP ステータス コードが 2xx の範囲外の場合、エラー/拒否をスローします。Fetch APIを使用する場合(投稿したリンクの説明のように)、API は HTTP エラー ステータスで拒否しません。

最初のコード スニペット:

const handleFormSubmit = async (credentials) => {
    const data = await mutateLogin(credentials);
 };

の内容は関数の実装にdata依存します。axiosmutateLoginを使用している場合、promise は 2xx の範囲外の HTTP ステータス コードを拒否します。Fetch APIを使用する場合は、ステータスを確認してエラーをスローするか、受信した応答全体をキャッシュする必要があります。react-query

2 番目のコード スニペット:

const useMutateLogin = () => {
  return useMutation(doLogin, {
  throwOnError: true,
  onSuccess: data => // Do i have to check here again if i receive the user or 400 code
  })
 }

ここでは、前と同じケースがあります。それは実装に依存しdoLoginます。

于 2020-11-08T20:51:10.260 に答える