Merge pull request #20558 from strapi/fix/cm

Fix multiple CM/i18N/admin state loading issues

packages/core/content-manager/admin/src/hooks/useDocument.ts

@@ -99,7 +99,10 @@ const useDocument: UseDocument = (args, opts) => {
     isLoading: isLoadingDocument,
     isFetching: isFetchingDocument,
     error,
-  } = useGetDocumentQuery(args, opts);
+  } = useGetDocumentQuery(args, {
+    ...opts,
+    skip: (!args.documentId && args.collectionType !== SINGLE_TYPES) || opts?.skip,
+  });
 
   const { components, schema, isLoading: isLoadingSchema } = useContentTypeSchema(args.model);
 

packages/core/content-releases/admin/src/services/release.ts

@@ -21,6 +21,7 @@ import type {
   PublishRelease,
   MapEntriesToReleases,
 } from '../../../shared/contracts/releases';
+import type { EndpointDefinition } from '@reduxjs/toolkit/query';
 
 export interface GetReleasesQueryParams {
   page?: number;
@@ -45,33 +46,63 @@ type GetReleasesTabResponse = GetReleases.Response & {
   };
 };
 
+type AnyEndpointDefinition = EndpointDefinition<any, any, any, any>;
+
+// TODO: move this into the admin code & expose an improved version of enhanceEndpoints or a new function
+const extendInvalidatesTags = (
+  endpoint: AnyEndpointDefinition,
+  extraTags: string[] | { type: string; id: string }[]
+) => {
+  if (!endpoint) {
+    return;
+  }
+
+  const originalInvalidatesTags = endpoint.invalidatesTags;
+
+  const newInvalidatesTags: AnyEndpointDefinition['invalidatesTags'] = (
+    result,
+    err,
+    args,
+    meta
+  ) => {
+    const originalTags =
+      typeof originalInvalidatesTags === 'function'
+        ? originalInvalidatesTags(result, err, args, meta)
+        : originalInvalidatesTags;
+
+    return [...(originalTags ?? []), ...extraTags];
+  };
+
+  Object.assign(endpoint, { invalidatesTags: newInvalidatesTags });
+};
+
 const releaseApi = adminApi
   .enhanceEndpoints({
     addTagTypes: ['Release', 'ReleaseAction', 'EntriesInRelease'],
     endpoints: {
-      updateDocument: {
-        invalidatesTags: [
+      updateDocument(endpoint: AnyEndpointDefinition) {
+        extendInvalidatesTags(endpoint, [
           { type: 'Release', id: 'LIST' },
           { type: 'ReleaseAction', id: 'LIST' },
-        ],
+        ]);
       },
-      deleteDocument: {
-        invalidatesTags: [
+      deleteDocument(endpoint: AnyEndpointDefinition) {
+        extendInvalidatesTags(endpoint, [
           { type: 'Release', id: 'LIST' },
           { type: 'ReleaseAction', id: 'LIST' },
-        ],
+        ]);
       },
-      deleteManyDocuments: {
-        invalidatesTags: [
+      deleteManyDocuments(endpoint: AnyEndpointDefinition) {
+        extendInvalidatesTags(endpoint, [
           { type: 'Release', id: 'LIST' },
           { type: 'ReleaseAction', id: 'LIST' },
-        ],
+        ]);
       },
-      discardDocument: {
-        invalidatesTags: [
+      discardDocument(endpoint: AnyEndpointDefinition) {
+        extendInvalidatesTags(endpoint, [
           { type: 'Release', id: 'LIST' },
           { type: 'ReleaseAction', id: 'LIST' },
-        ],
+        ]);
       },
     },
   })

packages/plugins/i18n/admin/src/components/CMHeaderActions.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { skipToken } from '@reduxjs/toolkit/query';
 import {
   useNotification,
   useQueryParams,
@@ -275,16 +276,21 @@ const BulkLocalePublishAction: DocumentActionComponent = ({
     meta: documentMeta,
     schema,
     validate,
-  } = useDocument({
-    model,
-    collectionType,
-    documentId,
-    params: {
-      locale: baseLocale,
+  } = useDocument(
+    {
+      model,
+      collectionType,
+      documentId,
+      params: {
+        locale: baseLocale,
+      },
     },
-  });
+    {
+      skip: !hasI18n,
+    }
+  );
 
-  const { data: localesMetadata = [] } = useGetLocalesQuery();
+  const { data: localesMetadata = [] } = useGetLocalesQuery(hasI18n ? undefined : skipToken);
 
   const headers = [
     {

packages/plugins/i18n/admin/src/components/LocaleListCell.tsx

@@ -20,6 +20,7 @@ const LocaleListCell = ({
   collectionType,
   model,
 }: LocaleListCellProps) => {
+  // TODO: avoid loading availableLocales for each row but get that from the BE
   const { meta, isLoading } = useDocument({
     documentId,
     collectionType,

packages/plugins/i18n/admin/src/hooks/useI18n.ts

@@ -43,6 +43,7 @@ const useI18n: UseI18n = () => {
     );
   }, [params.slug, userPermissions]);
 
+  // TODO: use specific hook to get schema only
   const { schema } = useDocument(
     {
       // We can non-null assert these because below we skip the query if they are not present
@@ -50,7 +51,7 @@ const useI18n: UseI18n = () => {
       model: params.slug!,
     },
     {
-      skip: !params.slug || !params.collectionType,
+      skip: true,
     }
   );