I'm new to Relay and am having an issue with nested data on a fragment.
The following query returns the correct data when I test in it graphiql so I am confident my schema is correct.
{
viewer {
customers {
name
billing_address {
city
}
}
}
}
However, when I use the above query with Relay the customer.name
will be correct but customer.billing_address.city
is the same for every customer. It's confusing to me why some of the data would be correct while the nested data would just be copied.
I would appreciate any help with the issue and if anymore information is needed I would be glad to add it. Below is the only Relay code currently in my project and where I believe the issue may be.
class App extends Component {
render() {
console.log(this.props.viewer.customers);
return (
<div>
{this.props.viewer.customers.map((customer) => (
<div>
<div>{customer.name}</div>
<div>{customer.billing_address.city}</div>
</div>
))}
</div>
);
}
}
class AppHomeRoute extends Relay.Route {
static queries = {
viewer: () => Relay.QL`
query {
viewer
}
`,
};
static routeName = 'AppHomeRoute';
}
const AppContainer = Relay.createContainer(App, {
fragments: {
viewer: () => Relay.QL`
fragment on Viewer {
customers{
name
billing_address{
city
}
}
}`
},
});
ReactDOM.render(
<Relay.RootContainer
Component={AppContainer}
route={new AppHomeRoute()}
/>,
document.getElementById('root')
);
One possible problem could by how you resolve billing_address in your GraphQL schema. Did you include an
field :id, !types.ID
orglobalIdField
in your billing_address GraphQL type? Posting your GraphQL schema may also help.