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
1
import { Field } from 'Util/Query';
2
3
/** @namespace ScandipwaSocialshare/Query/SocialShare/Query/SocialShareQuery */
4
export class SocialShareQuery {
5
getQuery() {
6
return new Field('socialShare')
7
.addField(this.getConfigField())
8
.addField(this.getProviderField());
9
}
10
11
getConfigField() {
12
return new Field('socialShareConfig')
13
.addFieldList(this.getConfigFields());
14
}
15
16
getConfigFields() {
17
return [
18
'enabled',
19
'rounded',
20
'size',
21
'categoryPage',
22
'productPage',
23
'homePage'
24
];
25
}
26
27
getProviderField() {
28
return new Field('providers')
29
.addFieldList(this.getProviderFields());
30
}
31
32
getProviderFields() {
33
return [
34
'id',
35
'counter',
36
'additional'
37
];
38
}
39
}
40
41
export default new SocialShareQuery();
42
Copied!
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
1
export const getInitialState = () => ({
2
socialShare: {
3
socialShareConfig: {
4
enabled: false,
5
categoryPage: false,
6
productPage: false,
7
homePage: false
8
},
9
providers: []
10
}
11
});
Copied!
3. let’s check using Redux DevTools if data is fetched
Could not load image
Copy link