Links

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