Make dynamic zone fragment documentation more clear

[harshSinghCondenast]

Edited by @derrickmehaffy for the docs team, we need to clean up the docs for fragmets in the entityService + REST population docs to make it a bit more clear on the differences between regular populate vs the on fragmet syntax and explain the differences.

Whenever you start working on this, reach out to me on Slack as I have some suggestions and also just so you know this user is one of our EE customers

---

Bug report

unable to fetch relation queries for collections with many relations, images, and dynamic zones

Required System information

• Node.js version: 16.15.1
• NPM version: 8.11.0
• Strapi version: 4.5.3
• Database: Postgres (12.11)
• Operating system: macOS

Describe the bug

whenever I'm trying to make the query for collections that have many sections like dynamic zones, relations, and images, The relation field is not getting populated.

I have used custom middleware generated by strapi generate.
here is the code.

import { Strapi } from '@strapi/strapi';

export default (config, { strapi }: { strapi: Strapi }) => {
  // Add your own logic here.
  return async (ctx, next) => {

    ctx.query.populate = {
      
      SliderImage: {
        fields: ['name', 'caption', 'alternativeText', 'url']
      },
      ad_audiences: {
        populate: ['type']
       },
      pageBuilder: {},
    }

    await next();
  };
};

I have also tried these queries

ad_audiences: {
  populate: { 
    type: "*"       
  }
 },

or

ad_audiences: {
  populate: ["type"]
},

but this also doesn't worked.

I tried with another example but it worked with the same queries. So really was not able to find the issue.

Steps to reproduce the behavior

1. try making a collection type with dynamic fields, images, and relations at once.
2. create a middleware for this query.
3. now try to get the query.

Expected behavior

the final JSON should load with all the images, relations, and dynamic zones.

Code snippets

custom middleware code

import { Strapi } from '@strapi/strapi';

export default (config, { strapi }: { strapi: Strapi }) => {
  // Add your own logic here.
  return async (ctx, next) => {

    ctx.query.populate = {
      ogImage: {
        fields: ['name', 'caption', 'alternativeText', 'url']
      },
      logo: {
        fields: ['name', 'caption', 'alternativeText', 'url']
      },
      twitterImage: {
        fields: ['name', 'caption', 'alternativeText', 'url']
      },
      GridImage: {
        fields: ['name', 'caption', 'alternativeText', 'url']
      },
      SliderImage: {
        fields: ['name', 'caption', 'alternativeText', 'url']
      },
      ad_audiences: {
        populate: ['type']
       },
      pageBuilder: {},
    }

    await next();
  };
};

routes.js for implementation of bug

import { factories } from '@strapi/strapi';

export default factories.createCoreRouter('api::ad-brand.ad-brand', {
    prefix: '',
    only: ['find', 'findOne', 'create', 'update', 'delete'],
    except: [],
    config: {
      find: {
        auth: false,
        policies: [],
        middlewares: ['api::ad-brand.gatsby-brand-middleare'],
      },
      findOne: {},
      create: {},
      update: {},
      delete: {},
    },
  });

schema for the brands

