I've been trying Apollo out with React and am currently facing a problem with it.
I have basic data where a Product belongs to many Categories
query getProduct{
product(id: 1){
id
name
categories{id,name}
}
}
As expected this returns something like this
{
"data": {
"p": {
"id": 1,
"name": "Samsung Galaxy S7",
"categories": [
{
"name": "Phone"
},
{
"name": "Samsung"
}
]
}
}
}
Here is my react Component
class TileProductComponent extends Component{
constructor(...args){
super(...args)
}
render(){
if(this.props.data.loading)
return <div>Loading...</div>
var product = this.props.data.p
console.log(this.props.data)
return (
<div> {product.name} </div>
)
}
}
var TileProduct = graphql(
gql`
query TestQuery($id: Int!){
product(id: $id){
id
name
categories{id,name}
}
}
`,
{
options : {
variables : {id:1}
}
}
)(TileProductComponent)
But once it is passed in the react component i found it to be (from the console.log(this.props.data))
"product": {
"id": 1,
"name": "Phone",
"categories": [
{
"name": "Phone"
},
{
"name": "Samsung"
}
]
}
The product name adopts the name of the first category for some reason ? I'm guessing the id will too. A fix would be to change the name of fields in the schemas, but it shouldn't really do that anyway in my opinion.
Is this a known issue or am I the only one experiencing this? Any proposed solution ?