Apollo Error: Response data is different from the one sent from the graphql server

Please help, I am querying data from an express graphql endpoint and the result returned for one of the data is wrong. When I check the network tab it has the right response but the response returned by query is wrong. 

Below is my code for the query

import { gql } from "@apollo/client"


const getTagProducts = (tag) => gql`
{
    tag(input: {name:`${tag}`}){
        name        
        items{
        
        images
        inStock
        attributes{
          id
          name
          items{
            id
            value
          }   
        }
      }
    }
  }
`

This is code for my class component

import React, { Component } from 'react'
import getTagProducts from "../queries/TagProductQuery";

class TagQuery extends Component {
    state = {  } 

    componentDidMount() {
        this.getInitialData();
    }
    getInitialData() {
        client
          .query({query: getTagProducts("all") })
          .then(result => console.log(result.data.tag.products))        
      }
      
    render() { 
        return (
            <>

            </>
        );
    }
}
 
export default TagQuery;

This is the wrong response am getting for one of the items when I check the browser console 

"attributes": [
      {
        "id": "subTags",
        "items": [
          {
            "value": "Derby Shoes",
            "id": "DerbyShoes"
          },
          {
            
            "value": "Chelsea Boots",
            "id": "ChelseaBoots"
          },
          {
            
            "value": "Outdoor Boots",
            "id": "OutdoorBoots"
          },
          {
            
            "value": "Brogues",
            "id": "Brogues"
          },
        ]
      }
    ],

This is the correct response I expected

"attributes": [
      {
        "id": "Size",
        "items": [
          {
            "displayValue": "Small",
            "value": "S",
            "id": "Small"
          },
          {
            "displayValue": "Medium",
            "value": "M",
            "id": "Medium"
          },
          {
            "displayValue": "Large",
            "value": "L",
            "id": "Large"
          },
          {
            "displayValue": "Extra Large",
            "value": "XL",
            "id": "Extra Large"
          },
        ]
      }
    ],