stormy-gold•2y 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•2y 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•2y 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•2y ago

<@649975248107733013> kapa.ai is still learning and improving, please let us how it did by reacting below

absent-sapphire•2y 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!",
            },
        };
    },
};

stormy-gold•2y ago

@alicanerdurmaz No, it's not working. I try it. graphql.request catches the error I think

national-gold•2y ago

Are you trying in useRegister hook or authProvider?

stormy-gold•2y ago

@salihozdemir

stormy-gold•2y ago

The "Something went wrong!" message never appears. Instead, the other toast pops up

absent-sapphire•2y ago

probably you need to wrap your request to try catch

stormy-gold•2y 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

national-gold•2y ago

check method works when user is authenticate. Can you explain in detail how the application should behave?

stormy-gold•2y ago

@salihozdemir The check method was my fault, sorry 🙂

national-gold•2y 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

stormy-gold•2y ago

yeah, but I can't display custom data if data has error, because the useRegister will catch it

absent-sapphire•2y 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,
    };
}

stormy-gold•2y 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')
       
      },
    });

national-gold•2y 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')
        }  
      },
    });

stormy-gold•2y ago

@salihozdemir Thank you, it's working now 🙂 You guys are the best