xenial-black
xenial-black17mo ago

How can I customize useRegister onSuccess error toast notification message?

This is the refine V4 source code for useRegister hook. There is error handling, which by default throws up a popup with the error message.
onSuccess: async ({ success, redirectTo, error }) => {
if (success) {
close?.("register-error");
}

if (error || !success) {
open?.(buildNotification(error));
}
onSuccess: async ({ success, redirectTo, error }) => {
if (success) {
close?.("register-error");
}

if (error || !success) {
open?.(buildNotification(error));
}
How can I customize the popup message? Now this error message comes from the backend:
common.emailAlreadyUsed: {"response":{"errors":[{"message":"common.emailAlreadyUsed"}],"data":null,"status":200,"headers":{"map":{"content-length":"63","content-type":"application/json; charset=utf-8"}}},"request":{"query":"\n mutation Mutation(\n $email: String!\n $password: String!\n $company: String!\n $firstName: String!\n $lastName: String!\n $industry: String!\n $skipEmailProviderValidation: Boolean!\n ) {\n register(\n registerUserInput: {\n email: $email\n password: $password\n company: $company\n firstName: $firstName\n lastName: $lastName\n industry: $industry\n skipEmailProviderValidation: $skipEmailProviderValidation\n }\n ) {\n email\n id\n }\n }\n","variables":{"email":"t@t.com","password":"1212","company":"vv","firstName":"vvv","lastName":"vvv","industry":"1","skipEmailProviderValidation":true}}}
common.emailAlreadyUsed: {"response":{"errors":[{"message":"common.emailAlreadyUsed"}],"data":null,"status":200,"headers":{"map":{"content-length":"63","content-type":"application/json; charset=utf-8"}}},"request":{"query":"\n mutation Mutation(\n $email: String!\n $password: String!\n $company: String!\n $firstName: String!\n $lastName: String!\n $industry: String!\n $skipEmailProviderValidation: Boolean!\n ) {\n register(\n registerUserInput: {\n email: $email\n password: $password\n company: $company\n firstName: $firstName\n lastName: $lastName\n industry: $industry\n skipEmailProviderValidation: $skipEmailProviderValidation\n }\n ) {\n email\n id\n }\n }\n","variables":{"email":"t@t.com","password":"1212","company":"vv","firstName":"vvv","lastName":"vvv","industry":"1","skipEmailProviderValidation":true}}}
18 Replies
kapa.ai
kapa.ai17mo ago
Hey @mikusjozsef! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave:
kapa.ai
kapa.ai17mo ago
---------------------- To customize the error toast notification message in the useRegister hook, you can modify the buildNotification function that is called when an error occurs. However, the provided extracts do not include the buildNotification function or any information about customizing the error notification in the useRegister hook. You can refer to the refine documentation (https://refine.dev/docs) for more information on customizing notifications. If you need further assistance, please provide more information or code related to the buildNotification function or the useRegister hook. ----------------------
Overview | refine
What is refine?
kapa.ai
kapa.ai17mo ago
<@649975248107733013> kapa.ai is still learning and improving, please let us how it did by reacting below
magic-amber
magic-amber17mo ago
when you return error object from authProvider.register function, popup will open.
const authProvider: AuthBindings = {
// ---
register: async () => {
// ---
return {
success: false,
error: {
name: "Error",
message: "Something went wrong!",
},
};
},
};
const authProvider: AuthBindings = {
// ---
register: async () => {
// ---
return {
success: false,
error: {
name: "Error",
message: "Something went wrong!",
},
};
},
};
xenial-black
xenial-black17mo ago
@alicanerdurmaz No, it's not working. I try it. graphql.request catches the error I think
conscious-sapphire
conscious-sapphire17mo ago
Are you trying in useRegister hook or authProvider?
xenial-black
xenial-black17mo ago
@salihozdemir
No description
xenial-black
xenial-black17mo ago
The "Something went wrong!" message never appears. Instead, the other toast pops up
magic-amber
magic-amber17mo ago
probably you need to wrap your request to try catch
xenial-black
xenial-black17mo ago
@alicanerdurmaz Yes, I tried. But then the check method runs and redirects me to the login and one more thing. The try - catch check runs into catch, but useRegister mutate runs into onSuccess function instead of the onError
conscious-sapphire
conscious-sapphire17mo ago
check method works when user is authenticate. Can you explain in detail how the application should behave?
xenial-black
xenial-black17mo ago
@salihozdemir The check method was my fault, sorry 🙂
conscious-sapphire
conscious-sapphire17mo ago
This is the expected behavior with v4, because we don't return Promise.reject() anymore. You can use data.success to handle it. You can check out our example: https://github.com/refinedev/refine/blob/next/examples/auth-chakra-ui/src/App.tsx
xenial-black
xenial-black17mo ago
yeah, but I can't display custom data if data has error, because the useRegister will catch it
magic-amber
magic-amber17mo ago
is this not work for you ?
try {
const { data } = await clientInformation.request.get("/api/auth/me");
if (!data) {
return {
success: false,
error: {
name: "Error",
message: "Something went wrong",
},
};
}

return {
success: true,
data,
};
} catch (error) {
return {
success: false,
error,
};
}
try {
const { data } = await clientInformation.request.get("/api/auth/me");
if (!data) {
return {
success: false,
error: {
name: "Error",
message: "Something went wrong",
},
};
}

return {
success: true,
data,
};
} catch (error) {
return {
success: false,
error,
};
}
xenial-black
xenial-black17mo ago
Thanks, the custom error message is working now. But, now the onSuccess callback is fired instead of the onError then if there is an error.
const { mutate: registerUser } = useRegister();

registerUser(registerData, {
onSuccess: () => {
console.log('success ');
handleNext()
},
onError: (error) => {
console.log('Something went wrong')

},
});
const { mutate: registerUser } = useRegister();

registerUser(registerData, {
onSuccess: () => {
console.log('success ');
handleNext()
},
onError: (error) => {
console.log('Something went wrong')

},
});
conscious-sapphire
conscious-sapphire17mo ago
It's a expected behavior with v4. You need to handle errors like below:
const { mutate: registerUser } = useRegister();

registerUser(registerData, {
onSuccess: (data) => {
if (data.success) {
console.log('success ');
handleNext()
} else {
console.log('Something went wrong')
}
},
});
const { mutate: registerUser } = useRegister();

registerUser(registerData, {
onSuccess: (data) => {
if (data.success) {
console.log('success ');
handleNext()
} else {
console.log('Something went wrong')
}
},
});
xenial-black
xenial-black17mo ago
@salihozdemir Thank you, it's working now 🙂 You guys are the best
More Posts
Supabase Set role upon signup or signInWithOAuthHi again everyone, How to set claim for role in Supabase when user signup with email and password orResource in useCustomMutation successNotification parameterHow do I access or pass a resource name into useCustomMutation? I use this hook to have a reorderingUse more than one Supabase Table on one PageHey lovely Refine Team, I cant find how to use Data of two Supabase Tables on one Page.how to adding custom type in option(queryOptions) select useCustom ?my use case is to overrides data from api via select options(queryOptions) but i dont know how to aTSconfig errorHey Everyone - I was wondering if anyone else was running into these errors as they were starting a I can't connect my client id as it is asking for a string instead of client_id: process.env.REACT_API can't connect my client id as it is asking for a string instead of client_id: process.env.REACT_API'm trying to create a projectHello everyone, I'm trying to create a project but it only comes with the header, how do I get the sError after upgrade to v4: Uncaught Error: No QueryClient set, use QueryClientProvider to set oneHello everything is fine? by the stack trace the error is in the method: useIsAuthenticated, I am usMultitenant URLsHi all! Anyone have more info on how to provide props to the nextjs-router in v4? We are multitenanUsing response data in errorNotification useFormHello, My REST API sends a JSON with explanation of what's wrong with the response when request fail