How to fixed GraphQl Fields conflicting types. Use different aliases on the fields to fetch result?

GraphQl aliases are used to prevent errors of GraphQL fields conflict type in the response of the query.

Using Aliases in the query to fix the issue of the conflicting type of GraphQl while same type of  arguments are used in a query.

Let’s say a real example to understand these aliases.

{
  products(filter: {sku: {eq: "100001"}}) {
    items {
      uid
      name
      ... on CustomizableProductInterface {
        options {
          title
          required
          sort_order
          uid
          ... on CustomizableFieldOption {
            value {
              sku
              price
            }
          }
          ... on CustomizableDropDownOption {
            value {
              sku
              price
            } 
          }
        }
      }
    }
  }
}

Here CustomizableFieldOption and CustomizableDropDownOption both type are implementing the same interface called CustomizableOptionInterface.

Henceforth when you try to execute the query, you will face an error called,

{
  "errors": [
    {
      "message": "Fields \"value\" conflict because they return conflicting types CustomizableFieldValue and [CustomizableDropDownValue]. Use different aliases on the fields to fetch both if this was intentional.",
      "extensions": {
        "category": "graphql"
      },
      "locations": [
        {
          "line": 15,
          "column": 13
        },
        {
          "line": 21,
          "column": 13
        }
      ]
    }
  ]
}

Here we will update the query to resolve the above error by adding aliases to the value parameter.

You can add aliases like aliasName: fieldName
This format is more readable and understands easily in the query by adding alias like below,

• For an example of adding an alias to the field name,

In the first type, We are adding textField as Alias to the value argument,

textField: value {
  sku
  price
}

Second type by adding a dropDown as an alias to the value argument,

dropDown: value {
  sku
  price
}

The final query to fetch with products by filtering SKU,

{
  products(filter: {sku: {eq: "100001"}}) {
    items {
      uid
      name
      sku
      __typename
      ... on CustomizableProductInterface {
        options {
          title
          required
          sort_order
          uid
          ... on CustomizableFieldOption {
            field: value {
              sku
              price
            }
          }
          ... on CustomizableDropDownOption {
            dropdown: value {
              sku
              price
            } 
          }
        }
      }
    }
  }
}

The final result response without error:

{
  "data": {
    "products": {
      "items": [
        {
          "uid": "MjA0Nw==",
          "name": "Shree1",
          "sku": "100001",
          "__typename": "SimpleProduct",
          "options": [
            {
              "title": "Welcome Message",
              "required": true,
              "sort_order": 1,
              "uid": "Y3VzdG9tLW9wdGlvbi8x",
              "textField": {
                "sku": "100001-welcome",
                "price": 10
              }
            },
            {
              "title": "Hobby",
              "required": true,
              "sort_order": 2,
              "uid": "Y3VzdG9tLW9wdGlvbi8y",
              "dropDown": [
                {
                  "sku": null,
                  "price": 20
                },
                {
                  "sku": null,
                  "price": 10
                },
                {
                  "sku": null,
                  "price": 15
                }
              ]
            }
          ]
        }
      ]
    }
  }
}