Merge pull request #83 from strapi/feat/72-middleware-populate

feat: Route Middleware to Populate Data

Author: fonodi

README.md

@@ -104,7 +104,7 @@ This installs dependencies, builds your project, and starts your server. You’r
 
 ## Customization
 
-- The Strapi application contains a custom population middleware in order to populate more data than what it is set by default. You can find it in the `./strapi/src/middlewares/deepPopulate.ts` file.
+- The Strapi application contains a custom population middlewares in every api route.
 
 - The Strapi application contains a postinstall script that will regenerate an uuid for the project in order to get some anonymous usage information concerning this demo. You can disable it by removing the uuid inside the `./strapi/packages.json` file.
 

next/components/products/featured.tsx

@@ -12,6 +12,8 @@ export const Featured = ({
   products: Product[];
   locale: string;
 }) => {
+  const [firstProduct, secondProduct, thirdProduct] = products;
+
   return (
     <div className="py-20">
       <h2 className="text-2xl md:text-4xl font-medium bg-clip-text text-transparent bg-gradient-to-b from-neutral-800 via-white to-white mb-2">
@@ -22,11 +24,17 @@ export const Featured = ({
       </p>
       <div className="grid grid-cols-1 md:grid-cols-3  gap-10">
         <div className="md:col-span-2">
-          <FeaturedItem product={products[0]} locale={locale} />
+          {firstProduct ? (
+            <FeaturedItem product={firstProduct} locale={locale} />
+          ) : null}
         </div>
         <div className="grid gap-10">
-          <FeaturedItem product={products[1]} locale={locale} />
-          <FeaturedItem product={products[2]} locale={locale} />
+          {secondProduct ? (
+            <FeaturedItem product={secondProduct} locale={locale} />
+          ) : null}
+          {thirdProduct ? (
+            <FeaturedItem product={thirdProduct} locale={locale} />
+          ) : null}
         </div>
       </div>
       <div className="grid grid-cols-1 md:grid-cols-3 gap-10"></div>

strapi/config/middlewares.ts

@@ -9,5 +9,4 @@ export default [
   'strapi::session',
   'strapi::favicon',
   'strapi::public',
-  'global::deepPopulate',
 ];

strapi/src/api/article/middlewares/article-populate.ts

@@ -0,0 +1,57 @@
+/**
+ * `article-populate` middleware
+ */
+import type { Core } from '@strapi/strapi';
+
+const populate = {
+  image: true,
+  categories: {
+    populate: {
+      product: true,
+      articles: {
+        populate: {
+          dynamic_zone: {
+            on: {
+              'dynamic-zone.related-articles': true,
+              'dynamic-zone.cta': {
+                populate: {
+                  CTAs: true,
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+  dynamic_zone: {
+    on: {
+      'dynamic-zone.related-articles': {
+        populate: {
+          articles: {
+            populate: {
+              image: true,
+            },
+          },
+        },
+      },
+      'dynamic-zone.cta': {
+        populate: {
+          CTAs: true,
+        },
+      },
+    },
+  },
+  seo: {
+    populate: {
+      metaImage: true,
+    },
+  },
+};
+
+export default (config, { strapi }: { strapi: Core.Strapi }) => {
+  return async (ctx, next) => {
+    ctx.query.populate = populate;
+    await next();
+  };
+};

strapi/src/api/article/routes/article.ts

@@ -3,4 +3,13 @@
  */
 import { factories } from '@strapi/strapi';
 
-export default factories.createCoreRouter('api::article.article');
+export default factories.createCoreRouter('api::article.article', {
+  config: {
+    find: {
+      middlewares: ['api::article.article-populate'],
+    },
+    findOne: {
+      middlewares: ['api::article.article-populate'],
+    },
+  },
+});

strapi/src/api/blog-page/middlewares/blog-page-populate.ts

@@ -0,0 +1,133 @@
+/**
+ * `blog-page-populate` middleware
+ */
+import type { Core } from '@strapi/strapi';
+
+const populate = {
+  dynamic_zone: {
+    on: {
+      'dynamic-zone.hero': {
+        populate: {
+          CTAs: true,
+        },
+      },
+      'dynamic-zone.features': {
+        populate: {
+          globe_card: true,
+          ray_card: {
+            populate: {
+              before_ray_items: true,
+              after_ray_items: true,
+            },
+          },
+          graph_card: {
+            populate: {
+              top_items: true,
+            },
+          },
+          social_media_card: {
+            populate: {
+              logos: {
+                populate: {
+                  image: true,
+                },
+              },
+            },
+          },
+        },
+      },
+      'dynamic-zone.testimonials': {
+        populate: {
+          testimonials: {
+            populate: {
+              user: {
+                populate: {
+                  image: true,
+                },
+              },
+            },
+          },
+        },
+      },
+      'dynamic-zone.how-it-works': {
+        populate: {
+          steps: true,
+        },
+      },
+      'dynamic-zone.brands': {
+        populate: {
+          logos: {
+            populate: {
+              image: true,
+            },
+          },
+        },
+      },
+      'dynamic-zone.pricing': {
+        populate: {
+          plans: {
+            populate: {
+              perks: true,
+              additional_perks: true,
+              CTA: true,
+              product: true,
+            },
+          },
+        },
+      },
+      'dynamic-zone.launches': {
+        populate: {
+          launches: true,
+        },
+      },
+      'dynamic-zone.cta': {
+        populate: {
+          CTAs: true,
+        },
+      },
+      'dynamic-zone.faq': {
+        populate: {
+          faqs: true,
+        },
+      },
+      'dynamic-zone.form-next-to-section': {
+        populate: {
+          form: {
+            populate: {
+              inputs: true,
+            },
+          },
+          section: {
+            populate: {
+              users: {
+                populate: {
+                  image: true,
+                },
+              },
+            },
+          },
+          social_media_icon_links: {
+            populate: {
+              image: true,
+              link: true,
+            },
+          },
+        },
+      },
+      'dynamic-zone.related-articles': true,
+      'dynamic-zone.related-products': true,
+    },
+  },
+  seo: {
+    populate: {
+      metaImage: true,
+    },
+  },
+};
+
+export default (config, { strapi }: { strapi: Core.Strapi }) => {
+  return async (ctx, next) => {
+    ctx.query.populate = populate;
+    await next();
+  };
+};

strapi/src/api/blog-page/routes/blog-page.ts

@@ -3,4 +3,10 @@
  */
 import { factories } from '@strapi/strapi';
 
-export default factories.createCoreRouter('api::blog-page.blog-page');
+export default factories.createCoreRouter('api::blog-page.blog-page', {
+  config: {
+    find: {
+      middlewares: ['api::blog-page.blog-page-populate'],
+    },
+  },
+});

strapi/src/api/global/middlewares/global-populate.ts

@@ -0,0 +1,42 @@
+/**
+ * `global-populate` middleware
+ */
+import type { Core } from '@strapi/strapi';
+
+const populate = {
+  navbar: {
+    populate: {
+      left_navbar_items: true,
+      right_navbar_items: true,
+      logo: {
+        populate: {
+          image: true,
+        },
+      },
+    },
+  },
+  footer: {
+    populate: {
+      internal_links: true,
+      policy_links: true,
+      social_media_links: true,
+      logo: {
+        populate: {
+          image: true,
+        },
+      },
+    },
+  },
+  seo: {
+    populate: {
+      metaImage: true,
+    },
+  },
+};
+
+export default (config, { strapi }: { strapi: Core.Strapi }) => {
+  return async (ctx, next) => {
+    ctx.query.populate = populate;
+    await next();
+  };
+};

strapi/src/api/global/routes/global.ts

@@ -3,4 +3,10 @@
  */
 import { factories } from '@strapi/strapi';
 
-export default factories.createCoreRouter('api::global.global');
+export default factories.createCoreRouter('api::global.global', {
+  config: {
+    find: {
+      middlewares: ['api::global.global-populate'],
+    },
+  },
+});