Using the same field name on multiple components in a dynamic zone causes conflict

[derrickmehaffy]

Bug report

Describe the bug

Note Internal TID164

When using dynamic zones, different components cannot have the same field name with different types (or with enums, different values). GraphQL throws an error like:

Steps to reproduce the behavior

1. Create a model with a dynamic zone
2. Create two components each with an enum called color (doesn't matter what the values are)
3. Create a record in the model and set both components and their values
4. Install GraphQL plugin
5. Try to query data
6. See Error (example below)

Expected behavior

Error doesn't happen

Screenshots

Entry example:

Model structure:

Component structure:

Code snippets

GraphQL Query:

query {
  tests {
    string
    content {
      __typename
      ... on ComponentContentContainer {
        color
      }
      ... on ComponentContentImage {
        color
      }
    }
  }
}

System

• Node.js version: v12.19.0
• NPM version: v6.14.8
• Strapi version: v3.5.4
• Database: SQLite
• Operating system: Linux Mint 20.1 (Ubuntu 20.04.1)

Additional context

Sample repo:
testGQLDZ.zip

[alexandrebodin]

This issue is a known limitation of graphql itself. Here is the upstream issue for reference graphql/graphql-js#53

it seems using aliases can allow working around this limitation though. Nothing we can do as the graphql maintainers won’t change this anytime soon

[soupette]

Should we document this somewhere in our documentation or in the content type builder plugin?

[mattmilburn]

Hello, I'm the one who originally reported this behavior and it has cost me some time... I strongly vote yes, please mention this in the documentation 🙂

Solution / Workaround

Here is a very short example where I had two components with some identical fields, one of which is an ENUM type and lets a user select a named color from a list (ie. lightskyblue, crimson, lime, violet, etc.) So keep in mind that this is not a true color picker, just an ENUM field.

query {
  pages {
    someDynamicZoneField {
      __typename
      ... on ComponentContentOne {
        title
        content
        oneBackgroundColor: backgroundColor
      }
      ... on ComponentContentTwo {
        title
        content
        twoBackgroundColor: backgroundColor
      }
    }
  }
}

Notice that only my backgroundColor fields need to be aliased.

This seems to only affect ENUM field types.

[derrickmehaffy]

Moving this to the documentation repo for us to adjust the GraphQL documentation as a workaround since the "bug" won't be fixed upstream.