refactor: only query the necessary applications when checking updates

console/package.json

@@ -17,6 +17,7 @@
     "dayjs": "^1.11.9",
     "github-markdown-css": "^5.2.0",
     "pretty-bytes": "^6.1.1",
+    "qs": "^6.11.2",
     "semver": "^7.5.4",
     "vue": "^3.3.4",
     "vue-i18n": "^9.2.2"

console/src/composables/use-app-compare.ts

@@ -1,11 +1,10 @@
 import { AppType, STORE_APP_ID } from "@/constant";
 import type { ApplicationSearchResult } from "@/types";
-import type { Plugin, PluginList, Theme, ThemeList } from "@halo-dev/api-client";
-import { useQuery } from "@tanstack/vue-query";
-import axios from "axios";
 import { computed, type Ref } from "vue";
 import semver from "semver";
 import { useHaloVersion } from "./use-halo-version";
+import { useFetchInstalledPlugins } from "./use-plugin";
+import { useFetchInstalledThemes } from "./use-theme";
 
 export function useAppCompare(app: Ref<ApplicationSearchResult | undefined>) {
   const { haloVersion } = useHaloVersion();
@@ -14,23 +13,8 @@ export function useAppCompare(app: Ref<ApplicationSearchResult | undefined>) {
     return app.value?.application.spec.type;
   });
 
