Mutation not updating nested connections in local store
- Dominant language
- Rust
- Stars
- 19k
- Forks
- 1.9k
- PR merge metrics
- No merged PRs in 30d
Description
I have a mutation that stores contact information. It has top-level fields like `first_name`, `last_name`, and it also has nested connections, like `user_contact_phones` and `user_contact_emails`.
The issue is that, while server responds with all nested connections as expected, the client store only updates with the fields in the top-level connection. Any idea why this is happening?
I have tried adding the new edge three different ways:
1. `ConnectionHandler`'s `insertEdgeAfter`
2. `RelayRecordProxy`'s `setLinkedRecord`
3. `RANGE_ADD` config
Each of them properly adds the new edge, but `user_contact_addresses`, `user_contact_phones`, and `user_contact_emails` fields get passed into the component's props as `undefined`.
When I debug with the `RelayRecordProxy` in the console (inside my `updater` function, I am able to access the nested records.
Here are the relevant parts of my code:
```
const mutation = graphql`
mutation Contacts_CreateUserContactMutation(
$input: CreateUserContactInput!
) {
createUserContact(input: $input) {
user_contact {
id
first_name
last_name
user_contact_addresses {
edges {
node {
id
label
line1
line2
city
province
postal_code
country
}
}
}
user_contact_emails {
edges {
node {
id
label
address
}
}
}
user_contact_phones {
edges {
node {
id
label
number
}
}
}
}
new_user_contact_edge {
node {
id
first_name
last_name
user_contact_addresses {
edges {
node {
id
label
line1
line2
city
province
postal_code
country
}
}
}
user_contact_emails {
edges {
node {
id
label
address
}
}
}
user_contact_phones {
edges {
node {
id
label
number
}
}
}
}
}
}
}
`;
```
```
const configs = [
{
type: 'RANGE_ADD',
parentID,
edgeName: 'new_user_contact_edge',
connectionInfo: [
{
key: 'EventSummaryContainer_user_contacts',
rangeBehavior: 'append'
}
]
}
];
```
```
commitMutation(environment, {
mutation,
variables: {
input: {
// eslint-disable-next-line camelcase
...user_contact
}
},
configs,
optimisticResponse,
onCompleted,
onError
});
```
```
const updater = store => {
const eventProxy = store.get(this.props.event.id);
const payload = store.getRootField('createUserContact');
const newEdge = payload.getLinkedRecord('new_user_contact_edge');
const conn = ConnectionHandler.getConnection(
eventProxy,
'EventSummaryContainer_user_contacts'
);
ConnectionHandler.insertEdgeAfter(conn, newEdge);
}
```
This is what gets passed into the props when the component updates:
Contributor guide
Assessment
This issue has not been assessed yet.