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