-  const { data: installedPlugins } = useQuery<Plugin[]>({
-    queryKey: ["plugins"],
-    queryFn: async () => {
-      const { data } = await axios.get<PluginList>(`/apis/api.console.halo.run/v1alpha1/plugins`);
-      return data.items;
-    },
-    enabled: computed(() => appType.value === AppType.PLUGIN),
-  });
-
-  const { data: installedThemes } = useQuery<Theme[]>({
-    queryKey: ["themes"],
-    queryFn: async () => {
-      const { data } = await axios.get<ThemeList>("/apis/api.console.halo.run/v1alpha1/themes?uninstalled=false");
-      return data.items;
-    },
-    enabled: computed(() => appType.value === AppType.THEME),
-  });
+  const { installedPlugins } = useFetchInstalledPlugins(computed(() => appType.value === AppType.PLUGIN));
+  const { installedThemes } = useFetchInstalledThemes(computed(() => appType.value === AppType.THEME));
 
   const matchedPlugin = computed(() => {
     if (appType.value === AppType.PLUGIN) {

console/src/composables/use-app-download.ts

@@ -262,12 +262,13 @@ export function useAppDownload(app: Ref<ApplicationSearchResult | undefined>) {
   function handleClearQueryCache() {
     if (appType.value === "THEME") {
       queryClient.invalidateQueries({ queryKey: ["installed-themes"] });
-      queryClient.invalidateQueries({ queryKey: ["themes"] });
+      queryClient.invalidateQueries({ queryKey: ["store-installed-themes"] });
       return;
     }
 
     if (appType.value === "PLUGIN") {
       queryClient.invalidateQueries({ queryKey: ["plugins"] });
+      queryClient.invalidateQueries({ queryKey: ["store-installed-plugins"] });
     }
   }
 

console/src/composables/use-plugin-version.ts

@@ -2,29 +2,35 @@ import type { ApplicationSearchResult, ListResponse } from "@/types";
 import storeApiClient from "@/utils/store-api-client";
 import type { Plugin } from "@halo-dev/api-client";
 import { useQuery } from "@tanstack/vue-query";
-import { computed, type Ref } from "vue";
+import { computed, ref, type Ref } from "vue";
 import semver from "semver";
 import { useHaloVersion } from "./use-halo-version";
 import { STORE_APP_ID } from "@/constant";
+import { useFetchInstalledPlugins } from "./use-plugin";
 
 export function usePluginVersion(plugin: Ref<Plugin | undefined>) {
   const { haloVersion } = useHaloVersion();
 
-  // TODO: 可能需要专门的最新版本应用列表接口
+  const { installedPlugins } = useFetchInstalledPlugins(ref(true));
+
   const { data: storePlugins } = useQuery<ListResponse<ApplicationSearchResult>>({
     queryKey: ["plugin-apps"],
     queryFn: async () => {
+      const appIds = installedPlugins.value?.map((plugin) => plugin.metadata.annotations?.[STORE_APP_ID]) || [];
+
       const { data } = await storeApiClient.get<ListResponse<ApplicationSearchResult>>(
         `/apis/api.store.halo.run/v1alpha1/applications`,
         {
           params: {
             type: "PLUGIN",
+            names: appIds,
           },
         }
       );
       return data;
     },
     staleTime: 1000,
+    enabled: computed(() => !!installedPlugins.value?.length),
   });
 
   const matchedApp = computed(() => {

console/src/composables/use-plugin.ts

@@ -0,0 +1,20 @@
+import { STORE_APP_ID } from "@/constant";
+import { apiClient } from "@/utils/api-client";
+import type { Plugin } from "@halo-dev/api-client";
+import { useQuery } from "@tanstack/vue-query";
+import type { Ref } from "vue";
+
+export function useFetchInstalledPlugins(enabled: Ref<boolean>) {
+  const { data: installedPlugins } = useQuery<Plugin[]>({
+    queryKey: ["store-installed-plugins"],
+    queryFn: async () => {
+      const { data } = await apiClient.plugin.listPlugins();
+      return data.items.filter((plugin) => {
+        return !!plugin.metadata.annotations?.[STORE_APP_ID];
+      });
+    },
+    enabled,
+    staleTime: 1000,
+  });
+  return { installedPlugins };
+}

console/src/composables/use-theme-version.ts

@@ -2,29 +2,35 @@ import type { ApplicationSearchResult, ListResponse } from "@/types";
 import storeApiClient from "@/utils/store-api-client";
 import type { Theme } from "@halo-dev/api-client";
 import { useQuery } from "@tanstack/vue-query";
-import { computed, type Ref } from "vue";
+import { computed, ref, type Ref } from "vue";
 import semver from "semver";
 import { useHaloVersion } from "./use-halo-version";
 import { STORE_APP_ID } from "@/constant";
+import { useFetchInstalledThemes } from "./use-theme";
 
 export function useThemeVersion(theme: Ref<Theme | undefined>) {
   const { haloVersion } = useHaloVersion();
 
-  // TODO: 可能需要专门的最新版本应用列表接口
+  const { installedThemes } = useFetchInstalledThemes(ref(true));
+
   const { data: storeThemes } = useQuery<ListResponse<ApplicationSearchResult>>({
     queryKey: ["theme-apps"],
     queryFn: async () => {
+      const appIds = installedThemes.value?.map((theme) => theme.metadata.annotations?.[STORE_APP_ID]) || [];
+
       const { data } = await storeApiClient.get<ListResponse<ApplicationSearchResult>>(
         `/apis/api.store.halo.run/v1alpha1/applications`,
         {
           params: {
             type: "THEME",
+            names: appIds,
           },
         }
       );
       return data;
     },
     staleTime: 1000,
+    enabled: computed(() => !!installedThemes.value?.length),
   });
 
   const matchedApp = computed(() => {

console/src/composables/use-theme.ts

@@ -0,0 +1,21 @@
+import { STORE_APP_ID } from "@/constant";
+import { apiClient } from "@/utils/api-client";
+import type { Theme } from "@halo-dev/api-client";
+import { useQuery } from "@tanstack/vue-query";
+import type { Ref } from "vue";
+
+export function useFetchInstalledThemes(enabled: Ref<boolean>) {
+  const { data: installedThemes } = useQuery<Theme[]>({
+    queryKey: ["store-installed-themes"],
+    queryFn: async () => {
+      const { data } = await apiClient.theme.listThemes({
+        uninstalled: false,
+      });
+      return data.items.filter((theme) => {
+        return !!theme.metadata.annotations?.[STORE_APP_ID];
+      });
+    },
+    enabled,
+  });
+  return { installedThemes };
+}

console/src/utils/store-api-client.ts

@@ -1,7 +1,11 @@
 import axios from "axios";
+import qs from "qs";
 
 const storeApiClient = axios.create({
   baseURL: import.meta.env.VITE_APP_STORE_BACKEND,
+  paramsSerializer: (params) => {
+    return qs.stringify(params, { arrayFormat: "repeat" });
+  },
 });
 
 export default storeApiClient;