Extend Magento2 GraphQl Product Query?

Question

I want to add product FAQS along with product query but getting the error when i query product with CustomizableProductInterface

"message": "Fragment cannot be spread here as objects of type \"ProductInterface\" can never be of type \"CustomizableProductInterface\".",

here is my schema.graphqls

extend type ProductInterface {
    faqList: [faqsList]  @doc(description: "Custom field added to the product query") @resolver(class: "Vendor\\Module\\Model\\Resolver\\CustomField")
}
type faqsList  {
    faq_id: Int
    product_id: Int
    faq_title: String
    topic_title: String
    answer_id: String
    answer: String
    likes: String
    dislikes: String
    is_email: String
    answer_by: String
    user_email: String
    user_id: String
    status: Int
    create_date: String
  }

Resolver

<?php

namespace FME\Vendor\Model\Resolver;

use Vendor\ProdfaqsGraphql\Model\Resolver\DataProvider\Faqs as FaqsProvider;

use Magento\Framework\GraphQl\Query\ResolverInterface;

class CustomField implements ResolverInterface
{
    /**
     * @param FaqsProvider $faqsDataProvider
     */

    public function __construct(
        FaqsProvider $faqsDataProvider
    ) {
        $this->faqsDataProvider = $faqsDataProvider;
    }

    public function resolve(
        \Magento\Framework\GraphQl\Config\Element\Field $field,
        $context,
        \Magento\Framework\GraphQl\Schema\Type\ResolveInfo $info,
        array $value = null,
        array $args = null
    ) {
        $productId = isset($value['entity_id']) ? $value['entity_id'] : null;
        if(null == $productId) {
            return [];
        }
        $storeId = (int)$context->getExtensionAttributes()->getStore()->getId();
        if(!$storeId) {
            $storeId = 0;
        }
        $productData = $this->faqsDataProvider->getBlocksData($productId, $storeId);
        return $productData;
    }
}

DataProvider

<?php

namespace Vendor\ProdfaqsGraphql\Model\Resolver\DataProvider;

use Psr\Log\LoggerInterface;
use Magento\Cms\Model\BlockFactory;
use Vendor\Prodfaqs\Model\ResourceModel\Faqs as FaqsResource;

use Magento\Backend\Block\Template\Context;

class Faqs extends \Magento\Framework\View\Element\Template
{
    /**
     * @var Context
     */
    private $context;

    /**
     * @var BlockFactory
     */
    protected $_blockFactory;

    /**
     * @var LoggerInterface
     */
    private $logger;

    public function __construct(
        Context $context,
        BlockFactory $blockFactory,
        FaqsResource $faqsRm,
        LoggerInterface $logger,
        array $data = []
    ) {
        $this->_blockFactory = $blockFactory;
        $this->_faqsRm = $faqsRm;
        $this->logger = $logger;
        parent::__construct($context, $data);
    }

    public function getProductBySku($sku)
    {
        return $this->_productRepository->get($sku);
    }

    public function getBlocksData($productId, $storeId)
    {
        $block = $this->_faqsRm->getProductFAQs($productId, $storeId);
        $faqsArray = [];
        if($block) {
            foreach ($block as $row) {
                $faqsArray[] = [
                    'faq_id' => $row['faq_id'],
                    'product_id' => $row['product_id'],
                    'status' => $row['faq_status'],
                    'faq_title' => $row['faq_title'],
                    'topic_title' => $row['topic_title'],
                    'answer_id' => $row['answer_id'],
                    'answer' => $row['answer'],
                    'likes' => $row['likes'],
                    'dislikes' => $row['dislikes'],
                    'is_email' => $row['is_email'],
                    'user_email' => $row['user_email'],
                    'user_id' => $row['user_id'],
                    'create_date' => $row['create_date'],
                ];
            }
        }
        return $faqsArray;
    }
}

Query in POSTMAN

query {
  products(
    filter: {sku: {eq: "24-MB01"}}
  ) {
    items {
      id
      name
      sku
      __typename
      ... on CustomizableProductInterface {
        options {
          title
          required
          sort_order
          option_id
          ... on CustomizableFieldOption {
            product_sku
            field_option: value {
              sku
              price
              price_type
              max_characters
            }
          }
          ... on CustomizableAreaOption {
            product_sku
            area_option: value {
              sku
              price
              price_type
              max_characters
            }
          }
          ... on CustomizableDateOption {
            product_sku
            date_option: value {
              sku
              price
              price_type
            }
          }
          ... on CustomizableDropDownOption {
            drop_down_option: value {
              option_type_id
              sku
              price
              price_type
              title
              sort_order
            }
          }
          ... on CustomizableRadioOption {
            radio_option: value {
              option_type_id
              sku
              price
              price_type
              title
              sort_order
            }
          }
          ... on CustomizableCheckboxOption {
            checkbox_option: value {
              option_type_id
              sku
              price
              price_type
              title
              sort_order
            }
          }
          ... on CustomizableMultipleOption {
            multiple_option: value {
              option_type_id
              sku
              price
              price_type
              title
              sort_order
            }
          }
          ... on CustomizableFileOption {
            product_sku
            file_option: value {
              sku
              price
              price_type
              file_extension
              image_size_x
              image_size_y
            }
          }
        }
      }
    }
  }

}

Answer 1

Try this code

app/code/VendorName/ModuleName/etc

schema.graphqls

interface ProductInterface {
faqList: [faqsList]  @doc(description: "FAQ array added to the product query") @resolver(class: "VendorName\\ModuleName\\Model\\Resolver\\DataProvider\\Faqs")
}

type faqsList  {
    faq_id: Int
    product_id: Int
}

app/code/VendorName/ModuleName/Model/Resolver/DataProvider

Faqs.php

<?php

namespace VendorName\ModuleName\Model\Resolver\DataProvider;

use Magento\Framework\GraphQl\Config\Element\Field;
use Magento\Framework\GraphQl\Query\ResolverInterface;
use Magento\Framework\GraphQl\Schema\Type\ResolveInfo;

class Faqs implements ResolverInterface
{

    public function resolve(
        Field $field,
        $context,
        ResolveInfo $info,
        array $value = null,
        array $args = null
    ) {
        $product = $value['model'];
        $faqData = [];
        $faqData[] = [
            'faq_id' => 1,
            'product_id' => $product->getId(),
        ];

        return $faqData;
    }
}

Here I only add static data of FAQs. You can call your collection based on product data.

Please run below Query

{
  products(search: "Yoga pants", pageSize: 2) {
    total_count
    items {
      name
      sku
      faqList{
        faq_id
        product_id
      }
    }
  }
}

Output:

Answer 2

Replace schema.graphqls with below and check

interface ProductInterface {
faqList: [faqsList]  @doc(description: "Custom field added to the product query") @resolver(class: "Vendor\\Module\\Model\\Resolver\\CustomField")
}
type faqsList  {
faq_id: Int
product_id: Int
faq_title: String
topic_title: String
answer_id: String
answer: String
likes: String
dislikes: String
is_email: String
answer_by: String
user_email: String
user_id: String
status: Int
create_date: String
}