Document GraphQL changes between 3.x and 4.x

docs/api/graphql/graphql_queries.md

@@ -15,7 +15,7 @@ To get a specific content item by its content ID, location ID, or URL alias, use
 ```
 {
   content {
-    article (contentId: 62) {
+    article(contentId: 62) {
       title
       author {
         name
@@ -52,8 +52,17 @@ The query accepts `locationId`, `remoteId`, and `urlAlias` as arguments.
 
 ```
 {
-  item (locationId: 2) {
+  item(locationId: 2) {
     _name
+    ... on FolderItem {
+        name
+    }
+    ... on LandingPageItem {
+        name
+    }
+    ... on ArticleItem {
+        title
+    }
   }
 }
 ```
@@ -181,9 +190,9 @@ To get the IDs and names of all Fields in the `article` content type:
 {
   content {
     _types {
-      article{
+      article {
         _info {
-          fieldDefinitions{
+          fieldDefinitions {
             id
             name
           }
@@ -318,8 +327,8 @@ Alternatively, you can query the `children` property of an `item` or `content` o
 
 ```
 {
-  item (locationId: 2) {
-    _location{
+  item(locationId: 2) {
+    _location {
       children {
         edges {
           node {

docs/css/custom.css

@@ -379,6 +379,10 @@ ul li li li {
     background-color: var(--table-header);
 }
 
+.md-typeset table td.compare {
+    border: 0.05rem solid var(--md-typeset-table-color)
+}
+
 .md-nav__link[data-md-state=blur] {
     color: rgb(19, 28, 38);
 }
@@ -393,6 +397,10 @@ figcaption {
     text-align: center;
 }
 
+a.external:not(.card) {
+    white-space: nowrap;
+}
+
 a.external:not(.card):after {
     content: url(../images/open-in-new.svg);
     font-style: normal;

docs/update_and_migration/from_3.3/to_4.0.md

@@ -168,6 +168,61 @@ php bin/console ibexa:migrations:migrate
 
 ## Update your custom code
 
+### GraphQL
+
+TODO: Confirm it happens between 3.3 and 4.0
+
+Some property names has changed and your GraphQL queries need to be updated.
+
+TODO: Complete the list of renamed elements
+
+| 3.3 name                     | 4.0 name                  |
+|:-----------------------------|:--------------------------|
+| `id`                         | `contentId`               |
+| `_info`                      | `_contentInfo`            |
+| `FolderContent`              | `FolderItem`              |
+| `<ContentType>Content`       | `<ContentType>Item`       |
+| `createFolderContent`        | `createFolderItem`        |
+| `create<ContentType>Content` | `create<ContentType>Item` |
+
+TODO: Example with more renamed elements
+
+Example of updated query
+
+<table>
+<thead><tr><th scope="col">3.3</th><th scope="col">4.0</th></tr></thead>
+<tbody>
+<tr><td class="compare">
+```graphql
+{
+  content {
+    folder(id: 1) {
+      _info {
+        name
+      }
+    }
+  }
+}
+```
+</td><td class="compare">
+```graphql
+{
+  content {
+    folder(contentId: 1) {
+       _contentInfo{
+        name
+      }
+    }
+  }
+}
+```
+</td></tr>
+</tbody></table>
+
+While revisiting GraphQL queries, you may consider the new feature `item`
+allowing to fetch a content item without knowing its content type.
+For more information, see [Get a content item](graphql_queries.md#get-a-content-item)
+
 ### Back office customization
 
 The v4 version of [[= product_name =]] is using Bootstrap 5 in the back office. If you were using Bootstrap 4 for styling, you need to update and adjust all custom back office components [following the migration guide from Bootstrap 4](https://getbootstrap.com/docs/5.0/migration/).