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

Did you find this page helpful?