Mutation not updating nested connections in local store

[unp]

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:

[sibelius]

add @connection to all nested connections in mutation output payload

and also update them using updater function

[gpbaculio]

add @connection to all nested connections in mutation output payload

and also update them using updater function

can you show a sample? having a hard time with this. would really appreciate

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.