rare-sapphire•3y 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

conscious-sapphire•3y 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 🚀

rare-sapphireOP•3y ago

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

conscious-sapphire•3y ago

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

rare-sapphireOP•3y ago

Refine-react-hook-form

conscious-sapphire•3y 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

rare-sapphireOP•3y ago

Thanks @alicanerdurmaz this worked and redirected to /404 route

conscious-sapphire•3y ago

your welcome, i'm glad to hear that 🙏

rare-sapphireOP•3y ago

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

conscious-sapphire•3y 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>

rare-sapphireOP•3y ago

I am already using it

conscious-sapphire•3y ago

when you remove, is it calling once ?

rare-sapphireOP•3y ago

yes, but error popup still dispaying twice

conscious-sapphire•3y ago

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

rare-sapphireOP•3y ago

Thanks

conscious-sapphire•3y ago

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

conscious-sapphire•3y ago

can you reproduce the issue or give me more detail about your implementation ? maybe your notification provider have problems. but in base example. it works as expected

rare-sapphireOP•3y ago

After remove the strict mode it is calling the API once. But the toas bubble apearing twice

conscious-sapphire•3y ago

can you give me more detail about your NotificationProvider implementation?

rare-sapphireOP•3y ago

using RefineSnackbarProvider from @pankod/refine-mui

conscious-sapphire•3y ago

okay i will try to reproduce with this library @Hanif Mianjee, i reproduced the problem, this problem has nothing to do with this code.

refineCoreProps: {
            queryOptions: {
                retry: false,
                onError(err) {
                    console.log("error");
                    if (err.statusCode === 404) {
                        push("/404");
                    }
                },
            },
        },

refineCoreProps: {
            queryOptions: {
                retry: false,
                onError(err) {
                    console.log("error");
                    if (err.statusCode === 404) {
                        push("/404");
                    }
                },
            },
        },

I will inform you when we found fix for duplicated notification problem. i'm sorry for your trouble

rare-sapphireOP•3y ago

Thanks @alicanerdurmaz for your time and support

conscious-sapphire•3y ago

@Hanif Mianjee We found the issue for Material UI notification popups twice and we are working on fix. probably we will release on Monday. we will inform you when we released. Do you wanna open issue on github ?

rare-sapphireOP•3y ago

Hey @alicanerdurmaz Thank you. Yes sure

conscious-sapphire•3y ago

thanks 🙏

rare-sapphireOP•3y ago

https://github.com/refinedev/refine/issues/3392

GitHub

[BUG] Material UI notification popups twice · Issue #3392 · refined...

Describe the bug The pop-up is appearing twice when I go to an edit resource page and the resource ID does not exist in the database. It retries multiple times and eventually fails with duplicate t...

rare-sapphireOP•3y ago

Here is the issue I created on Github

conscious-sapphire•3y ago

thank you so much 🙏

rare-sapphireOP•3y ago

Hey @alicanerdurmaz Is it released?

Omer•3y ago

Not yet. We are discussing this issue with the react-query team https://github.com/TanStack/query/issues/4827

GitHub

onError called when enabled: false · Issue #4827 · TanStack/que...

Describe the bug I have useQuery in two different components on the same page. They both use the same URL and the same queryKey. The default value of one is enabled: false and it never changes. how...

rare-sapphireOP•3y ago

Thanks @Omer for the updates

404 Page for edit resource screen

Did you find this page helpful?