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.

Usage​

Redirection after error​

Usage

Redirection after error