Warning: Encountered two children with same key

react native | 33 minutes

This drove me crazy.

In the previous post I wired up a React Native client app to a GraphQL Rails server. My app records meeting duration, so I added the server-side models in 33-minutes-server@838200 and client-side mutations in 33-minutes-app@b79e65 and 33-minutes-app@f253e4.

When creating a second item I would encounter the following error: Encountered two children with the same key, <id>. Child keys must be unique; when two children share a key, only the first child will be used. This was odd, because I knew all IDs were unique. Turns out, this is a Relay bug, with a proposed fix in relay#2349 that is yet to be merged. This is fairly basic and is a good demonstration of how immature cutting edge this ecosystem is.

You can work around this by supplying a unique ID into each GraphQL mutation, which is an optional field in the Relay spec.

import { graphql } from 'react-relay'
import commitMutation from 'relay-commit-mutation-promise'
import uuid from 'uuid/v4';

const mutation = graphql`
  mutation LoginMutation($input: loginInput!) {
    login(input: $input) {
      clientMutationId,
      user {
        id
      }
    }
  }
`

function commit({ environment, input }) {
  const variables = {
    input: {
      clientMutationId: uuid(),
      ...input
    }
  }

  return commitMutation(environment, {
    mutation,
    variables
  })
}

export default {
  commit
}

In my app this change is 33-minutes-app@bf4a89.