Skip to main content
Version: 3.xx.xx

useCheckError

useCheckError calls the checkError method from the authProvider under the hood. If the checkError returns a rejected promise, useCheckError calls the logout method of the authProvider and the app is unauthenticated.

It returns the result of react-query's useMutation. Data that is resolved from the checkError will be returned as the data in the query result.

Usage

Imagine that we make a payment request which is declined by the API. If error status code is 418, user will be logged out for security reasons.

import { useCheckError } from "@pankod/refine-core";

const { mutate: checkError } = useCheckError();

fetch('http://example.com/payment')
.then(() => console.log("Success"))
.catch((error) => checkError(error));

Any error passed to mutate function will be available in the checkError in the authProvider.


We have a logic in authProvider's checkError method like below.

const authProvider: AuthProvider = {
...
logout: () => {
...
return Promise.resolve();
},
checkError: (error) => {
const status = error.status;
if (status === 418) {
return Promise.reject();
}
return Promise.resolve();
},
...
};

Redirection after error

We have 2 options to manage redirection after logout process.

  • If promise returned from checkError is rejected with nothing, app will be redirected to /login route by default.

  • The promise returned from checkError method of authProvider can reject with a custom url instead.

const authProvider: AuthProvider = {
...
checkError: () => {
...
return Promise.reject("/custom-url");
}
}

CAUTION

This hook can only be used if the authProvider is provided.