Relay: "Encountered two children with the same key" bug

[steida]

This is an old bug. Probably fixed in https://github.com/facebook/relay/pull/2349

When I add two items with the same text prop, Relay will warn. I am not doing anything special in http://github.com/este/este.

It's clientMutationID thing. Care to comment, please?

warning.js?6327:33 Warning: Encountered two children with the same key, `cjgmunj9x000j0756vwy1p6uv`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
    in div (created by View)
    in View (at Webs.js:18)
    in Webs (created by Relay(Webs))
    in Relay(Webs) (at index.js:25)
    in Authenticated (at index.js:67)
    in div (created by View)
    in View (at Page.js:84)
    in PageBody (at Page.js:159)
    in div (created by View)
    in View (created by ScrollView)
    in div (created by View)
    in View (created by ScrollViewBase)
    in ScrollViewBase (created by ScrollView)
    in ScrollView (at Page.js:71)
    in PageContainer (at Page.js:157)
    in Page (at withIntl.js:19)
    in WrapperComponent (created by InjectIntl(WrapperComponent))
    in InjectIntl(WrapperComponent) (created by Relay(InjectIntl(WrapperComponent)))
    in Relay(InjectIntl(WrapperComponent)) (at index.js:62)
    in Index (at index.js:90)
    in RelayProvider (at index.js:89)
    in ErrorPopupProvider (at index.js:88)
    in IntlProvider (at index.js:79)
    in App (created by Container)
    in AppContainer (created by Container)
    in Container (created by App)
    in App

[jgcmarins]

how this is related to relay?

[steida]

@jgcmarins Check mentioned PR.

[srghma]

For people who experienced this error:

Relay v1.7 - clientMutationId not removed yet

Here is how to resolve this issue (kudos to https://github.com/este/este project)

diff --git a/client/components/Posts/createPostMutation.js b/client/components/Posts/createPostMutation.js
index b9cd342..a86b424 100644
--- a/client/components/Posts/createPostMutation.js
+++ b/client/components/Posts/createPostMutation.js
@@ -1,50 +1,55 @@
 import { commitMutation, graphql } from 'react-relay';
 import { ConnectionHandler } from 'relay-runtime';

+const getClientMutationId = () => Date.now().toString(36);
+
 const mutation = graphql`
   mutation createPostMutation($input: CreatePostInput!) {
     createPost(input: $input) {
       postEdge {
         node {
           headline
           body
           id
           rowId
         }
       }
+
+      clientMutationId
     }
   }
 `;

 export default function commit(environment, headline) {
   return commitMutation(
     environment,
     {
       mutation,
       variables: {
         input: {
           post: {
             headline,
             body: 'mybody',
           },
+          clientMutationId: getClientMutationId()
         },
       },
       updater: (store) => {
         // Get the payload returned from the server
         const payload = store.getRootField('createPost');
         const newEdge = payload.getLinkedRecord('postEdge');

         // Add to connection (relay connections are used for pagination)
         const hostProxy = store.get('query');
         const conn = ConnectionHandler.getConnection(hostProxy, 'AppQuery_allPosts');
         ConnectionHandler.insertEdgeAfter(conn, newEdge);

         conn.setValue(conn.getValue('totalCount') + 1, 'totalCount')
       },
       onCompleted: response => {
         console.log('response', response)
       },
       onError: err => console.error(err)
     }
   );

[sibelius]

related to https://github.com/facebook/relay/pull/2349

[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.