# STEP-8 Query Field and FieldList

[**STEP-8**](https://github.com/GAkim/SocialShareGraphQl/tree/STEP-8)

{% embed url="<https://www.youtube.com/watch?v=kdAG1YxK7Zc>" %}

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

{% code title="scandipwa-socialshare/src/query/SocialShare.query.js" %}

```javascript
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();

```

{% endcode %}

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

{% code title="scandipwa-socialshare/src/store/SocialShare/SocialShare.reducer.js line 4 - 14" %}

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

{% endcode %}

3\. let’s check using [**Redux DevTools**](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd) if data is fetched

![](https://lh5.googleusercontent.com/1WXjBXz0bNrW1RGpazfuuFLpKoQwNf0xoWbPjnws2YRSYTSQVrE7bjT4sgZUnagVekpzTHKZmJnAM_RCIb-4VBd1t_5aTYVvus5YYn_IWxS7EenMlpaPhtOD_fI_tIgkwFOYuGzu)