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.