feat: extending schema validators and on update server errors details displayed (#576)

CodeVoyager · web-flow · commit 8012de2e2e89 · 2025-07-18T11:04:34.000+02:00
* feat: extending schema validators and on update server errors details displayed

* fix: failing tests

* chore: missing tests

* chore: missing tests

* fix: post rebase fixes
diff --git a/README.md b/README.md
@@ -653,6 +653,26 @@ query {
 
 ## 🔌 Extensions
 
+### Server-side schema
+
+On bootstrap you can customise Zod validators. Not all schemas are available at the moment, consult `CommonService` to see all available updaters.
+
+Example:
+
+```ts
+const navigationCommonService = strapi.plugin('navigation').service('common');
+
+navigationCommonService.updateUpdateNavigationSchema((schema: ZodObject) => {
+  return schema.refine((data) => {
+    if (!data.visible) {
+      return false;
+    }
+
+    return true;
+  }, { message: "Hidden navigation updated." });
+});
+```
+
 ### Slug generation
 
 Slug generation is available as a controller and service. If you have custom requirements outside of what this plugin provides you can add your own logic with [plugins extensions](https://docs.strapi.io/developer-docs/latest/development/plugins-extension.html).
diff --git a/admin/src/pages/HomePage/components/NavigationManager/index.tsx b/admin/src/pages/HomePage/components/NavigationManager/index.tsx
@@ -43,7 +43,7 @@ export const NavigationManager = ({ initialState, isOpened, onClose }: Props) =>
 
   const createNavigationMutation = useCreateNavigation();
 
-  const updateNavigationMutation = useUpdateNavigation();
+  const updateNavigationMutation = useUpdateNavigation({});
 
   const purgeNavigationsMutation = usePurgeNavigation();
 
diff --git a/admin/src/pages/HomePage/hooks/index.tsx b/admin/src/pages/HomePage/hooks/index.tsx
@@ -179,7 +179,13 @@ export const useCreateNavigation = () => {
   });
 };
 
-export const useUpdateNavigation = (onSuccess?: Effect<NavigationSchema>) => {
+export const useUpdateNavigation = ({
+  onError,
+  onSuccess,
+}: {
+  onSuccess?: Effect<NavigationSchema>;
+  onError?: Effect<unknown>;
+}) => {
   const fetch = getFetchClient();
   const apiClient = getApiClient(fetch);
   // TODO: nicer cache update
@@ -194,6 +200,7 @@ export const useUpdateNavigation = (onSuccess?: Effect<NavigationSchema>) => {
 
       onSuccess?.(next);
     },
+    onError,
   });
 };
 
diff --git a/admin/src/pages/HomePage/index.tsx b/admin/src/pages/HomePage/index.tsx
@@ -8,8 +8,8 @@ import {
   Typography,
 } from '@strapi/design-system';
 import { Data } from '@strapi/strapi';
-import { Layouts, Page, useRBAC } from '@strapi/strapi/admin';
-import { QueryClient, QueryClientProvider, useQueryClient } from '@tanstack/react-query';
+import { Layouts, Page, useNotification, useRBAC } from '@strapi/strapi/admin';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { first, isEmpty } from 'lodash';
 import { SyntheticEvent, useCallback, useEffect, useMemo, useState } from 'react';
 import { useIntl } from 'react-intl';
@@ -79,6 +79,8 @@ const makeAction = <T,>({ cancel, perform, trigger }: MakeActionInput<T>) => {
 const Inner = () => {
   const { formatMessage } = useIntl();
 
+  const { toggleNotification } = useNotification();
+
   const localeQuery = useLocale();
 
   const [recentNavigation, setRecentNavigation] = useState<{ documentId?: string; id?: Data.ID }>();
@@ -268,18 +270,31 @@ const Inner = () => {
     i18nCopySourceLocale && setI18nCopyModalOpened(true);
   }, [setI18nCopyModalOpened, i18nCopySourceLocale]);
 
-  const updateNavigationMutation = useUpdateNavigation((next) => {
-    setCurrentNavigation({
-      ...next,
-      items: next.items.map(appendViewId),
-    });
+  const updateNavigationMutation = useUpdateNavigation({
+    onError: (error: any) => {
+      toggleNotification({
+        type: 'danger',
+        message: formatMessage(getTrad('notification.navigation.update.error')),
+      });
 
-    setRecentNavigation({
-      documentId: next.documentId,
-      id: next.id,
-    });
+      try {
+        console.error(error);
+        console.log(error.response.data.error);
+      } catch (e) {}
+    },
+    onSuccess: (next) => {
+      setCurrentNavigation({
+        ...next,
+        items: next.items.map(appendViewId),
+      });
+
+      setRecentNavigation({
+        documentId: next.documentId,
+        id: next.id,
+      });
 
-    setStructureChanged(false);
+      setStructureChanged(false);
+    },
   });
 
   const submit = () => {
diff --git a/admin/src/translations/ca.ts b/admin/src/translations/ca.ts
@@ -200,6 +200,9 @@ const ca = {
           published: 'publié',
         },
       },
+      update: {
+        error: "No s'ha pogut desar la navegació. Comproveu les eines de desenvolupador.",
+      },
     },
     error: {
       common: 'Erreur lors du traitement de la demande.',
diff --git a/admin/src/translations/en.ts b/admin/src/translations/en.ts
@@ -203,6 +203,9 @@ const en = {
           published: 'published',
         },
       },
+      update: {
+        error: 'Unable to save a navigation. Check developer tools.',
+      },
     },
     error: {
       common: 'Error while processing request.',
diff --git a/admin/src/translations/es.ts b/admin/src/translations/es.ts
@@ -204,6 +204,9 @@ const en = {
           published: 'publicado',
         },
       },
+      update: {
+        error: 'No se ha podido guardar la navegación. Revisa las herramientas de desarrollador.',
+      },
     },
     error: {
       common: 'Error al procesar la solicitud.',
diff --git a/admin/src/translations/fr.ts b/admin/src/translations/fr.ts
@@ -204,6 +204,9 @@ const fr = {
           published: 'publié',
         },
       },
