STEP-8 Query Field and FieldList

In this step, we going to modify our query to fetch all config data to the frontend

STEP-8

1. Modify SocialShare.query.js add 2 new field and fieldList to them

scandipwa-socialshare/src/query/SocialShare.query.js

import { Field } from 'Util/Query';

/** @namespace ScandipwaSocialshare/Query/SocialShare/Query/SocialShareQuery */
export class SocialShareQuery {
   getQuery() {
       return new Field('socialShare')
           .addField(this.getConfigField())
           .addField(this.getProviderField());
   }

   getConfigField() {
       return new Field('socialShareConfig')
           .addFieldList(this.getConfigFields());
   }

   getConfigFields() {
       return [
           'enabled',
           'rounded',
           'size',
           'categoryPage',
           'productPage',
           'homePage'
       ];
   }

   getProviderField() {
       return new Field('providers')
           .addFieldList(this.getProviderFields());
   }

   getProviderFields() {
       return [
           'id',
           'counter',
           'additional'
       ];
   }
}

export default new SocialShareQuery();

2. now we need to modify the reducer initial state with minimal required data

scandipwa-socialshare/src/store/SocialShare/SocialShare.reducer.js line 4 - 14

export const getInitialState = () => ({
   socialShare: {
       socialShareConfig: {
           enabled: false,
           categoryPage: false,
           productPage: false,
           homePage: false
       },
       providers: []
   }
});

3. let’s check using Redux DevTools if data is fetched