Add server-prepare for initial provider loading

Signed-off-by: Olga Bulat <obulat@gmail.com>

frontend/nuxt.config.ts

@@ -130,6 +130,7 @@ export default defineNuxtConfig({
     "@nuxtjs/i18n",
     "@nuxtjs/tailwindcss",
     "@nuxtjs/plausible",
+    "nuxt-prepare",
     "@nuxt/test-utils/module",
     "@nuxtjs/sitemap",
   ],

frontend/package.json

@@ -98,6 +98,7 @@
     "node-html-parser": "^5.3.3",
     "npm-run-all": "^4.1.5",
     "nuxt": "^3.9.1",
+    "nuxt-prepare": "^0.2.2",
     "talkback": "^3.0.2",
     "typescript": "^5.2.2",
     "vitest": "^1.2.0",

frontend/server.prepare.ts

@@ -0,0 +1,21 @@
+import { defineNuxtPrepareHandler } from "nuxt-prepare/config"
+import { $fetch } from "ofetch"
+
+import { sortProviders } from "./src/utils/provider"
+
+export default defineNuxtPrepareHandler(async () => {
+  const apiUrl =
+    process.env.NUXT_PUBLIC_API_URL || "https://api.openverse.engineering/"
+  const audioProviders = await $fetch(`${apiUrl}v1/audio/stats/`)
+  const imageProviders = await $fetch(`${apiUrl}v1/images/stats/`)
+
+  return {
+    ok: true,
+    state: {
+      providers: {
+        audio: sortProviders(audioProviders),
+        image: sortProviders(imageProviders),
+      },
+    },
+  }
+})

frontend/src/app.vue

@@ -42,7 +42,6 @@ import {
 } from "#imports"
 
 import { useUiStore } from "~/stores/ui"
-import { useProviderStore } from "~/stores/provider"
 import { useFeatureFlagStore } from "~/stores/feature-flag"
 
 import { useLayout } from "~/composables/use-layout"
@@ -97,10 +96,6 @@ export default defineComponent({
     const isDesktopLayout = computed(() => uiStore.isDesktopLayout)
     const breakpoint = computed(() => uiStore.breakpoint)
 
-    /* Provider store */
-    const providerStore = useProviderStore()
-    await providerStore.fetchMediaProviders()
-
     return {
       isDesktopLayout,
       breakpoint,

frontend/src/stores/provider.ts

@@ -17,6 +17,10 @@ import type { MediaProvider } from "~/types/media-provider"
 import type { FetchingError, FetchState } from "~/types/fetch-state"
 import { DEFAULT_REQUEST_TIMEOUT } from "~/utils/query-utils"
 
+import { sortProviders } from "~/utils/provider"
+
+import { providers } from "#nuxt-prepare"
+
 export interface ProviderState {
   /**
    * Timestamp is used to limit the update frequency to one every 60 minutes per request.
@@ -36,24 +40,12 @@ export interface ProviderState {
   }
 }
 
-/**
- * Sorts providers by their source_name property.
- * @param data - initial unordered list of providers
- */
-const sortProviders = (data: MediaProvider[]): MediaProvider[] => {
-  return [...data].sort((sourceObjectA, sourceObjectB) => {
-    const nameA = sourceObjectA.source_name.toUpperCase()
-    const nameB = sourceObjectB.source_name.toUpperCase()
-    return nameA.localeCompare(nameB)
-  })
-}
-
 export const useProviderStore = defineStore("provider", {
   state: (): ProviderState => ({
     lastUpdated: null,
     providers: {
-      [AUDIO]: [],
-      [IMAGE]: [],
+      [AUDIO]: providers?.audio ?? [],
+      [IMAGE]: providers?.image ?? [],
     },
     fetchState: {
       [AUDIO]: { isFetching: false, hasStarted: false, fetchingError: null },
@@ -147,7 +139,10 @@ export const useProviderStore = defineStore("provider", {
       const { $sentry } = useNuxtApp()
 
       const nitroOrigin = useRequestEvent()?.context.siteConfigNitroOrigin
-      const baseURL = nitroOrigin ? nitroOrigin : location?.origin
+
+      // TODO: Check if baseURL works in prod.
+      let baseURL = nitroOrigin ? nitroOrigin : location?.origin
+      baseURL = baseURL.replace("localhost", "0.0.0.0")
       try {
         const res: MediaProvider[] = await axios.get(
           `/api/${mediaType === "image" ? "images" : "audio"}/stats/`,

frontend/src/utils/provider.ts

@@ -0,0 +1,13 @@
+import type { MediaProvider } from "~/types/media-provider"
+
+/**
+ * Sorts providers by their source_name property.
+ * @param data - initial unordered list of providers
+ */
+export const sortProviders = (data: MediaProvider[]): MediaProvider[] => {
+  return [...data].sort((sourceObjectA, sourceObjectB) => {
+    const nameA = sourceObjectA.source_name.toUpperCase()
+    const nameB = sourceObjectB.source_name.toUpperCase()
+    return nameA.localeCompare(nameB)
+  })
+}