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