vicious-gold•2y ago

404 Page for edit resource screen

Is there a way to display a 404 error page if a single resource returns 404 as a status code? /posts/edit/100 The ID 100 doesn't exist in database

30 Replies

harsh-harlequin•2y ago

Hi @Hanif Mianjee, welcome to our community 🙏 you can try this. please change useForm import according to your UI library

import {
    useForm,
    useNavigation,
} from "@pankod/refine-core";

 const { push } = useNavigation();

    const { queryResult } = useForm<IPost>({
        queryOptions: {
            onError(err) {
                if (err.statusCode === 404) {
                    push("/404");
                }
            },
        },
    });

import {
    useForm,
    useNavigation,
} from "@pankod/refine-core";

 const { push } = useNavigation();

    const { queryResult } = useForm<IPost>({
        queryOptions: {
            onError(err) {
                if (err.statusCode === 404) {
                    push("/404");
                }
            },
        },
    });

by the way, all data related hooks have onError callback 🚀

vicious-gold•2y ago

Hi @alicanerdurmaz , Thanks Let me try this QueryOptions does not exist in type UseFormProps Getting this error

harsh-harlequin•2y ago

Let me check. which package did you import the useForm?

vicious-gold•2y ago

Refine-react-hook-form

harsh-harlequin•2y ago

oh sorry. props keys can be vary from package to package. please nest inside refineCoreProps

const form = useForm({
    refineCoreProps: {
        queryOptions: {
           onError(err) {
                if (err.statusCode === 404) {
                    push("/404");
                }
            },
        },
    },
});

const form = useForm({
    refineCoreProps: {
        queryOptions: {
           onError(err) {
                if (err.statusCode === 404) {
                    push("/404");
                }
            },
        },
    },
});

https://refine.dev/docs/packages/documentation/react-hook-form/useForm/#queryoptions

vicious-gold•2y ago

Thanks @alicanerdurmaz this worked and redirected to /404 route

harsh-harlequin•2y ago

your welcome, i'm glad to hear that 🙏

vicious-gold•2y ago

set retry to false but it is still calling the API twice Is there any option that needs to be set?

harsh-harlequin•2y ago

It may be caused by strict mode. https://refine.dev/blog/react-strict-mode-in-react-18/ when you remove this, if it's calling once. then it's okay. i shouldn't recommend to remove strict mode. it will be disabled on production mode

 <React.StrictMode>
       <App />
   </React.StrictMode>

 <React.StrictMode>
       <App />
   </React.StrictMode>

vicious-gold•2y ago

I am already using it

harsh-harlequin•2y ago

when you remove, is it calling once ?

vicious-gold•2y ago

yes, but error popup still dispaying twice

harsh-harlequin•2y ago

hmm let me investigate the issue. i will return you as soon as possible

vicious-gold•2y ago

Thanks

harsh-harlequin•2y ago

@Hanif Mianjee i removed strict mode and try to reporoduce. error throws only once.