+      update: {
+        error: 'Impossible d\'enregistrer la navigation. Vérifiez les outils de développement.',
+      },
     },
     error: {
       common: 'Erreur lors du traitement de la demande.',
diff --git a/admin/src/translations/tr.ts b/admin/src/translations/tr.ts
@@ -203,6 +203,9 @@ const tr = {
           published: 'yayınlandı',
         },
       },
+      update: {
+        error: 'Navigasyon kaydedilemedi. Geliştirici araçlarını kontrol edin.',
+      },
     },
     error: {
       common: 'İstek işlenirken hata oluştu.',
diff --git a/server/src/config/setup.ts b/server/src/config/setup.ts
@@ -1,11 +1,13 @@
 import { Core } from '@strapi/strapi';
 
+import { isEmpty } from 'lodash';
 import configBase from '.';
 import {
+  ConfigSchema,
   NavigationItemAdditionalField,
   NavigationPluginConfigDBSchema,
   PluginConfigKeys,
-  configSchema,
+  DynamicSchemas,
 } from '../schemas';
 import {
   PluginConfigGraphQL,
@@ -14,7 +16,6 @@ import {
   PluginConfigPopulate,
 } from '../types';
 import { assertNotEmpty, resolveGlobalLikeId, validateAdditionalFields } from '../utils';
-import { isEmpty } from 'lodash';
 
 type PluginDefaultConfigGetter = (
   key: PluginConfigKeys
@@ -41,7 +42,7 @@ export const configSetup = async ({
         })) ?? configBase.default),
       };
 
-  let config = isEmpty(configRaw) ? configRaw : configSchema.parse(configRaw);
+  let config = isEmpty(configRaw) ? configRaw : DynamicSchemas.configSchema.parse(configRaw) as unknown as ConfigSchema;
 
   const getWithFallback = getWithFallbackFactory(config, getFromPluginDefaults);
 
diff --git a/server/src/controllers/admin.ts b/server/src/controllers/admin.ts
@@ -1,7 +1,7 @@
 import { Core } from '@strapi/strapi';
 import { Context as KoaContext } from 'koa';
 import * as z from 'zod';
-import { configSchema, createNavigationSchema, updateNavigationSchema } from '../schemas';
+import { DynamicSchemas } from '../schemas';
 import { getPluginService } from '../utils';
 import { fillFromOtherLocaleParams, idSchema } from './validators';
 
@@ -25,29 +25,53 @@ export default function adminController(context: { strapi: Core.Strapi }) {
       return await this.getAdminService().get({});
     },
 
