refactor the fetchClient to the getFetchClient utils

packages/core/admin/admin/src/StrapiApp.js

@@ -22,7 +22,7 @@ import {
 import injectionZones from './injectionZones';
 import favicon from './favicon.png';
 import localStorageKey from './components/LanguageProvider/utils/localStorageKey';
-import { fetchClient } from './utils';
+import { getFetchClient } from './utils';
 
 class StrapiApp {
   constructor({ adminConfig, appPlugins, library, middlewares, reducers }) {
@@ -452,7 +452,7 @@ class StrapiApp {
         showTutorials={this.configurations.tutorials}
         showReleaseNotification={this.configurations.notifications.releases}
         store={store}
-        fetchClient={fetchClient}
+        getFetchClient={getFetchClient}
       >
         <>
           <Helmet

packages/core/admin/admin/src/components/PluginsInitializer/tests/index.test.js

@@ -21,7 +21,7 @@ describe('ADMIN | COMPONENTS | PluginsInitializer', () => {
           runHookSeries={jest.fn()}
           menu={[]}
           settings={{}}
-          fetchClient={{}}
+          getFetchClient={jest.fn()}
         >
           <PluginsInitializer />
         </StrapiAppProvider>

packages/core/admin/admin/src/components/Providers/index.js

@@ -42,7 +42,7 @@ const Providers = ({
   showTutorials,
   store,
   themes,
-  fetchClient,
+  getFetchClient,
 }) => {
   return (
     <ThemeToggleProvider themes={themes}>
@@ -64,7 +64,7 @@ const Providers = ({
                   runHookWaterfall={runHookWaterfall}
                   runHookSeries={runHookSeries}
                   settings={settings}
-                  fetchClient={fetchClient}
+                  getFetchClient={getFetchClient}
                 >
                   <LibraryProvider components={components} fields={fields}>
                     <CustomFieldsProvider customFields={customFields}>
@@ -147,7 +147,7 @@ Providers.propTypes = {
     }).isRequired,
     custom: PropTypes.object,
   }).isRequired,
-  fetchClient: PropTypes.object.isRequired,
+  getFetchClient: PropTypes.func.isRequired,
 };
 
 export default Providers;

packages/core/admin/admin/src/pages/SettingsPage/tests/index.test.js

@@ -43,7 +43,7 @@ const makeApp = (history, settings) => (
             runHookWaterfall={jest.fn()}
             runHookSeries={jest.fn()}
             menu={[]}
-            fetchClient={{}}
+            getFetchClient={jest.fn()}
           >
             <Router history={history}>
               <Route path="/settings/:settingId" component={SettingsPage} />

packages/core/admin/admin/src/utils/fetchClient.js

@@ -1,48 +0,0 @@
-import axios from 'axios';
-import { auth } from '@strapi/helper-plugin';
-
-function getFetchClient() {
-  const instance = axios.create({
-    baseURL: process.env.STRAPI_ADMIN_BACKEND_URL,
-  });
-
-  instance.interceptors.request.use(
-    async (config) => {
-      config.headers = {
-        Authorization: `Bearer ${auth.getToken()}`,
-        Accept: 'application/json',
-        'Content-Type': 'application/json',
-      };
-
-      return config;
-    },
-    (error) => {
-      Promise.reject(error);
-    }
-  );
-
-  instance.interceptors.response.use(
-    (response) => response,
-    (error) => {
-      // whatever you want to do with the error
-      if (error?.response?.status === 401) {
-        auth.clearAppStorage();
-        window.location.reload();
-      }
-
-      throw error;
-    }
-  );
-
-  return instance;
-}
-
-const instance = getFetchClient();
-
-export default {
-  get: instance.get,
-  put: instance.put,
-  post: instance.post,
-  delete: instance.delete,
-  getFetchClient,
-};

packages/core/admin/admin/src/utils/getFetchClient.js

@@ -0,0 +1,45 @@
+import axios from 'axios';
+import { auth } from '@strapi/helper-plugin';
+
+const instance = axios.create({
+  baseURL: process.env.STRAPI_ADMIN_BACKEND_URL,
+});
+
+instance.interceptors.request.use(
+  async (config) => {
+    config.headers = {
+      Authorization: `Bearer ${auth.getToken()}`,
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+    };
+
+    return config;
+  },
+  (error) => {
+    Promise.reject(error);
+  }
+);
+
+instance.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    // whatever you want to do with the error
+    if (error?.response?.status === 401) {
+      auth.clearAppStorage();
+      window.location.reload();
+    }
+
+    throw error;
+  }
+);
+
+const getFetchClient = () => {
+  return {
+    get: (url, config) => instance.get(url, config),
+    put: (url, data, config) => instance.put(url, data, config),
+    post: (url, data, config) => instance.post(url, data, config),
+    delete: (url, config) => instance.get(url, config),
+  };
+};
+
+export default getFetchClient;

packages/core/admin/admin/src/utils/index.js

@@ -7,4 +7,4 @@ export { default as sortLinks } from './sortLinks';
 export { default as getExistingActions } from './getExistingActions';
 export { default as getRequestUrl } from './getRequestUrl';
 export { default as getFullName } from './getFullName';
-export { default as fetchClient } from './fetchClient';
+export { default as getFetchClient } from './getFetchClient';

packages/core/content-type-builder/admin/src/components/DataManagerProvider/index.js

@@ -108,7 +108,7 @@ const DataManagerProvider = ({
         { data: reservedNames },
       ] = await Promise.all(
         ['components', 'content-types', 'reserved-names'].map((endPoint) => {
-          // TODO: remember to pass also the pluginId when you use the new get, post, put, delete methods from fetchClient
+          // TODO: remember to pass also the pluginId when you use the new get, post, put, delete methods from getFetchClient
           return axiosInstance.get(endPoint);
         })
       );
@@ -266,7 +266,7 @@ const DataManagerProvider = ({
 
       if (userConfirm) {
         lockAppWithAutoreload();
-        // TODO: remember to pass also the pluginId when you use the new get, post, put, delete methods from fetchClient
+        // TODO: remember to pass also the pluginId when you use the new get, post, put, delete methods from getFetchClient
         await axiosInstance.delete(requestURL);
 
         // Make sure the server has restarted
@@ -316,7 +316,7 @@ const DataManagerProvider = ({
         }
 
         lockAppWithAutoreload();
-        // TODO: remember to pass also the pluginId when you use the new get, post, put, delete methods from fetchClient
+        // TODO: remember to pass also the pluginId when you use the new get, post, put, delete methods from getFetchClient
         await axiosInstance.delete(requestURL);
 
         // Make sure the server has restarted
@@ -350,7 +350,7 @@ const DataManagerProvider = ({
       lockAppWithAutoreload();
 
       // Update the category
-      // TODO: remember to pass also the pluginId when you use the new get, post, put, delete methods from fetchClient
+      // TODO: remember to pass also the pluginId when you use the new get, post, put, delete methods from getFetchClient
       await axiosInstance({ url: requestURL, method: 'PUT', data: body });
 
       // Make sure the server has restarted
@@ -508,7 +508,7 @@ const DataManagerProvider = ({
 
       // Lock the app
       lockAppWithAutoreload();
-      // TODO: remember to pass also the pluginId when you use the new get, post, put, delete methods from fetchClient
+      // TODO: remember to pass also the pluginId when you use the new get, post, put, delete methods from getFetchClient
       await axiosInstance({
         url: requestURL,
         method,

packages/core/content-type-builder/admin/src/utils/axiosInstance.js

@@ -1,6 +1,6 @@
 import axios from 'axios';
 import { auth, wrapAxiosInstance } from '@strapi/helper-plugin';
-// TODO: remember to pass also the pluginId when you use the new get, post, put, delete methods from fetchClient
+// TODO: remember to pass also the pluginId when you use the new get, post, put, delete methods from getFetchClient
 import pluginId from '../pluginId';
 
 const instance = axios.create({

packages/core/helper-plugin/lib/src/hooks/useFetchClient/index.js

@@ -2,9 +2,9 @@ import { useContext } from 'react';
 import StrapiAppContext from '../../contexts/StrapiAppContext';
 
 const useFetchClient = () => {
-  const { fetchClient } = useContext(StrapiAppContext);
+  const { getFetchClient } = useContext(StrapiAppContext);
 
-  return fetchClient;
+  return getFetchClient();
 };
 
 export default useFetchClient;

packages/core/helper-plugin/lib/src/providers/StrapiAppProvider/index.js

@@ -31,7 +31,7 @@ StrapiAppProvider.propTypes = {
   runHookWaterfall: PropTypes.func.isRequired,
   runHookSeries: PropTypes.func.isRequired,
   settings: PropTypes.object.isRequired,
-  fetchClient: PropTypes.object.isRequired,
+  getFetchClient: PropTypes.func.isRequired,
 };
 
 export default StrapiAppProvider;