{
  "kind": "collectionType",
  "collectionName": "ad_brands",
  "info": {
    "singularName": "ad-brand",
    "pluralName": "ad-brands",
    "displayName": "AD Brands",
    "description": ""
  },
  "options": {
    "draftAndPublish": true
  },
  "pluginOptions": {
    "i18n": {
      "localized": true
    }
  },
  "attributes": {
    "title": {
      "pluginOptions": {
        "i18n": {
          "localized": true
        }
      },
      "type": "string"
    },
    "slug": {
      "pluginOptions": {
        "i18n": {
          "localized": true
        }
      },
      "type": "string"
    },
    "htmlTitle": {
      "pluginOptions": {
        "i18n": {
          "localized": true
        }
      },
      "type": "string"
    },
    "htmlMeta": {
      "pluginOptions": {
        "i18n": {
          "localized": true
        }
      },
      "type": "text"
    },
    "Logo": {
      "type": "media",
      "multiple": false,
      "required": false,
      "allowedTypes": [
        "images",
        "files",
        "videos",
        "audios"
      ],
      "pluginOptions": {
        "i18n": {
          "localized": true
        }
      }
    },
    "GridImage": {
      "type": "media",
      "multiple": false,
      "required": false,
      "allowedTypes": [
        "images",
        "files",
        "videos",
        "audios"
      ],
      "pluginOptions": {
        "i18n": {
          "localized": true
        }
      }
    },
    "SliderImage": {
      "type": "media",
      "multiple": false,
      "required": false,
      "allowedTypes": [
        "images",
        "files",
        "videos",
        "audios"
      ],
      "pluginOptions": {
        "i18n": {
          "localized": true
        }
      }
    },
    "Order": {
      "pluginOptions": {
        "i18n": {
          "localized": true
        }
      },
      "type": "integer"
    },
    "pageBuilder": {
      "pluginOptions": {
        "i18n": {
          "localized": true
        }
      },
      "type": "dynamiczone",
      "components": [
        "ad-block-menu.accordian",
        "ad-block-menu.audience-stats",
        "ad-block-menu.brands-grid",
        "ad-block-menu.brands-slider",
        "ad-block-menu.contact-form",
        "ad-block-menu.contact-info",
        "ad-block-menu.hero-detail",
        "ad-block-menu.hero-page",
        "ad-block-menu.hero-vedio",
        "ad-block-menu.icon-list",
        "ad-block-menu.media-kits",
        "ad-block-menu.simple-content",
        "ad-block-menu.simple-media",
        "ad-block-menu.simple-quote",
        "ad-block-menu.stat-tiles",
        "ad-block-menu.text-section",
        "ad-block-menu.tile"
      ]
    },
    "ogTitle": {
      "pluginOptions": {
        "i18n": {
          "localized": true
        }
      },
      "type": "string"
    },
    "ogDescription": {
      "pluginOptions": {
        "i18n": {
          "localized": true
        }
      },
      "type": "text"
    },
    "ogImage": {
      "type": "media",
      "multiple": false,
      "required": false,
      "allowedTypes": [
        "images",
        "files",
        "videos",
        "audios"
      ],
      "pluginOptions": {
        "i18n": {
          "localized": true
        }
      }
    },
    "twitterTitle": {
      "pluginOptions": {
        "i18n": {
          "localized": true
        }
      },
      "type": "string"
    },
    "twitterDescription": {
      "pluginOptions": {
        "i18n": {
          "localized": true
        }
      },
      "type": "text"
    },
    "twitterImage": {
      "type": "media",
      "multiple": false,
      "required": false,
      "allowedTypes": [
        "images",
        "files",
        "videos",
        "audios"
      ],
      "pluginOptions": {
        "i18n": {
          "localized": true
        }
      }
    },
    "ad_industry": {
      "type": "relation",
      "relation": "oneToOne",
      "target": "api::ad-industrie.ad-industrie",
      "mappedBy": "ad_brand"
    },
    "ad_audience": {
      "type": "relation",
      "relation": "oneToOne",
      "target": "api::ad-audience.ad-audience",
      "inversedBy": "ad_brand"
    }
  }
}

Additional context

1. only happening for collection types with dynamic zones, images and relations.
2. here is the link of the folders where the error is occuring
   https://drive.google.com/drive/folders/1EnUwkGcoXRWKqLiMoxX6cmOPizMKP36U?usp=share_link

[derrickmehaffy]

Hi @harshSinghCondenast I think I understand the issue here as it relates to a new population option we have on dynamic zones (though our documentation does not make this clear/easy to find)

For populating the dynamic zones with specific needs per component you will want to use this new on syntax with fragments: https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/entity-service/populate.html#populate-fragments

In your case the way I would build that middleware would be as such:

"use strict";

/**
 * `defaultPopulate` middleware
 */

module.exports = (config, { strapi }) => {
  // Add your own logic here.
  return async (ctx, next) => {
    if (!ctx.query.populate) {
      ctx.query.populate = {
        // Handle all the media fields
        logo: {
          fields: ["name", "caption", "alternativeText", "url"],
        },
        twitterImage: {
          fields: ["name", "caption", "alternativeText", "url"],
        },
        GridImage: {
          fields: ["name", "caption", "alternativeText", "url"],
        },
        SliderImage: {
          fields: ["name", "caption", "alternativeText", "url"],
        },

        // Handle the relations
        ad_audiences: {
          populate: ["type"],
        },

        // Handle the dynamic zone
        pageBuilder: {
          on: {
            "ad-block-menu.accordian": {
              fields: ["yourField"],
            },
            "ad-block-menu.audience-stats": {
              fields: ["someOtherField"],
            },
            "ad-block-menu.brands-slider": {
              fields: ["anotherField"],
              populate: {
                someNestedRelation: true,
              },
            },
            //etc...
          },
        },
      };
    }

    await next();
  };
};

[derrickmehaffy]

I'm going to transfer this issue over to our docs team to have them adjust the docs to be a bit more clear on how this works compared to just regular populate (we also need to mirror this into the REST population doc too.