`items` of `ListBlock` in `StreamField` have same `id` as the `ListBlock` itself

[tbrlpld]

trafficstars

Hi,

I was just working with a ListBlock in a StreamField and noticed an error message in the developer console.

Warning: Encountered two children with the same key, `97c098cb-2ad1-445f-9ea7-36667656108c`. 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.

Running a query on the GraphQL endpoint reveals that all the items of ListBlock in StreamField have same id as the ListBlock itself (and thus all the items have the same id).

query {
  page(slug: "first-article") {
    id
		title
    url
    ... on BlogPage {
      freeformbody {
        ... on ListBlock {
          id
          items {
            id
          }
        }
      }
    }
  }
}

->

{
  "data": {
    "page": {
      "id": "5",
      "title": "First Article",
      "url": "/articles/first-article/",
      "freeformbody": [
        ...
        {
          "id": "97c098cb-2ad1-445f-9ea7-36667656108c",
          "items": [
            {
              "id": "97c098cb-2ad1-445f-9ea7-36667656108c"
            },
            {
              "id": "97c098cb-2ad1-445f-9ea7-36667656108c"
            },
            {
              "id": "97c098cb-2ad1-445f-9ea7-36667656108c"
            }
          ]
        },
        ...
      ]
    }
  }
}

Not sure what downstream error this might cause, but I guess the React warning will have it's reasons 😉

[zerolab]

Related: https://github.com/wagtail/rfcs/pull/65

[zerolab]

This is now ready to implement for 2.16+

[dopry]

This would be a good starter issue.

1. [ ] write test to ensure a list item id is not the same as the list id.
2. [ ] In theory this should be fixed upstream, so the test should pass, but if not, look into the issue further and identify whether the problem is in grapple or wagtail.