How can I integrate my custom module with venia theme (pwa-studio)

Question

I want to integration venia theme (pwa) and my custom module. But I can't find any documentation for this. No examples. No integration point in the code. Nothing.

Only https://github.com/Jordaneisenburger/fallback-studio

I had no clue on how or where to start building my own storefront.

But I find many vue storefront module example

https://github.com/DivanteLtd/vue-storefront/blob/master/docs/guide/modules/introduction.md

https://github.com/frqnck/awesome-vue-storefront#front-end-modules

How can I fluently add custom react component at the product page after description for example?

How can I run GraphQL query?

p.s. Which to use venia or vue storefront?

Answer 1

You need to add schema.graphqls (inside etc folder) in your custom module

define the schema regards your fields

For example:

 type Query {
    getMainBanners : [MainBanners] 
    @resolver( class: "YOUR_NAMESPACE\\YOUR_MODULE_NAME\\Model\\Resolver\\Banner") 
    @doc(description: "Get list of banners")
 }

type MainBanners {
    title : String  @doc(description: "Title")
    content : String  @doc(description: "Content")
    button_link : String  @doc(description: "Button link")
    button_text: String @doc(description: "Button text")
    image: BannerImage @doc(description: "Image object")
}

type BannerImage {
    desktop_img_url : String @doc(description: "Desktop image url")
    mobile_img_url : String @doc(description: "Mobile image url")
    alt : String @doc(description: "Image alt")
}

also add the resolver YOUR_NAMESPACE\YOUR_MODULE_NAME\Model\Resolver\Banner.php

class Banner implements ResolverInterface

{
protected $bannerFactory;

public function __construct(
    BannerFactory $bannerFactory
) {
    $this->bannerFactory  = $bannerFactory;
}

/**
 * @inheritdoc
 */
public function resolve(
    Field $field,
    $context,
    ResolveInfo $info,
    array $value = null,
    array $args = null
) {
   $collection = $this->bannerFactory->create()->getCollection()
        ->addFilter('is_active','1')
        ->setPageSize(4);
    $bannerData = $collection->getData();
    return $bannerData;
  }
}

Now you can get it in the front end

query {
  getMainBanners{
    title
    content
    button_link
    button_text
    image {
      desktop_img_url
      mobile_img_url
      alt
    }
  }
}