-    post(ctx: KoaContext & KoaContextExtension) {
+    async post(ctx: KoaContext & KoaContextExtension) {
       const { auditLog } = ctx;
 
-      return this.getAdminService().post({
-        payload: createNavigationSchema.parse(ctx.request.body),
-        auditLog,
-      });
-    },
-
-    put(ctx: KoaContext & KoaContextExtension) {
+      try {
+        return await this.getAdminService().post({
+          payload: DynamicSchemas.createNavigationSchema.parse(ctx.request.body),
+          auditLog,
+        });
+      } catch (error) {
+        const originalError =
+          error instanceof Error
+            ? {
+                name: error.name,
+                message: error.message,
+              }
+            : {};
+
+        return ctx.internalServerError('Unable to create', { originalError });
+      }
+    },
+
+    async put(ctx: KoaContext & KoaContextExtension) {
       const {
         params: { documentId },
         auditLog,
       } = ctx;
       const body = z.record(z.string(), z.unknown()).parse(ctx.request.body);
 
-      return this.getAdminService().put({
-        auditLog,
-        payload: updateNavigationSchema.parse({
-          ...body,
-          documentId,
-        }),
-      });
+      try {
+        return await this.getAdminService().put({
+          auditLog,
+          payload: DynamicSchemas.updateNavigationSchema.parse({
+            ...body,
+            documentId,
+          }),
+        });
+      } catch (error) {
+        const originalError =
+          error instanceof Error
+            ? {
+                name: error.name,
+                message: error.message,
+              }
+            : {};
+
+        return ctx.internalServerError('Unable to update', { originalError });
+      }
     },
 
     async delete(ctx: KoaContext) {
@@ -70,7 +94,7 @@ export default function adminController(context: { strapi: Core.Strapi }) {
 
     async updateConfig(ctx: KoaContext & KoaContextExtension) {
       await this.getAdminService().updateConfig({
-        config: configSchema.parse(ctx.request.body),
+        config: DynamicSchemas.configSchema.parse(ctx.request.body),
       });
 
       return {};
diff --git a/server/src/graphql/config.ts b/server/src/graphql/config.ts
@@ -1,10 +1,10 @@
 import { Core } from '@strapi/strapi';
 
-import { configSchema } from '../schemas';
+import { DynamicSchemas } from '../schemas';
 import { getPluginService } from '../utils';
-import { getTypes } from './types';
 import { getQueries } from './queries';
 import { getResolversConfig } from './resolvers-config';
+import { getTypes } from './types';
 
 export default async ({ strapi }: { strapi: Core.Strapi }) => {
   const extensionService = strapi.plugin('graphql').service('extension');
@@ -16,7 +16,7 @@ export default async ({ strapi }: { strapi: Core.Strapi }) => {
 
   const commonService = getPluginService({ strapi }, 'common');
   const pluginStore = await commonService.getPluginStore();
-  const config = configSchema.parse(await pluginStore.get({ key: 'config' }));
+  const config = DynamicSchemas.configSchema.parse(await pluginStore.get({ key: 'config' }));
 
   extensionService.use(({ strapi, nexus }: any) => {
     const types = getTypes({ strapi, nexus, config });
diff --git a/server/src/graphql/types/content-types-name-fields.ts b/server/src/graphql/types/content-types-name-fields.ts
@@ -1,4 +1,4 @@
-import { configSchema } from '../../schemas';
+import { DynamicSchemas } from '../../schemas';
 import { getPluginService } from '../../utils';
 
 export default ({ nexus, strapi }: any) =>
@@ -9,7 +9,7 @@ export default ({ nexus, strapi }: any) =>
 
       const commonService = getPluginService({ strapi }, 'common');
       const pluginStore = await commonService.getPluginStore();
-      const config = configSchema.parse(await pluginStore.get({ key: 'config' }));
+      const config = DynamicSchemas.configSchema.parse(await pluginStore.get({ key: 'config' }));
       const contentTypesNameFields = config.contentTypesNameFields;
 
       Object.keys(contentTypesNameFields || {}).forEach((key) => t.nonNull.list.string(key));
diff --git a/server/src/index.ts b/server/src/index.ts
@@ -16,6 +16,8 @@ import policies from './policies';
 import routes from './routes';
 import services from './services';
 
+export type { AdminService, ClientService, CommonService, MigrationService } from './services';
+
 export default {
   bootstrap,
   destroy,
diff --git a/server/src/repositories/navigation.ts b/server/src/repositories/navigation.ts
@@ -4,9 +4,9 @@ import { omit, once } from 'lodash';
 import { NavigationError } from '../app-errors';
 import {
   CreateNavigationSchema,
+  navigationDBSchema,
   NavigationDBSchema,
   UpdateNavigationSchema,
-  navigationDBSchema,
 } from '../schemas';
 import { getPluginModels } from '../utils';
 import { flattenRelated, removeSensitiveFields } from './navigation-item';
diff --git a/server/src/schemas/index.ts b/server/src/schemas/index.ts
diff --git a/server/src/services/admin/admin.ts b/server/src/services/admin/admin.ts
diff --git a/server/src/services/admin/utils.ts b/server/src/services/admin/utils.ts
diff --git a/server/src/services/common/common.ts b/server/src/services/common/common.ts
diff --git a/server/src/utils/functions.ts b/server/src/utils/functions.ts
diff --git a/server/tests/controllers/admin.test.ts b/server/tests/controllers/admin.test.ts
diff --git a/server/tests/schemas/index.test.ts b/server/tests/schemas/index.test.ts
