[Strapi v4] How to mutate dynamic zones via graphql?

Questions and Answers Strapi Backend
1

Hi all,

I want to ask how to do graphql mutation on dynamic zones. I read in the documentation, on how to fetch, but no example on how to mutate.

For example, I have Page collection with schema like this

{
  "kind": "collectionType",
  "collectionName": "pages",
  "attributes": {
    "elements": {
      "type": "dynamiczone",
      "components": [
        "page.profile",
        "page.video"
      ]
    }
  }
}

When I want to fetch, I can use query like this

query {
  pages {
    data {
      attributes {
        elements {
          ... on ComponentPageProfile {
            name
          }
          ... on ComponentPageVideo {
            url
          }
        }
      }
    }
  }
}

When I want to update page, I expect to work like this

mutation {
  updatePage(
    id: 1,
    data: {
      elements: [
        {
           __typename: "ComponentPageProfile",
           __component: "page.profile",
           name: "John Doe"
        }
      ]
    }
  ) {
    data {
      id
    }
  }
}

But I got error

“Expected value of type “PageElementsDynamicZoneInput!”, found {__type: “ComponentPageProfile”, __component: “page.profile”, name: “John Doe”};”

Any ideas?

System Information
  • Strapi Version: 4.0.7
  • Operating System: Windows 10
  • Database: SQLite
  • Node Version: 16.13.2
  • NPM Version: 8.1.2
  • Yarn Version: 1.22.5
2

My bad. There is a typo on my mutation query implementation.

What I send

mutation {
  updatePage(
    id: 1,
    data: {
      elements: [
        {
           __type: "ComponentPageProfile", // this should be __typename
           __component: "page.profile", // this is not needed
           name: "John Doe"
        }
      ]
    }
  ) {
    data {
      id
    }
  }
}

when it should be like this

mutation {
  updatePage(
    id: 1,
    data: {
      elements: [
        {
           __typename: "ComponentPageProfile", 
           name: "John Doe"
        }
      ]
    }
  ) {
    data {
      id
    }
  }
}