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"
},
]
}
],
The problem is from your query code. For some reason (don't ask me because I dont know) this error occurs when you use this method of querying data from graphql endpoint.
All you have to to is remove "id" for attributes from the query code like so
import { gql } from "@apollo/client"
const getCategoryProducts = (category) => gql`
{
category(input: {title:"${category}"}){
name
products{
id
name
brand
prices{
amount
currency{
label
symbol
}
}
gallery
inStock
attributes{
name
items{
id
value
displayValue
}
}
}
}
}
`
Notice that under attribues there is no more "id".
Add Message
Tags
Thread detail
Thread Create
Privacy Policy
By using our website,
you agree that devmaesters can store cookies on your device and disclose information in accordance with our privacy policy.