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?

• prabhakaran7: I'm also looking for answer but vue storefront uses REST API

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
 }
 }
}