How to get the media_url in ( WYSIWYG) custom Graphql In magento-2-3?

Today i am going to write about an error. Which i faced recently in one of my project. How to get the media_url in ( WYSIWYG) custom Graphql In magento-2-3. Simply my requirement is to add a FAQ section to the website. This is a custom module which allows admin users to create the Question and Answer section. Basically my module return the values to website front end using Custom GraphQl.

My Custom module table has 3 fields. Id, Question and Answer respectively. Answer field type is WYSIWYG editor. where Admin user can demonstrate the answer with the images too.

/app/code/Ayakil/Faq/Block/Adminhtml/Faq/Edit/Tab/Main.php

schema.graphqls file should go under app/etc/schema.graphqls. Here Our graphql query is common query to get the results.

Below is my Data-provider to get the faq and answer.

After running the graphql query in Altair GraphQL addon i am getting the below result set. My answer is having an image field and its returns like below.
<img src=\"{{media url="wysiwyg/what_next.jpg"}}\" alt=\"\" width=\"560\" height=\"460\">. Which is not the correct URL path for the image where i am uploading from the admin panel.

get the media_url in ( WYSIWYG)
faq result set

If i load this to front end , the image is not properly loading. If we run the native cms graphQl query with image it will return the image path nicely. Since my module is custom i might missed some standard method of return the data. After some support from the stack exchange i change my resolver like below. Added \Magento\Widget\Model\Template\FilterEmulate $widgetFilter . And render the content with widgetFilter.

After running the graphql query again i am getting the correct response to view the image in front end.

My graphql query

Result is like below. This will return the complete media url without any errors like before.

Share your thoughts and improvement to improve the article. You can see more How to articles on magento.

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

Leave a Reply

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