rare-sapphire
rare-sapphire3y 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
conscious-sapphire3y 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-sapphire
rare-sapphireOP3y ago
Hi @alicanerdurmaz , Thanks Let me try this QueryOptions does not exist in type UseFormProps Getting this error
conscious-sapphire
conscious-sapphire3y ago
Let me check. which package did you import the useForm?
rare-sapphire
rare-sapphireOP3y ago
Refine-react-hook-form
conscious-sapphire
conscious-sapphire3y 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-sapphire
rare-sapphireOP3y ago
Thanks @alicanerdurmaz this worked and redirected to /404 route
conscious-sapphire
conscious-sapphire3y ago
your welcome, i'm glad to hear that 🙏
rare-sapphire
rare-sapphireOP3y ago
set retry to false but it is still calling the API twice Is there any option that needs to be set?
conscious-sapphire
conscious-sapphire3y 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-sapphire
rare-sapphireOP3y ago
I am already using it
No description
conscious-sapphire
conscious-sapphire3y ago
when you remove, is it calling once ?
rare-sapphire
rare-sapphireOP3y ago
yes, but error popup still dispaying twice
conscious-sapphire
conscious-sapphire3y ago
hmm let me investigate the issue. i will return you as soon as possible
rare-sapphire
rare-sapphireOP3y ago
Thanks
conscious-sapphire
conscious-sapphire3y ago
@Hanif Mianjee i removed strict mode and try to reporoduce. error throws only once.
No description
conscious-sapphire
conscious-sapphire3y 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-sapphire
rare-sapphireOP3y ago
After remove the strict mode it is calling the API once. But the toas bubble apearing twice
conscious-sapphire
conscious-sapphire3y ago
can you give me more detail about your NotificationProvider implementation?
rare-sapphire
rare-sapphireOP3y ago
using RefineSnackbarProvider from @pankod/refine-mui
conscious-sapphire
conscious-sapphire3y 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-sapphire
rare-sapphireOP3y ago
Thanks @alicanerdurmaz for your time and support
conscious-sapphire
conscious-sapphire3y 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-sapphire
rare-sapphireOP3y ago
Hey @alicanerdurmaz Thank you. Yes sure
conscious-sapphire
conscious-sapphire3y ago
thanks 🙏
rare-sapphire
rare-sapphireOP3y ago
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-sapphire
rare-sapphireOP3y ago
Here is the issue I created on Github
conscious-sapphire
conscious-sapphire3y ago
thank you so much 🙏
rare-sapphire
rare-sapphireOP3y ago
Hey @alicanerdurmaz Is it released?
Omer
Omer3y 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-sapphire
rare-sapphireOP3y ago
Thanks @Omer for the updates

Did you find this page helpful?