Fix api calling dev

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## Current (in progress)
 
 - **breaking change** Migrate to Python 3.11 [#376](https://github.com/etalab/udata-front/pull/376)
+- Fix api urls locked on dev.data.gouv.fr [#401](https://github.com/datagouv/udata-front/pull/401)
 
 ## 3.5.5 (2024-04-16)
 

package.json

@@ -30,7 +30,7 @@
   "devDependencies": {
     "@conciergerie.dev/select-a11y": "^3.5.0",
     "@conciergerie.dev/vue-toaster": "^2.4.4",
-    "@etalab/data.gouv.fr-components": "^1.13.11",
+    "@etalab/data.gouv.fr-components": "^1.13.12",
     "@etalab/udata-front-plugins-helper": "1.1.0",
     "@gouvfr/dsfr": "~1.9.2",
     "@intlify/unplugin-vue-i18n": "^1.5.0",

udata_front/theme/gouvfr/datagouv-components/src/api/api.ts

@@ -1,5 +1,6 @@
 import axios from "axios";
 import { config } from "../config";
+import { computed, watch } from "vue";
 
 const CancelToken = axios.CancelToken;
 export const generateCancelToken = () => CancelToken.source();
@@ -10,16 +11,29 @@ export const generateAbortcontroller = (timeoutMs: number) => {
   return abortController;
 };
 
-export const api_root_absolute = config.api_root?.startsWith("http") ? config.api_root : document.location.origin + config.api_root;
+export const apiRootAbsoluteRef = computed(() => config.api_root?.startsWith("http") ? config.api_root : document.location.origin + config.api_root);
+export let api_root_absolute = apiRootAbsoluteRef.value;
 
-export const api_2_root_absolute = config.api_2_root?.startsWith("http") ? config.api_2_root : document.location.origin + config.api_2_root;
+export const api2RootAbsoluteRef = computed(() => config.api_2_root?.startsWith("http") ? config.api_2_root : document.location.origin + config.api_2_root);
+export let api_2_root_absolute = api2RootAbsoluteRef.value;
 
 // Instantiate axios with base URL from config
 // No need for CSRF or anything fancy here
 // TODO : maybe add interceptor to better handle errors ?
 export const api = axios.create({
   baseURL: api_root_absolute,
 });
+
 export const apiv2 = axios.create({
   baseURL: api_2_root_absolute,
 });
+
+watch(apiRootAbsoluteRef, (value) => {
+  api_root_absolute = value;
+  api.defaults.baseURL = value;
+});
+
+watch(api2RootAbsoluteRef, (value) => {
+  api_2_root_absolute = value;
+  apiv2.defaults.baseURL = value;
+});

udata_front/theme/gouvfr/datagouv-components/src/config.ts

@@ -1,68 +1,68 @@
 import { reactive, readonly, ref } from "vue";
 
-const admin_root = ref(import.meta.env.VITE_ADMIN_ROOT);
+const admin_root = ref<string>(import.meta.env.VITE_ADMIN_ROOT);
 
-const api_root = ref(import.meta.env.VITE_API_URL);
+const api_root = ref<string>(import.meta.env.VITE_API_URL);
 
-const api_2_root = ref(import.meta.env.VITE_API_2_URL);
+const api_2_root = ref<string>(import.meta.env.VITE_API_2_URL);
 
-const show_copy_resource_permalink = ref(import.meta.env.VITE_SHOW_COPY_RESOURCE_PERMALINK === "true");
+const show_copy_resource_permalink = ref<boolean>(import.meta.env.VITE_SHOW_COPY_RESOURCE_PERMALINK === "true");
 
-const schema_documentation_url = ref(import.meta.env.VITE_SCHEMA_DOCUMENTATION_URL);
+const schema_documentation_url = ref<string>(import.meta.env.VITE_SCHEMA_DOCUMENTATION_URL);
 
-const schema_catalog_url = ref(import.meta.env.VITE_SCHEMA_CATALOG_URL);
+const schema_catalog_url = ref<string>(import.meta.env.VITE_SCHEMA_CATALOG_URL);
 
-const schema_validata_url = ref(import.meta.env.VITE_SCHEMA_VALIDATA_URL);
+const schema_validata_url = ref<string>(import.meta.env.VITE_SCHEMA_VALIDATA_URL);
 
-const site_root = ref(import.meta.env.VITE_SITE_ROOT_URL);
+const site_root = ref<string>(import.meta.env.VITE_SITE_ROOT_URL);
 
-const static_root = ref(import.meta.env.VITE_STATIC_ROOT_URL);
+const static_root = ref<string>(import.meta.env.VITE_STATIC_ROOT_URL);
 
-const title = ref(import.meta.env.VITE_TITLE);
+const title = ref<string>(import.meta.env.VITE_TITLE);
 
 const explorable_resources = ref<Array<string>>([]);
 
-const only_locales = ref(import.meta.env.VITE_ONLY_LOCALES);
+const only_locales = ref<string>(import.meta.env.VITE_ONLY_LOCALES);
 
-const default_lang = ref(import.meta.env.VITE_DEFAULT_LANG);
+const default_lang = ref<string>(import.meta.env.VITE_DEFAULT_LANG);
 
-const guides_quality_url = ref(import.meta.env.VITE_GUIDES_QUALITY_URL);
+const guides_quality_url = ref<string>(import.meta.env.VITE_GUIDES_QUALITY_URL);
 
 const localConfig = reactive({
-    admin_root,
-    api_root,
-    api_2_root,
-    default_lang,
-    explorable_resources,
-    guides_quality_url,
-    only_locales,
-    schema_catalog_url,
-    schema_documentation_url,
-    schema_validata_url,
-    site_root,
-    static_root,
-    show_copy_resource_permalink,
-    title,
+  admin_root,
+  api_root,
+  api_2_root,
+  default_lang,
+  explorable_resources,
+  guides_quality_url,
+  only_locales,
+  schema_catalog_url,
+  schema_documentation_url,
+  schema_validata_url,
+  site_root,
+  static_root,
+  show_copy_resource_permalink,
+  title,
 });
 
 const config = readonly(localConfig);
 
 const setupComponents = (config: Partial<typeof localConfig>) => {
-    const mergedConfig = {...localConfig, ...config};
-    admin_root.value = mergedConfig.admin_root;
-    default_lang.value = mergedConfig.default_lang;
-    explorable_resources.value = mergedConfig.explorable_resources;
-    guides_quality_url.value = mergedConfig.guides_quality_url;
-    only_locales.value = mergedConfig.only_locales;
-    schema_catalog_url.value = mergedConfig.schema_catalog_url;
-    schema_documentation_url.value = mergedConfig.schema_documentation_url;
-    schema_validata_url.value = mergedConfig.schema_validata_url;
-    show_copy_resource_permalink.value = mergedConfig.show_copy_resource_permalink;
-    site_root.value = mergedConfig.site_root;
-    static_root.value = mergedConfig.static_root;
-    title.value = mergedConfig.title;
-    api_root.value = mergedConfig.api_root;
-    api_2_root.value = mergedConfig.api_2_root;
+  const mergedConfig = {...localConfig, ...config};
+  admin_root.value = mergedConfig.admin_root;
+  default_lang.value = mergedConfig.default_lang;
+  explorable_resources.value = mergedConfig.explorable_resources;
+  guides_quality_url.value = mergedConfig.guides_quality_url;
+  only_locales.value = mergedConfig.only_locales;
+  schema_catalog_url.value = mergedConfig.schema_catalog_url;
+  schema_documentation_url.value = mergedConfig.schema_documentation_url;
+  schema_validata_url.value = mergedConfig.schema_validata_url;
+  show_copy_resource_permalink.value = mergedConfig.show_copy_resource_permalink;
+  site_root.value = mergedConfig.site_root;
+  static_root.value = mergedConfig.static_root;
+  title.value = mergedConfig.title;
+  api_root.value = mergedConfig.api_root;
+  api_2_root.value = mergedConfig.api_2_root;
 };
 
 export { config, setupComponents };

udata_front/theme/gouvfr/datagouv-components/src/vite-env.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_ADMIN_ROOT: string;
+  readonly VITE_SHOW_COPY_RESOURCE_PERMALINK: string;
+  readonly VITE_SCHEMA_DOCUMENTATION_URL: string;
+  readonly VITE_SCHEMA_CATALOG_URL: string;
+  readonly VITE_SCHEMA_VALIDATA_URL: string;
+  readonly VITE_TITLE: string;
+  readonly VITE_ONLY_LOCALES: string;
+  readonly VITE_DEFAULT_LANG: string;
+  readonly VITE_API_URL: string;
+  readonly VITE_API_2_URL: string;
+  readonly VITE_SITE_ROOT_URL: string;
+  readonly VITE_STATIC_ROOT_URL: string;
+  readonly VITE_GUIDES_QUALITY_URL: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}