ScandiPWA
Create Magento AppCreate ScandiPWA AppUser ManualGitHub
  • Why Scandi
  • πŸš€Quick-start Guide
  • πŸ—ΊοΈRoadmap
  • Introduction to the Stack
    • CMA, CSA, and ScandiPWA
    • Challenges
  • Setting up Scandi
    • Storefront Mode Setup
      • Proxying requests to server
    • Magento Mode Setup
    • Existing Magento 2 setup
    • Magento Commerce Cloud setup
    • Updating to new releases
      • Storefront mode upgrade
      • Magento mode upgrade
      • CMA upgrade
      • CSA upgrade
      • Custom ScandiPWA composer dependency update
      • Local ScandiPWA Composer Package Setup
    • Docker Setup [deprecated]
      • Legacy Docker setup
      • Migrating to CMA & CSA
  • Developing with Scandi
    • Override Mechanism
      • Overriding JavaScript
        • Overriding classes
        • Overriding non-classes
      • Overriding Styles
      • Overriding the HTML / PHP
      • Parent Themes
    • Extensions
      • Creating an extension
      • Installing an extension
      • Migrating from 3.x to 4.x
      • Publishing an extension
      • Extension Terminology
    • Working With Magento
      • Magento troubleshooting
      • Working with Magento modules
      • Working with GraphQL
      • GraphQL Security
      • Working with "granular cache"
    • Developer Tools
      • Debugging in VSCode
      • ScandiPWA CLI
      • Configuring ESLint
      • CSA Commands
    • Deploying Your App
      • Build & Deploy Android app
      • Build & Deploy iOS app
  • Structure
    • Directory Structure
    • Building Blocks
      • Components
        • Styling Components
      • Routes
      • Redux Stores
      • GraphQL Queries
      • Global Styles
      • The Util Directory
      • Type Checking
    • Application assets
    • Code Style
      • JavaScript Code Style
      • SCSS Code Style
  • Tutorials
    • Customizing Your Theme
      • Styling
        • Customizing the Global Styles
        • Adding a New Font
        • Overriding a Components Styles
        • Extending a Component's Styles
      • Customizing JavaScript
        • Customizing the Footer Copyright
        • Adding a New Page
        • Adding a Section in My Account
        • Adding a Tab on the Product Page
        • Creating a New Redux Store
    • Payment Method Integration
      • Setting Up for Development
      • Redirecting to the Payment Provider
      • Handling the Customer's Return
    • Creating a Custom Widget
      • Scandi CMS System Overview
      • Creating a Magento Widget
      • Implementing the Rendering
    • Video Tutorials
      • #1 Setting up and talking theory
      • #2 Templating in React
      • #3 Overriding a file
      • #4 Styling the application
      • #5 Patterns of ScandiPWA
    • Dark Mode Extension
    • Deploying Native Apps
    • Product 3D Model Extension
      • Part 1: Magento 3D Model Uploads
      • Part 2: GraphQL API
      • Part 3: Scandi Frontend
    • Social Share, Full Extension Development
      • STEP-1 and 2 Creating Magento 2 Module
      • STEP-3 Backend Configurations Settings
      • STEP-4 Simple GraphQl and Resolver
      • STEP-5 Creating Extension, Base Redux Store
      • STEP-6 Extension plugins
      • STEP-7 GraphQL types, Helpers
      • STEP-8 Query Field and FieldList
      • STEP-9 render Plugins and MSTP Plugin, Component creation
      • STEP-10 SocialShare Component Development
      • STEP-11 SocialShare for CategoryPage
      • TASK-1 Changing LinkedIn to Twitter
      • STEP-12 Comments for Admin Users
      • STEP-13 Final, bugfixes
    • Accessing Magento 2 Controllers
      • STEP-1 Creating Magento 2 Module
      • STEP-2 - Create Magento 2 Frontend Route and Basic Controller
      • STEP-3 Accessing Magento 2 Controller, Bypassing ScandiPWA frontend
      • STEP-4 Creating ScandiPWA Extension with additional dependencies
      • STEP-5 Creating Plugin and Axios request
  • About
    • Support
    • Release notes
    • Technical Information
    • Data Analytics
    • Contributing
      • Installation from Fork
      • Repository structure
      • Code contribution process
      • Submitting an Issue
      • Publishing ScandiPWA
Powered by GitBook
On this page

Was this helpful?

  1. Tutorials
  2. Social Share, Full Extension Development

STEP-7 GraphQL types, Helpers

As we have successfully established a connection with backend and frontend, let's prepare and collect all configurations we created at STEP-3 transfer.

PreviousSTEP-6 Extension pluginsNextSTEP-8 Query Field and FieldList

Last updated 3 years ago

Was this helpful?

  1. First of all, we going to modify our schema.graphqls to gain an understanding of our data structure

ScandiPWA/SocialShareGraphQl/etc/schema.graphqls
type Query {
   socialShare: socialShareType @resolver(class:"\\ScandiPWA\\SocialShareGraphQl\\Model\\Resolver\\SocialShare")
}

type socialShareType {
   socialShareConfig: socialShareConfig
   providers: [ socialShareProvider ]
}

type socialShareConfig {
   enabled: Boolean
   rounded: Boolean
   size: String
   categoryPage: Boolean
   productPage: Boolean
   homePage: Boolean
}

type socialShareProvider {
   id: String
   counter: Boolean
   additional: String
}

Ok now we know how our data structure will look like, then we going to pass data through graphql, will create a Helper which will provide socialShareConfig and providers and map all fields. 2. Create Helper folder in <MODULE ROOT> and DataProvider.php in it

