How to write GraphQl mutation to create and integrate the magento contact us form functionality?

How to write GraphQl mutation to create and integrate the magento 2 contact us form functionality – Good Day for all. Today’s article is going to cover graphQl mutation for contact-us page. The custom contact us Mutation and functionalities in magento 2.3. Why i tried this approach is, my project’s front-end is React and back-end is Magento 2.

Contact us page is a common and very important page in websites.Where website visitors interact with the website owners. In magento we have a common contact us page and email functionalities in built with.When it comes to graphQl we need to write a custom module to deal it. Currently we don’t have default magento 2.3 contact us Mutation to integrate magento contact-us functionality.

For this we want to create a custom module.What i tried with this custom module is passing the form data to resolver and use the magento default contact us functionality to deal the mailing stuff. Main part in the data provider file was arranging the data as default contact us form data in the magento contact-us module.

graphQl mutation for contact-us page
Contact Us entire module structure

Apart from creating the custom module, i will explain how i wrote the
1. Shema.graphqls.
2. Resolver file.
3. Data provider file.

Shema.graphqls

In this Mutation we have ContactusInput and ContactusOutput where passing the data to resolver and return the success message to front-end.

Resolver file

Data Provider file

I did all my work to use the default contact-us functionality here in the data provider file. Main stuff is creating the data set as used in the default magento and use the mail function as it is. This is totally a hack by myself and please come up with any better solutions if you have.

I created the form data as it is in the default contact-us module and simply pass it with the mail function like below.

We need to pass the form key, so i used the method getFormKey which is used to create the magento default form key.

For the thank you message return variable you want to pass the exact same name[ success_message ] as you define in your type ContactusOutput. In the mutation also use the same wording to get the mutation run.

After every thing finish you want to run the upgrade command and compile command. You want to pass the query like below in the server.

For this query you want to pass the input variables as same as u used in the mutation input in the GraphQl schema. You may read What is GraphQl in magento 2.3 and how to access it get the idea to run the query.

Finally you will get the contact us email to what ever the email you configured in the magento admin panel back-end.

Contact us email configuration
Contact us email configuration

That’s it. Have a nice day.Enjoy coding , Learn , Experience , Teach and Help.

6 thoughts on “How to write GraphQl mutation to create and integrate the magento contact us form functionality?”

Leave a Reply

Your email address will not be published. Required fields are marked *