How to get the media_url in ( WYSIWYG) custom GraphQl In magento 2? – Today i am going to write about an error. When we get get media url magento 2. Which i faced recently in one of my project. How to get the media_url in ( WYSIWYG) custom GraphQl In magento 2. 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
//-------- $objectManager = \Magento\Framework\App\ObjectManager::getInstance(); $wysiwygConfig = $objectManager->create('Magento\Cms\Model\Wysiwyg\Config'); $widgetFilters = ['is_email_compatible' => 1]; $wysiwygConfig = $wysiwygConfig->getConfig(['widget_filters' => $widgetFilters]); $fieldset->addField( 'answer', 'editor', [ 'name' => 'answer', 'label' => __('Answer'), 'title' => __('Answer'), 'config' => $wysiwygConfig, 'disabled' => $isElementDisabled ] ); //----------- |
schema.graphqls file should go under app/etc/schema.graphqls. Here Our graphql query is common query to get the results.
|
1 2 3 4 5 6 7 8 9 |
type Query { faqs : [Faqs] @resolver( class: "Ayakil\\Faq\\Model\\Resolver\\Faq") @doc(description: "Get list of active answered FAQS") } type Faqs { id : Int @doc(description: "Id") question : String @doc(description: "Question") answer : String @doc(description: "Answer") } |
Below is my Data-provider to get the faq and answer.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<?php namespace Ayakil\Faq\Model\Resolver\DataProvider; class Faq { protected $_faqFactory; public function __construct( \Ayakil\Faq\Model\FaqFactory $faqFactory ) { $this->_faqFactory = $faqFactory; } /** * @params int $id * this function return all the word of the day by id **/ public function getFaq( ) { try { $collection = $this->_faqFactory->create()->getCollection(); $collection->addFieldToFilter('faq_active',1); $collection->setOrder('short_order', 'ASC'); foreach($collection as $faq){ $faq_id = $faq->getId(); $faqData[$faq_id]['id'] = $faq_id; $faqData[$faq_id]['question'] = $faq->getQuestion(); $faqData[$faq_id]['answer'] = $faq->getAnswer(); } } catch (NoSuchEntityException $e) { throw new GraphQlNoSuchEntityException(__($e->getMessage()), $e); } return $faqData; } } |
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.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<?php namespace Ayakil\Faq\Model\Resolver\DataProvider; class Faq { protected $_faqFactory; /** * @var FilterEmulate */ private $widgetFilter; public function __construct( \Ayakil\Faq\Model\FaqFactory $faqFactory, \Magento\Widget\Model\Template\FilterEmulate $widgetFilter ) { $this->_faqFactory = $faqFactory; $this->widgetFilter = $widgetFilter; } /** * @params int $id * this function return all the word of the day by id **/ public function getFaq( ) { //$this->getOrderBYId(); try { $collection = $this->_faqFactory->create()->getCollection(); $collection->addFieldToFilter('faq_active',1); $collection->setOrder('short_order', 'ASC'); foreach($collection as $faq){ $faq_id = $faq->getId(); $faqData[$faq_id]['id'] = $faq_id; $faqData[$faq_id]['question'] = $faq->getQuestion(); $answer = $faq->getAnswer(); $renderedContent = $this->widgetFilter->filter( $answer ); $faqData[$faq_id]['answer'] = $renderedContent;//$this->widgetFilter->filter( $renderedContent ); } } catch (NoSuchEntityException $e) { throw new GraphQlNoSuchEntityException(__($e->getMessage()), $e); } return $faqData; } } |
After running the graphql query again i am getting the correct response to view the image in front end.
My graphql query
|
1 2 3 4 5 6 7 |
query faqs { faqs { id question answer } } |
Result is like below. This will return the complete media url without any errors like before.
|
1 2 3 4 5 6 7 8 9 10 11 |
{ "data": { "faqs": [ { "id": 4, "question": "How can i order your Product and update me the product image?", "answer": "<p>Test answer.<img src=\"http://dictionary.local/media/wysiwyg/IMG-20160929-WA0030.jpg\" alt=\"\" width=\"1280\" height=\"906\"></p>" } ] } } |
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.
1 thought on “How to get the media_url in ( WYSIWYG) custom Graphql In magento 2?”