ScandiPWA/SocialShareGraphQl/Helper/DataProvider.php
<?php
declare(strict_types=1);

namespace ScandiPWA\SocialShareGraphQl\Helper;

use Magento\Framework\App\Config\ScopeConfigInterface;
/**
* @package ScandiPWA\SocialShareGraphQl\Helper
*/
class DataProvider
{
   const SOCIALSHARE_CONFIG = 'socialshare/general/';

   const SOCIALSHARE = 'socialshare/';

   const ENABLE = 'enable';

   const ROUNDED = 'rounded';

   const SIZE = 'size';

   const HOME_PAGE = 'home_page';

   const CATEGORY_PAGE = 'category_page';

   const PRODUCT_PAGE = 'product_page';

   const COUNTER = 'enable_counter';

   const SUFFIX = 'suffix';

   const APP_ID = 'app_id';

   const FB_MSG = 'facebook_messenger';

   const EMAIL = 'email';

   const PROVIDERS = [
       'facebook',
       'facebook_messenger',
       'telegram',
       'whatsapp',
       'linkedin',
       'email',
   ];

   /**
    * @var ScopeConfigInterface
    */
   protected $scopeConfig;

   /**
    * DataProvider constructor.
    * @param ScopeConfigInterface $scopeConfig
    */
   public function __construct(
       ScopeConfigInterface $scopeConfig
   ) {
       $this->scopeConfig = $scopeConfig;
   }

   /**
    * @return array
    */
   public function getSocialShareConfig() {

       return [
           'enabled' => $this->getConfig(self::SOCIALSHARE_CONFIG. self::ENABLE),
           'rounded' => $this->getConfig(self::SOCIALSHARE_CONFIG. self::ROUNDED),
           'size' => $this->getConfig(self::SOCIALSHARE_CONFIG. self::SIZE),
           'categoryPage' => $this->getConfig(self::SOCIALSHARE_CONFIG. self::CATEGORY_PAGE),
           'productPage' => $this->getConfig(self::SOCIALSHARE_CONFIG. self::PRODUCT_PAGE),
           'homePage' => $this->getConfig(self::SOCIALSHARE_CONFIG. self::HOME_PAGE)
       ];
   }

   /**
    * @return array
    */
   public function getSocialShareProviders() {
       $result = [];

       foreach (self::PROVIDERS as $provider) {
           $data = [];

           switch ($provider) {
               case self::FB_MSG:
                   $data = $this->getFacebookMessengerData();
                   break;
               case self::EMAIL:
                   $data = $this->getEmailData();
                   break;
               default:
                   $data = $this->getData($provider);
           }

           if($data) {
               array_push($result, $data);
           }
       }

       return $result;
   }

   /**
    * @return array|false
    */
   protected function getFacebookMessengerData() {
       $enabled = $this->getProviderConfig(self::FB_MSG, self::ENABLE);

       if($enabled) {
           return [
               'id' => self::FB_MSG,
               'additional' => $this->getProviderConfig(self::FB_MSG, self::APP_ID)
           ];
       }

       return false;
   }

   /**
    * @param $provider
    * @return array|false
    */
   protected function getData($provider) {
       $enabled = $this->getProviderConfig($provider, self::ENABLE);

       if($enabled) {
           return [
               'id' => $provider,
               'counter' => $this->getProviderConfig($provider, self::COUNTER)
           ];
       }

       return false;
   }

   /**
    * @return array|false
    */
   protected function getEmailData() {
       $enabled = $this->getProviderConfig(self::EMAIL, self::ENABLE);

       if($enabled) {
           return [
               'id' => self::EMAIL,
               'additional' => $this->getProviderConfig(self::EMAIL, self::SUFFIX)
           ];
       }

       return false;
   }

   /**
    * @param $path
    * @return mixed
    */
   protected function getConfig($path) {
        return $this->scopeConfig->getValue($path);
   }

   /**
    * @param $provider
    * @param $config
    * @return mixed
    */
   protected function getProviderConfig($provider, $config) {
       return $this->scopeConfig->getValue(self::SOCIALSHARE. $provider. '/'. $config);
   }
}

3. Now we going to modify our resolver and request data from DataProvider

ScandiPWA/SocialShareGraphQl/Model/Resolver/SocialShare.php
<?php

declare(strict_types=1);

namespace ScandiPWA\SocialShareGraphQl\Model\Resolver;

use Magento\Framework\GraphQl\Config\Element\Field;
use Magento\Framework\GraphQl\Query\Resolver\ContextInterface;
use Magento\Framework\GraphQl\Query\ResolverInterface;
use Magento\Framework\GraphQl\Schema\Type\ResolveInfo;
use ScandiPWA\SocialShareGraphQl\Helper\DataProvider;

/**
* @package ScandiPWA\SocialShareGraphQl\Model\Resolver
*/
class SocialShare implements ResolverInterface
{
   /**
    * @var DataProvider
    */
   protected $dataProvider;

   /**
    * SocialShare constructor.
    * @param DataProvider $dataProvider
    */
   public function __construct(
       DataProvider $dataProvider
   ) {
       $this->dataProvider = $dataProvider;
   }
   /**
    * @param Field $field
    * @param ContextInterface $context
    * @param ResolveInfo $info
    * @param array|null $value
    * @param array|null $args
    * @return string[]
    */
   public function resolve(Field $field, $context, ResolveInfo $info, array $value = null, array $args = null)
   {
       $result = [
           'socialShareConfig' => $this->dataProvider->getSocialShareConfig(),
           'providers' => $this->dataProvider->getSocialShareProviders()
       ];

       return $result;
   }
}

4. Now again using we going to check if we did everything right

Altair GraphQL Client
STEP-7