@strapi/admin 4.6.0 → 4.7.0-beta.0

package/.browserslistrc

@@ -1,3 +1,4 @@
 last 3 major versions
 Firefox ESR
-last 2 Opera versions
+last 2 Opera versions
+not dead

package/admin/src/components/AuthenticatedApp/utils/api.js

@@ -1,10 +1,11 @@
 import axios from 'axios';
+import { getFetchClient } from '@strapi/helper-plugin';
 import checkLatestStrapiVersion from './checkLatestStrapiVersion';
-import { axiosInstance } from '../../../core/utils';
 import packageJSON from '../../../../../package.json';
 
 const strapiVersion = packageJSON.version;
 const showUpdateNotif = !JSON.parse(localStorage.getItem('STRAPI_UPDATE_NOTIF'));
+const { get } = getFetchClient();
 
 const fetchStrapiLatestRelease = async (toggleNotification) => {
   try {
@@ -38,7 +39,7 @@ const fetchStrapiLatestRelease = async (toggleNotification) => {
 
 const fetchAppInfo = async () => {
   try {
-    const { data, headers } = await axiosInstance.get('/admin/information');
+    const { data, headers } = await get('/admin/information');
 
     if (!headers['content-type'].includes('application/json')) {
       throw new Error('Not found');
@@ -52,7 +53,7 @@ const fetchAppInfo = async () => {
 
 const fetchCurrentUserPermissions = async () => {
   try {
-    const { data, headers } = await axiosInstance.get('/admin/users/me/permissions');
+    const { data, headers } = await get('/admin/users/me/permissions');
 
     if (!headers['content-type'].includes('application/json')) {
       throw new Error('Not found');
@@ -70,7 +71,7 @@ const fetchUserRoles = async () => {
       data: {
         data: { roles },
       },
-    } = await axiosInstance.get('/admin/users/me');
+    } = await get('/admin/users/me');
 
     return roles;
   } catch (err) {

package/admin/src/components/LeftMenu/index.js

@@ -20,9 +20,14 @@ import { Typography } from '@strapi/design-system/Typography';
 import { Stack } from '@strapi/design-system/Stack';
 import Write from '@strapi/icons/Write';
 import Exit from '@strapi/icons/Exit';
-import { auth, usePersistentState, useAppInfos, useTracking } from '@strapi/helper-plugin';
+import {
+  auth,
+  usePersistentState,
+  useAppInfos,
+  useTracking,
+  getFetchClient,
+} from '@strapi/helper-plugin';
 import { useConfigurations } from '../../hooks';
-import { axiosInstance } from '../../core/utils';
 
 const LinkUserWrapper = styled(Box)`
   width: ${150 / 16}rem;
@@ -64,6 +69,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
   const { trackUsage } = useTracking();
   const { pathname } = useLocation();
   const history = useHistory();
+  const { post } = getFetchClient();
 
   const initials = userDisplayName
     .split(' ')
@@ -74,7 +80,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
   const handleToggleUserLinks = () => setUserLinksVisible((prev) => !prev);
 
   const handleLogout = async () => {
-    await axiosInstance.post('/admin/logout');
+    await post('/admin/logout');
     auth.clearAppStorage();
     handleToggleUserLinks();
     history.push('/auth/login');

package/admin/src/content-manager/components/CollectionTypeFormWrapper/index.js

@@ -10,11 +10,11 @@ import {
   formatContentTypeData,
   contentManagementUtilRemoveFieldsFromData,
   useGuidedTour,
+  useFetchClient,
 } from '@strapi/helper-plugin';
 import { useSelector, useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 import isEqual from 'react-fast-compare';
-import { axiosInstance } from '../../../core/utils';
 import {
   createDefaultForm,
   getTrad,
@@ -51,6 +51,9 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
 
   const allLayoutDataRef = useRef(allLayoutData);
 
+  const fetchClient = useFetchClient();
+  const { put, post, del } = fetchClient;
+
   const isCreatingEntry = id === null;
 
   const requestURL = useMemo(() => {
@@ -137,7 +140,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
       dispatch(getData());
 
       try {
-        const { data } = await axiosInstance.get(requestURL, { cancelToken: source.token });
+        const { data } = await fetchClient.get(requestURL, { cancelToken: source.token });
 
         dispatch(getDataSucceeded(cleanReceivedData(cleanClonedData(data))));
       } catch (err) {
@@ -187,6 +190,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
       source.cancel('Operation canceled by the user.');
     };
   }, [
+    fetchClient,
     cleanClonedData,
     cleanReceivedData,
     push,
@@ -219,9 +223,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
       try {
         trackUsageRef.current('willDeleteEntry', trackerProperty);
 
-        const { data } = await axiosInstance.delete(
-          getRequestUrl(`collection-types/${slug}/${id}`)
-        );
+        const { data } = await del(getRequestUrl(`collection-types/${slug}/${id}`));
 
         toggleNotification({
           type: 'success',
@@ -237,7 +239,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
         return Promise.reject(err);
       }
     },
-    [id, slug, toggleNotification]
+    [id, slug, toggleNotification, del]
   );
 
   const onDeleteSucceeded = useCallback(() => {
@@ -247,12 +249,11 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
   const onPost = useCallback(
     async (body, trackerProperty) => {
       const endPoint = `${getRequestUrl(`collection-types/${slug}`)}${rawQuery}`;
-
       try {
         // Show a loading button in the EditView/Header.js && lock the app => no navigation
         dispatch(setStatus('submit-pending'));
 
-        const { data } = await axiosInstance.post(endPoint, body);
+        const { data } = await post(endPoint, body);
 
         trackUsageRef.current('didCreateEntry', trackerProperty);
         toggleNotification({
@@ -291,6 +292,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
       toggleNotification,
       setCurrentStep,
       queryClient,
+      post,
     ]
   );
 
@@ -303,7 +305,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
       );
       dispatch(setStatus('draft-relation-check-pending'));
 
-      const numberOfDraftRelations = await axiosInstance.get(endPoint);
+      const numberOfDraftRelations = await fetchClient.get(endPoint);
       trackUsageRef.current('didCheckDraftRelations');
 
       dispatch(setStatus('resolved'));
@@ -315,7 +317,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
 
       return Promise.reject(err);
     }
-  }, [displayErrors, id, slug, dispatch]);
+  }, [displayErrors, id, slug, dispatch, fetchClient]);
 
   const onPublish = useCallback(async () => {
     try {
@@ -324,7 +326,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
 
       dispatch(setStatus('publish-pending'));
 
-      const { data } = await axiosInstance.post(endPoint);
+      const { data } = await post(endPoint);
 
       trackUsageRef.current('didPublishEntry');
 
@@ -343,7 +345,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
 
       return Promise.reject(err);
     }
-  }, [cleanReceivedData, displayErrors, id, slug, dispatch, toggleNotification]);
+  }, [cleanReceivedData, displayErrors, id, slug, dispatch, toggleNotification, post]);
 
   const onPut = useCallback(
     async (body, trackerProperty) => {
@@ -354,7 +356,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
 
         dispatch(setStatus('submit-pending'));
 
-        const { data } = await axiosInstance.put(endPoint, body);
+        const { data } = await put(endPoint, body);
 
         trackUsageRef.current('didEditEntry', { trackerProperty });
         toggleNotification({
@@ -379,7 +381,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
         return Promise.reject(err);
       }
     },
-    [cleanReceivedData, displayErrors, slug, id, dispatch, toggleNotification, queryClient]
+    [cleanReceivedData, displayErrors, slug, id, dispatch, toggleNotification, queryClient, put]
   );
 
   const onUnpublish = useCallback(async () => {
@@ -390,7 +392,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
     try {
       trackUsageRef.current('willUnpublishEntry');
 
-      const { data } = await axiosInstance.post(endPoint);
+      const { data } = await post(endPoint);
 
       trackUsageRef.current('didUnpublishEntry');
       toggleNotification({
@@ -408,7 +410,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
 
       return Promise.reject(err);
     }
-  }, [cleanReceivedData, displayErrors, id, slug, dispatch, toggleNotification]);
+  }, [cleanReceivedData, displayErrors, id, slug, dispatch, toggleNotification, post]);
 
   return children({
     componentsDataStructure,

package/admin/src/content-manager/components/DynamicTable/CellContent/RelationMultiple/index.js

@@ -10,19 +10,18 @@ import { SimpleMenu, MenuItem } from '@strapi/design-system/SimpleMenu';
 import { Loader } from '@strapi/design-system/Loader';
 import styled from 'styled-components';
 import { useNotifyAT } from '@strapi/design-system/LiveRegions';
-import { stopPropagation } from '@strapi/helper-plugin';
+import { stopPropagation, useFetchClient } from '@strapi/helper-plugin';
 import CellValue from '../CellValue';
-import { axiosInstance } from '../../../../../core/utils';
 import { getRequestUrl, getTrad } from '../../../../utils';
 
 const TypographyMaxWidth = styled(Typography)`
   max-width: 500px;
 `;
 
-const fetchRelation = async (endPoint, notifyStatus) => {
+const fetchRelation = async (endPoint, notifyStatus, get) => {
   const {
     data: { results, pagination },
-  } = await axiosInstance.get(endPoint);
+  } = await get(endPoint);
 
   notifyStatus();
 
@@ -37,6 +36,7 @@ const RelationMultiple = ({ fieldSchema, metadatas, name, entityId, value, conte
     [entityId, name, contentType]
   );
   const [isOpen, setIsOpen] = useState(false);
+  const { get } = useFetchClient();
 
   const Label = (
     <Flex gap={1} wrap="nowrap">
@@ -61,7 +61,7 @@ const RelationMultiple = ({ fieldSchema, metadatas, name, entityId, value, conte
 
   const { data, status } = useQuery(
     [fieldSchema.targetModel, entityId],
-    () => fetchRelation(relationFetchEndpoint, notify),
+    () => fetchRelation(relationFetchEndpoint, notify, get),
     {
       enabled: isOpen,
       staleTime: 0,

package/admin/src/content-manager/components/EditViewDataManagerProvider/utils/findLeafByPathAndReplace.js

@@ -21,11 +21,9 @@ export const findLeafByPathAndReplace = (endpath, replaceWith) => {
 
     /**
      * If this is the last item in the array of paths
-     * and the current path is not undefined in the accumulator
      * then we assume it's a leaf and we can replace it.
      */
-
-    if (ind === currentArr.length - 1 && endpath === curr && acc[curr] !== undefined) {
+    if (ind === currentArr.length - 1 && endpath === curr) {
       set(acc, curr, replaceWith);
 
       return acc;

package/admin/src/content-manager/components/EditViewDataManagerProvider/utils/schema.js

@@ -216,10 +216,6 @@ const createYupSchemaAttribute = (type, validations, options) => {
     schema = yup
       .mixed(errorsTrads.json)
       .test('isJSON', errorsTrads.json, (value) => {
-        if (value === undefined) {
-          return true;
-        }
-
         try {
           JSON.parse(value);
 
@@ -228,7 +224,12 @@ const createYupSchemaAttribute = (type, validations, options) => {
           return false;
         }
       })
-      .nullable();
+      .nullable()
+      .test('required', errorsTrads.required, (value) => {
+        if (validations.required && !value.length) return false;
+
+        return true;
+      });
   }
 
   if (type === 'email') {

package/admin/src/content-manager/components/InputUID/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { useCMEditViewDataManager } from '@strapi/helper-plugin';
+import { useCMEditViewDataManager, useFetchClient } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 import get from 'lodash/get';
 import { TextInput } from '@strapi/design-system/TextInput';
@@ -9,7 +9,6 @@ import Refresh from '@strapi/icons/Refresh';
 import CheckCircle from '@strapi/icons/CheckCircle';
 import ExclamationMarkCircle from '@strapi/icons/ExclamationMarkCircle';
 import Loader from '@strapi/icons/Loader';
-import { axiosInstance } from '../../../core/utils';
 import { getRequestUrl } from '../../utils';
 import useDebounce from './useDebounce';
 import UID_REGEX from './regex';
@@ -46,6 +45,7 @@ const InputUID = ({
   const debouncedTargetFieldValue = useDebounce(modifiedData[attribute.targetField], 300);
   const [isCustomized, setIsCustomized] = useState(false);
   const [regenerateLabel, setRegenerateLabel] = useState(null);
+  const { post } = useFetchClient();
 
   const label = intlLabel.id
     ? formatMessage(
@@ -67,7 +67,7 @@ const InputUID = ({
     try {
       const {
         data: { data },
-      } = await axiosInstance.post(requestURL, {
+      } = await post(requestURL, {
         contentTypeUID,
         field: name,
         data: modifiedData,
@@ -89,7 +89,7 @@ const InputUID = ({
     }
 
     try {
-      const { data } = await axiosInstance.post(requestURL, {
+      const { data } = await post(requestURL, {
         contentTypeUID,
         field: name,
         value: value ? value.trim() : '',

package/admin/src/content-manager/components/Inputs/index.js

@@ -9,7 +9,6 @@ import { GenericInput, NotAllowedInput, useLibrary } from '@strapi/helper-plugin
 import { useContentTypeLayout } from '../../hooks';
 import { getFieldName } from '../../utils';
 import Wysiwyg from '../Wysiwyg';
-import InputJSON from '../InputJSON';
 import InputUID from '../InputUID';
 import { RelationInputDataManager } from '../RelationInputDataManager';
 
@@ -250,7 +249,6 @@ function Inputs({
   }
 
   const customInputs = {
-    json: InputJSON,
     uid: InputUID,
     media: fields.media,
     wysiwyg: Wysiwyg,

package/admin/src/content-manager/components/SingleTypeFormWrapper/index.js

@@ -8,11 +8,11 @@ import {
   useQueryParams,
   useNotification,
   useGuidedTour,
+  useFetchClient,
 } from '@strapi/helper-plugin';
 import { useSelector, useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 import axios from 'axios';
-import { axiosInstance } from '../../../core/utils';
 import { createDefaultForm, getTrad, removePasswordFieldsFromData } from '../../utils';
 import {
   getData,
@@ -39,6 +39,8 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
   const searchToSend = buildQueryString(query);
   const toggleNotification = useNotification();
   const dispatch = useDispatch();
+  const fetchClient = useFetchClient();
+  const { post, put, del } = fetchClient;
 
   const { componentsDataStructure, contentTypeDataStructure, data, isLoading, status } =
     useSelector(selectCrudReducer);
@@ -103,7 +105,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
       setIsCreatingEntry(true);
 
       try {
-        const { data } = await axiosInstance.get(getRequestUrl(`${slug}${searchToSend}`), {
+        const { data } = await fetchClient.get(getRequestUrl(`${slug}${searchToSend}`), {
           cancelToken: source.token,
         });
 
@@ -136,7 +138,16 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
     fetchData(source);
 
     return () => source.cancel('Operation canceled by the user.');
-  }, [cleanReceivedData, push, slug, dispatch, searchToSend, rawQuery, toggleNotification]);
+  }, [
+    fetchClient,
+    cleanReceivedData,
+    push,
+    slug,
+    dispatch,
+    searchToSend,
+    rawQuery,
+    toggleNotification,
+  ]);
 
   const displayErrors = useCallback(
     (err) => {
@@ -160,7 +171,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
       try {
         trackUsageRef.current('willDeleteEntry', trackerProperty);
 
-        const { data } = await axiosInstance.delete(getRequestUrl(`${slug}${searchToSend}`));
+        const { data } = await del(getRequestUrl(`${slug}${searchToSend}`));
 
         toggleNotification({
           type: 'success',
@@ -178,7 +189,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
         return Promise.reject(err);
       }
     },
-    [slug, displayErrors, toggleNotification, searchToSend]
+    [del, slug, displayErrors, toggleNotification, searchToSend]
   );
 
   const onDeleteSucceeded = useCallback(() => {
@@ -194,7 +205,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
       try {
         dispatch(setStatus('submit-pending'));
 
-        const { data } = await axiosInstance.put(endPoint, body);
+        const { data } = await put(endPoint, body);
 
         trackUsageRef.current('didCreateEntry', trackerProperty);
         toggleNotification({
@@ -224,6 +235,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
       }
     },
     [
+      put,
       cleanReceivedData,
       displayErrors,
       slug,
@@ -242,7 +254,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
       const endPoint = getRequestUrl(`${slug}/actions/numberOfDraftRelations`);
       dispatch(setStatus('draft-relation-check-pending'));
 
-      const numberOfDraftRelations = await axiosInstance.get(endPoint);
+      const numberOfDraftRelations = await fetchClient.get(endPoint);
       trackUsageRef.current('didCheckDraftRelations');
 
       dispatch(setStatus('resolved'));
@@ -254,7 +266,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
 
       return Promise.reject(err);
     }
-  }, [displayErrors, slug, dispatch]);
+  }, [fetchClient, displayErrors, slug, dispatch]);
 
   const onPublish = useCallback(async () => {
     try {
@@ -263,7 +275,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
 
       dispatch(setStatus('publish-pending'));
 
-      const { data } = await axiosInstance.post(endPoint);
+      const { data } = await post(endPoint);
 
       trackUsageRef.current('didPublishEntry');
       toggleNotification({
@@ -283,7 +295,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
 
       return Promise.reject(err);
     }
-  }, [cleanReceivedData, displayErrors, slug, searchToSend, dispatch, toggleNotification]);
+  }, [post, cleanReceivedData, displayErrors, slug, searchToSend, dispatch, toggleNotification]);
 
   const onPut = useCallback(
     async (body, trackerProperty) => {
@@ -294,7 +306,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
 
         dispatch(setStatus('submit-pending'));
 
-        const { data } = await axiosInstance.put(endPoint, body);
+        const { data } = await put(endPoint, body);
 
         toggleNotification({
           type: 'success',
@@ -321,7 +333,16 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
         return Promise.reject(err);
       }
     },
-    [cleanReceivedData, displayErrors, slug, dispatch, rawQuery, toggleNotification, queryClient]
+    [
+      put,
+      cleanReceivedData,
+      displayErrors,
+      slug,
+      dispatch,
+      rawQuery,
+      toggleNotification,
+      queryClient,
+    ]
   );
 
   // The publish and unpublish method could be refactored but let's leave the duplication for now
@@ -333,7 +354,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
     try {
       trackUsageRef.current('willUnpublishEntry');
 
-      const { data } = await axiosInstance.post(endPoint);
+      const { data } = await post(endPoint);
 
       trackUsageRef.current('didUnpublishEntry');
       toggleNotification({
@@ -348,7 +369,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
       dispatch(setStatus('resolved'));
       displayErrors(err);
     }
-  }, [cleanReceivedData, toggleNotification, displayErrors, slug, dispatch, searchToSend]);
+  }, [post, cleanReceivedData, toggleNotification, displayErrors, slug, dispatch, searchToSend]);
 
   return children({
     componentsDataStructure,

package/admin/src/content-manager/hooks/useFetchContentTypeLayout/index.js

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useReducer, useRef } from 'react';
 import { useSelector, shallowEqual } from 'react-redux';
 import axios from 'axios';
-import { axiosInstance } from '../../../core/utils';
+import { useFetchClient } from '@strapi/helper-plugin';
 import formatLayouts from './utils/formatLayouts';
 import reducer, { initialState } from './reducer';
 import { makeSelectModelAndComponentSchemas } from '../../pages/App/selectors';
@@ -12,6 +12,7 @@ const useFetchContentTypeLayout = (contentTypeUID) => {
   const schemasSelector = useMemo(makeSelectModelAndComponentSchemas, []);
   const { schemas } = useSelector((state) => schemasSelector(state), shallowEqual);
   const isMounted = useRef(true);
+  const { get } = useFetchClient();
 
   const getData = useCallback(
     async (uid, source) => {
@@ -27,7 +28,7 @@ const useFetchContentTypeLayout = (contentTypeUID) => {
 
         const {
           data: { data },
-        } = await axiosInstance.get(endPoint, { cancelToken: source.token });
+        } = await get(endPoint, { cancelToken: source.token });
 
         dispatch({
           type: 'GET_DATA_SUCCEEDED',
@@ -47,7 +48,7 @@ const useFetchContentTypeLayout = (contentTypeUID) => {
         }
       }
     },
-    [layouts, schemas]
+    [layouts, schemas, get]
   );
 
   useEffect(() => {

package/admin/src/content-manager/hooks/useLazyComponents/index.js

@@ -11,13 +11,12 @@ const componentStore = new Map();
  */
 const useLazyComponents = (componentUids = []) => {
   const [lazyComponentStore, setLazyComponentStore] = useState(Object.fromEntries(componentStore));
-  const [loading, setLoading] = useState(() => {
-    if (componentStore.size === 0 && componentUids.length > 0) {
-      return true;
-    }
-
-    return false;
-  });
+  /**
+   * Start loading only if there are any components passed in
+   * and there are some new to load
+   */
+  const newUids = componentUids.filter((uid) => !componentStore.get(uid));
+  const [loading, setLoading] = useState(() => !!newUids.length);
   const customFieldsRegistry = useCustomFields();
 
   useEffect(() => {
@@ -36,11 +35,8 @@ const useLazyComponents = (componentUids = []) => {
       setStore(Object.fromEntries(componentStore));
     };
 
-    if (componentUids.length && loading) {
-      /**
-       * These uids are not in the component store therefore we need to get the components
-       */
-      const newUids = componentUids.filter((uid) => !componentStore.get(uid));
+    if (newUids.length > 0) {
+      setLoading(true);
 
       const componentPromises = newUids.map((uid) => {
         const customField = customFieldsRegistry.get(uid);
@@ -52,7 +48,7 @@ const useLazyComponents = (componentUids = []) => {
         lazyLoadComponents(newUids, componentPromises);
       }
     }
-  }, [componentUids, customFieldsRegistry, loading]);
+  }, [newUids, customFieldsRegistry]);
 
   /**
    * Wrap this in a callback so it can be used in

package/admin/src/content-manager/hooks/useRelation/useRelation.js

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { useInfiniteQuery } from 'react-query';
 
-import { axiosInstance } from '../../../core/utils';
+import { useFetchClient } from '@strapi/helper-plugin';
 
 import { normalizeRelations } from '../../components/RelationInputDataManager/utils';
 
@@ -10,13 +10,13 @@ import { useCallbackRef } from '../useCallbackRef';
 export const useRelation = (cacheKey, { relation, search }) => {
   const [searchParams, setSearchParams] = useState({});
   const [currentPage, setCurrentPage] = useState(0);
-
+  const { get } = useFetchClient();
   /**
    * This runs in `useInfiniteQuery` to actually fetch the data
    */
   const fetchRelations = async ({ pageParam = 1 }) => {
     try {
-      const { data } = await axiosInstance.get(relation?.endpoint, {
+      const { data } = await get(relation?.endpoint, {
         params: {
           ...(relation.pageParams ?? {}),
           page: pageParam,
@@ -33,7 +33,7 @@ export const useRelation = (cacheKey, { relation, search }) => {
 
   const fetchSearch = async ({ pageParam = 1 }) => {
     try {
-      const { data } = await axiosInstance.get(search.endpoint, {
+      const { data } = await get(search.endpoint, {
         params: {
           ...(search.pageParams ?? {}),
           ...searchParams,

package/admin/src/content-manager/pages/App/useModels.js

@@ -1,10 +1,14 @@
-import { useNotification, useRBACProvider, useStrapiApp } from '@strapi/helper-plugin';
+import {
+  useNotification,
+  useRBACProvider,
+  useStrapiApp,
+  useFetchClient,
+} from '@strapi/helper-plugin';
 import { useEffect, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNotifyAT } from '@strapi/design-system/LiveRegions';
 import axios from 'axios';
 import { useIntl } from 'react-intl';
-import { axiosInstance } from '../../../core/utils';
 import { MUTATE_COLLECTION_TYPES_LINKS, MUTATE_SINGLE_TYPES_LINKS } from '../../../exposedHooks';
 import { getRequestUrl, getTrad } from '../../utils';
 import { getData, resetProps, setContentTypeLinks } from './actions';
@@ -22,6 +26,7 @@ const useModels = () => {
   const source = CancelToken.source();
   const { notifyStatus } = useNotifyAT();
   const { formatMessage } = useIntl();
+  const { get } = useFetchClient();
 
   const fetchData = async () => {
     dispatch(getData());
@@ -36,7 +41,7 @@ const useModels = () => {
         },
       ] = await Promise.all(
         ['components', 'content-types'].map((endPoint) =>
-          axiosInstance.get(getRequestUrl(endPoint), { cancelToken: source.token })
+          get(getRequestUrl(endPoint), { cancelToken: source.token })
         )
       );