chore: remove nuxt proxy module and replace with server routes (#3350)

chore: remove nuxt-proxy module Replace nuxt-proxy module with nitro server routes - remove plugin and imports - setup server proxy for gql and file requests - refactor fetch calls removing explicit baseUrl from call
molgenis · Feb 7, 2024 · 0f57ee5 · 0f57ee5
1 parent fc4505c
commit 0f57ee5
Show file tree

Hide file tree

Showing 31 changed files with 75 additions and 117 deletions.
diff --git a/apps/nuxt3-ssr/README.md b/apps/nuxt3-ssr/README.md
@@ -21,12 +21,18 @@ pnpm install --shamefully-hoist
 
 Start the development server on http://localhost:3000
 
+set non default (api)proxy target with 
+```NUXT_PUBLIC_API_BASE```
+
 ```bash
 npm run dev
 ```
 
 ## Production
 
+set api-proxy target with 
+```NUXT_PUBLIC_API_BASE```
+
 Build the application for production:
 
 ```bash

diff --git a/apps/nuxt3-ssr/components/CohortDisplay.vue b/apps/nuxt3-ssr/components/CohortDisplay.vue
@@ -5,26 +5,21 @@ const props = defineProps<{
   id: string;
 }>();
 
-const config = useRuntimeConfig();
 const route = useRoute();
 
 const query = moduleToString(cohortGql);
 
 let cohort: ICohort = ref();
 
-const { data: cohortData } = await useFetch(
-  `/${route.params.schema}/catalogue/graphql`,
-  {
-    baseURL: config.public.apiBase,
-    method: "POST",
-    body: {
-      query,
-      variables: {
-        id: props.id,
-      },
+const { data: cohortData } = await useFetch(`/${route.params.schema}/graphql`, {
+  method: "POST",
+  body: {
+    query,
+    variables: {
+      id: props.id,
     },
-  }
-).catch((e) => console.log(e));
+  },
+}).catch((e) => console.log(e));
 
 watch(
   cohortData,

diff --git a/apps/nuxt3-ssr/components/CollectionEventDisplay.vue b/apps/nuxt3-ssr/components/CollectionEventDisplay.vue
@@ -12,10 +12,9 @@ const route = useRoute();
 const query = moduleToString(collectionEventGql);
 
 const { data, error } = await useFetch<any, IMgError>(
-  `/${route.params.schema}/catalogue/graphql`,
+  `/${route.params.schema}/graphql`,
   {
     key: `collection-event-${route.params.cohort}-${collectionEventName}`,
-    baseURL: config.public.apiBase,
     method: "POST",
     body: {
       query,

diff --git a/apps/nuxt3-ssr/components/DatasetDisplay.vue b/apps/nuxt3-ssr/components/DatasetDisplay.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import datasetGql from "~~/gql/datasetDetails";
-const config = useRuntimeConfig();
 const route = useRoute();
 
 const { id } = defineProps<{
@@ -9,8 +8,7 @@ const { id } = defineProps<{
 
 const query = moduleToString(datasetGql);
 
-const { data } = await useFetch(`/${route.params.schema}/catalogue/graphql`, {
-  baseURL: config.public.apiBase,
+const { data } = await useFetch(`/${route.params.schema}/graphql`, {
   method: "POST",
   body: {
     query: query,

diff --git a/apps/nuxt3-ssr/components/RepeatedVariableDisplay.vue b/apps/nuxt3-ssr/components/RepeatedVariableDisplay.vue
@@ -9,13 +9,11 @@ const props = defineProps<{
   variableKey: KeyObject;
 }>();
 
-const config = useRuntimeConfig();
 const route = useRoute();
 
 const { data, pending, error } = await useFetch(
-  `/${route.params.schema}/catalogue/graphql`,
+  `/${route.params.schema}/graphql`,
   {
-    baseURL: config.public.apiBase,
     method: "POST",
     body: {
       query: query,

diff --git a/apps/nuxt3-ssr/components/SubCohortDisplay.vue b/apps/nuxt3-ssr/components/SubCohortDisplay.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import subcohortGql from "~~/gql/subcohort";
 import ContentBlockModal from "./content/ContentBlockModal.vue";
-const config = useRuntimeConfig();
 const route = useRoute();
 
 const { id } = defineProps<{
@@ -12,9 +11,8 @@ const query = moduleToString(subcohortGql);
 
 let subcohort: Ref = ref();
 const { data: subcohortData } = await useFetch(
-  `/${route.params.schema}/catalogue/graphql`,
+  `/${route.params.schema}/graphql`,
   {
-    baseURL: config.public.apiBase,
     method: "POST",
     body: {
       query: query,

diff --git a/apps/nuxt3-ssr/components/VariableDisplay.vue b/apps/nuxt3-ssr/components/VariableDisplay.vue
@@ -9,13 +9,11 @@ const props = defineProps<{
   variableKey: KeyObject;
 }>();
 
-const config = useRuntimeConfig();
 const route = useRoute();
 
 const { data, pending, error } = await useFetch(
-  `/${route.params.schema}/catalogue/graphql`,
+  `/${route.params.schema}/graphql`,
   {
-    baseURL: config.public.apiBase,
     method: "POST",
     body: {
       query: query,

diff --git a/apps/nuxt3-ssr/components/landing/Central.vue b/apps/nuxt3-ssr/components/landing/Central.vue
@@ -4,9 +4,8 @@ const route = useRoute();
 const config = useRuntimeConfig();
 
 const { data, pending, error, refresh } = await useFetch(
-  `/${route.params.schema}/catalogue/graphql`,
+  `/${route.params.schema}/graphql`,
   {
-    baseURL: config.public.apiBase,
     method: "POST",
     body: {
       query: `{

diff --git a/apps/nuxt3-ssr/components/landing/CohortsOnly.vue b/apps/nuxt3-ssr/components/landing/CohortsOnly.vue
@@ -3,9 +3,8 @@ const route = useRoute();
 const config = useRuntimeConfig();
 
 const { data, pending, error, refresh } = await useFetch(
-  `/${route.params.schema}/catalogue/graphql`,
+  `/${route.params.schema}/graphql`,
   {
-    baseURL: config.public.apiBase,
     method: "POST",
     body: {
       query: `{

diff --git a/apps/nuxt3-ssr/composables/fetchGql.ts b/apps/nuxt3-ssr/composables/fetchGql.ts
@@ -15,11 +15,9 @@ export const fetchGql = (
   }
 
   const route = useRoute();
-  const config = useRuntimeConfig();
   const schema = schemaId ? schemaId : route.params.schema;
-  return $fetch(`/${schema}/catalogue/graphql`, {
+  return $fetch(`/${schema}/graphql`, {
     method: "POST",
-    baseURL: config.public.apiBase,
     body,
   });
 };
diff --git a/apps/nuxt3-ssr/composables/fetchMetadata.ts b/apps/nuxt3-ssr/composables/fetchMetadata.ts
@@ -6,8 +6,6 @@ import { type ISchemaMetaData } from "meta-data-utils";
 const query = moduleToString(metadataGql);
 
 export default async (schemaId: string): Promise<ISchemaMetaData> => {
-  const config = useRuntimeConfig();
-
   // Use sessionStorage to cache data
   const cached = useSessionStorage<ISchemaMetaData>(schemaId, null, {
     serializer: StorageSerializers.object,
@@ -16,7 +14,6 @@ export default async (schemaId: string): Promise<ISchemaMetaData> => {
   if (!cached.value) {
     const resp = await $fetch(`/${schemaId}/graphql`, {
       method: "POST",
-      baseURL: config.public.apiBase,
       body: {
         query,
       },

diff --git a/apps/nuxt3-ssr/composables/fetchSetting.ts b/apps/nuxt3-ssr/composables/fetchSetting.ts
@@ -4,10 +4,8 @@ export const fetchSetting = (settingKey: string) => {
   };
 
   const route = useRoute();
-  const config = useRuntimeConfig();
-  return $fetch(`/${route.params.schema}/catalogue/graphql`, {
+  return $fetch(`/${route.params.schema}/graphql`, {
     method: "POST",
-    baseURL: config.public.apiBase,
     body,
   });
 };
diff --git a/apps/nuxt3-ssr/composables/sendContactForm.ts b/apps/nuxt3-ssr/composables/sendContactForm.ts
@@ -2,10 +2,8 @@ import type { IContactFormData } from "~/interfaces/types";
 
 export const sendContactForm = (formData: IContactFormData) => {
   const route = useRoute();
-  const config = useRuntimeConfig();
   return $fetch(`/${route.params.schema}/api/message/`, {
     method: "POST",
-    baseURL: config.public.apiBase,
     body: formData,
   });
 };
diff --git a/apps/nuxt3-ssr/composables/useGqlFetch.ts b/apps/nuxt3-ssr/composables/useGqlFetch.ts
@@ -11,8 +11,6 @@ export function useGqlFetch<T, E>(
   query: string | Ref<string> | DocumentNode,
   options: UseGqlFetchOptions<T> = {}
 ) {
-  const config = useRuntimeConfig();
-
   const queryString = isRef(query)
     ? query.value
     : typeof query !== "string"
@@ -30,9 +28,8 @@ export function useGqlFetch<T, E>(
     body.variables = variablesValue;
   }
   const schema = options.schemaId ?? useRoute().params.schema;
-  const url = `/${schema}/catalogue/graphql`;
+  const url = `/${schema}/graphql`;
   const defaults: UseFetchOptions<T> = {
-    baseURL: config.public.apiBase,
     method: "POST",
     key: `gql-${url}-${queryString}`,
     body,

diff --git a/apps/nuxt3-ssr/composables/useHeaderData.ts b/apps/nuxt3-ssr/composables/useHeaderData.ts
@@ -29,16 +29,13 @@ export async function useHeaderData() {
     return { catalogue: null, variableCount: 0 };
   }
 
-  const config = useRuntimeConfig();
-  const apiPath = `/${route.params.schema}/catalogue/graphql`;
-  const baseURL = config.public.apiBase;
+  const apiPath = `/${route.params.schema}/graphql`;
   const { data, error } = await useAsyncData<any, IMgError>(
     `catalogue-${route.params.catalogue}`,
     async () => {
       const modelsResp = await $fetch<{
         data: { Networks: { models: { id: string }[] }[] };
       }>(apiPath, {
-        baseURL,
         method,
         body: {
           query: modelQuery,
@@ -68,7 +65,6 @@ export async function useHeaderData() {
 
       return $fetch(apiPath, {
         key: `header-${route.params.catalogue}`,
-        baseURL,
         method,
         body: {
           query: headerQuery,

diff --git a/apps/nuxt3-ssr/nuxt.config.ts b/apps/nuxt3-ssr/nuxt.config.ts
@@ -1,44 +1,23 @@
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
-import { defineNuxtConfig, type NuxtConfig } from "nuxt/config";
+import { defineNuxtConfig } from "nuxt/config";
 
-const devProxy = {
-  options: {
-    target:
-      process.env.PROXY_TARGET || "https://data-catalogue.molgeniscloud.org/", // 'http://localhost:8080/',
-    pathFilter: ["**/*/graphql", "**/api/file/**", "**/api/message/**"],
-    changeOrigin: true,
-    secure: false,
-    logLevel: "debug",
-  },
-};
-
-const config: NuxtConfig = {
-  modules: ["nuxt-proxy", "@nuxt/image"],
+export default defineNuxtConfig({
+  modules: ["@nuxt/image"],
   devtools: { enabled: true },
   runtimeConfig: {
-    // Keys within public, will be also exposed to the client-side
     public: {
-      apiBase: "http://localhost:3000/", //'https://emx2.molgeniscloud.org/',
       emx2Theme: "",
       emx2Logo: "",
       siteTitle: "MOLGENIS",
       analyticsKey: "",
       cohortOnly: false,
+      apiBase: process.env.NUXT_PUBLIC_API_BASE || "https://data-catalogue.molgeniscloud.org/",
     },
   },
-  nitro: {
-    compressPublicAssets: { brotli: true },
-  },
   imports: {
     transform: {
       // exclude
       exclude: [/\bmeta-data-utils\b/],
     },
   },
-};
-
-if (process.env.NODE_ENV === "development") {
-  config.proxy = devProxy;
-}
-
-export default defineNuxtConfig(config);
+});
diff --git a/apps/nuxt3-ssr/package.json b/apps/nuxt3-ssr/package.json
@@ -17,9 +17,9 @@
     "parse-icons": "node ../node_modules/svgo/bin/svgo -f ./assets/icons -o ./assets/minified-icons --config ./svgo.config.js && node ./scripts/create_vue_components_from_icons.js"
   },
   "devDependencies": {
-    "@nuxt/image": "1.1.0",
-    "@nuxt/test-utils": "3.9.0",
-    "@nuxt/vite-builder": "3.9.0",
+    "@nuxt/image": "1.3.0",
+    "@nuxt/test-utils": "3.10.0",
+    "@nuxt/vite-builder": "3.10.0",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/typography": "^0.5.8",
     "@types/node": "16.18.74",
@@ -29,8 +29,7 @@
     "graphql-tag": "2.12.6",
     "jsdom": "22.1.0",
     "meta-data-utils": "*",
-    "nuxt": "^3.10.0",
-    "nuxt-proxy": "0.4.1",
+    "nuxt": "3.10.0",
     "postcss": "8.4.33",
     "postcss-custom-properties": "13.3.4",
     "prettier": "2.8.8",
@@ -41,7 +40,7 @@
   },
   "dependencies": {
     "@vueuse/core": "10.5.0",
-    "floating-vue": "^2.0.0-beta.20",
+    "floating-vue": "5.2.2",
     "meta-data-utils": "*",
     "vite": "4.5.2",
     "vue": "3.4.15"

diff --git a/apps/nuxt3-ssr/pages/[schema]/ssr-catalogue/[catalogue]/[resourceType]/[resource].vue b/apps/nuxt3-ssr/pages/[schema]/ssr-catalogue/[catalogue]/[resourceType]/[resource].vue
@@ -56,9 +56,8 @@ let sections: any;
 let tocItems: { label: string; id: string }[];
 
 const { data, pending, error, refresh } = await useFetch(
-  `/${route.params.schema}/catalogue/graphql`,
+  `/${route.params.schema}/graphql`,
   {
-    baseURL: config.public.apiBase,
     method: "POST",
     body: { query, variables: { filter: filter } },
   }

diff --git a/apps/nuxt3-ssr/pages/[schema]/ssr-catalogue/[catalogue]/[resourceType]/index.vue b/apps/nuxt3-ssr/pages/[schema]/ssr-catalogue/[catalogue]/[resourceType]/index.vue
@@ -103,7 +103,6 @@ const { data, pending, error, refresh } = await useFetch(
   `/${route.params.schema}/api/graphql`,
   {
     key: `${tableId}-list-${offset.value}`,
-    baseURL: config.public.apiBase,
     method: "POST",
     body: {
       query,

diff --git a/...chema]/ssr-catalogue/[catalogue]/cohorts/[cohort]/collection-events/[collectionevent].vue b/...chema]/ssr-catalogue/[catalogue]/cohorts/[cohort]/collection-events/[collectionevent].vue
@@ -12,9 +12,8 @@ const route = useRoute();
 const query = moduleToString(collectionEventGql);
 
 const { data, error } = await useFetch<any, IMgError>(
-  `/${route.params.schema}/catalogue/graphql`,
+  `/${route.params.schema}/graphql`,
   {
-    baseURL: config.public.apiBase,
     method: "POST",
     body: {
       query,

diff --git a/apps/nuxt3-ssr/pages/[schema]/ssr-catalogue/[catalogue]/cohorts/[cohort]/index.vue b/apps/nuxt3-ssr/pages/[schema]/ssr-catalogue/[catalogue]/cohorts/[cohort]/index.vue
@@ -157,9 +157,8 @@ interface IResponse {
   };
 }
 const { data, error } = await useFetch<IResponse, IMgError>(
-  `/${route.params.schema}/catalogue/graphql`,
+  `/${route.params.schema}/graphql`,
   {
-    baseURL: config.public.apiBase,
     method: "POST",
     body: { query, variables },
   }

diff --git a/...-ssr/pages/[schema]/ssr-catalogue/[catalogue]/cohorts/[cohort]/subcohorts/[subcohort].vue b/...-ssr/pages/[schema]/ssr-catalogue/[catalogue]/cohorts/[cohort]/subcohorts/[subcohort].vue
@@ -7,9 +7,8 @@ const query = moduleToString(subcohortGql);
 
 let subcohort: Ref = ref();
 const { data: subcohortData } = await useFetch(
-  `/${route.params.schema}/catalogue/graphql`,
+  `/${route.params.schema}/graphql`,
   {
-    baseURL: config.public.apiBase,
     method: "POST",
     body: {
       query,