chore: bump tanstack query version and disable refetchOnWindowFocus option by default (#3771)

#### What type of PR is this? /kind improvement /area console /milestone 2.5.x #### What this PR does / why we need it: 升级 @tanstack/vue-query 的版本至 [v4.29.1](https://github.com/TanStack/query/releases/tag/v4.29.1)，并默认将 `refetchOnWindowFocus` 选项设置为 false。此选项的作用是当窗口重新聚焦时，刷新当前页面请求的状态（重新请求接口），目前暂时不需要使用它。 #### Does this PR introduce a user-facing change? ```release-note 升级 Console 端 `@tanstack/vue-query` 依赖的版本至 [v4.29.1](https://github.com/TanStack/query/releases/tag/v4.29.1) ```
2023-04-23 11:37:56 +08:00 · 2023-04-23 11:37:56 +08:00 · 61f4729d87
parent c6f0ac7e71
commit 61f4729d87
34 changed files with 33 additions and 55 deletions
--- a/console/package.json
+++ b/console/package.json
@ -46,7 +46,7 @@
    "@halo-dev/components": "workspace:*",
    "@halo-dev/console-shared": "workspace:*",
    "@halo-dev/richtext-editor": "0.0.0-alpha.22",
-    "@tanstack/vue-query": "^4.24.10",
+    "@tanstack/vue-query": "^4.29.1",
    "@tiptap/extension-character-count": "^2.0.0-beta.220",
    "@uppy/core": "^3.1.1",
    "@uppy/dashboard": "^3.3.1",
--- a/console/pnpm-lock.yaml
+++ b/console/pnpm-lock.yaml
@ -23,7 +23,7 @@ importers:
      '@rushstack/eslint-patch': ^1.2.0
      '@tailwindcss/aspect-ratio': ^0.4.2
      '@tailwindcss/container-queries': ^0.1.0
-      '@tanstack/vue-query': ^4.24.10
+      '@tanstack/vue-query': ^4.29.1
      '@tiptap/extension-character-count': ^2.0.0-beta.220
      '@types/jsdom': ^20.0.1
      '@types/lodash.clonedeep': 4.5.7
@ -121,7 +121,7 @@ importers:
      '@halo-dev/components': link:packages/components
      '@halo-dev/console-shared': link:packages/shared
      '@halo-dev/richtext-editor': 0.0.0-alpha.22_4cvzv64gtscmble2r6ekkqbslu
-      '@tanstack/vue-query': 4.24.10_vue@3.2.45
+      '@tanstack/vue-query': 4.29.1_vue@3.2.45
      '@tiptap/extension-character-count': 2.0.0-beta.220_zz2rudi4omymftayy4ta3vci2y
      '@uppy/core': 3.1.1
      '@uppy/dashboard': 3.3.1_@uppy+core@3.1.1
@ -2766,7 +2766,7 @@ packages:
    dependencies:
      '@jridgewell/set-array': 1.1.2
      '@jridgewell/sourcemap-codec': 1.4.14
-      '@jridgewell/trace-mapping': 0.3.15
+      '@jridgewell/trace-mapping': 0.3.17
    dev: true

  /@jridgewell/resolve-uri/3.1.0:
@ -3308,12 +3308,12 @@ packages:
      remove-accents: 0.4.2
    dev: false

-  /@tanstack/query-core/4.24.10:
-    resolution: {integrity: sha512-2QywqXEAGBIUoTdgn1lAB4/C8QEqwXHj2jrCLeYTk2xVGtLiPEUD8jcMoeB2noclbiW2mMt4+Fq7fZStuz3wAQ==}
+  /@tanstack/query-core/4.29.1:
+    resolution: {integrity: sha512-vkPewLEG8ua0efo3SsVT0BcBtkq5RZX8oPhDAyKL+k/rdOYSQTEocfGEXSaBwIwsXeOGBUpfKqI+UmHvNqdWXg==}
    dev: false

-  /@tanstack/vue-query/4.24.10_vue@3.2.45:
-    resolution: {integrity: sha512-K9mtij3WpQquySsaNhyN5ZQT3oO6Y69J+OT2/NYQYvYCI1AL1S5/sQ1n2FtpyslgrJn9khSerFB7icbYcbcubA==}
+  /@tanstack/vue-query/4.29.1_vue@3.2.45:
+    resolution: {integrity: sha512-2/F12lOHQw3YQbHVKGZUTEuwxrws6UR3VEXNX/Obw2NLupmCYR7+dcBwwHQ75zUQngxLFQwHCJKX7Ne1Wyk/HA==}
    peerDependencies:
      '@vue/composition-api': ^1.1.2
      vue: ^2.5.0 || ^3.0.0
@ -3322,8 +3322,8 @@ packages:
        optional: true
    dependencies:
      '@tanstack/match-sorter-utils': 8.7.6
-      '@tanstack/query-core': 4.24.10
-      '@vue/devtools-api': 6.4.5
+      '@tanstack/query-core': 4.29.1
+      '@vue/devtools-api': 6.5.0
      vue: 3.2.45
      vue-demi: 0.13.11_vue@3.2.45
    dev: false
@ -5947,7 +5947,7 @@ packages:
      is-shared-array-buffer: 1.0.2
      is-string: 1.0.7
      is-weakref: 1.0.2
-      object-inspect: 1.12.2
+      object-inspect: 1.12.3
      object-keys: 1.1.1
      object.assign: 4.1.4
      regexp.prototype.flags: 1.4.3
@ -8680,12 +8680,8 @@ packages:
    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
    engines: {node: '>= 6'}

-  /object-inspect/1.12.2:
-    resolution: {integrity: sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==}
-
  /object-inspect/1.12.3:
    resolution: {integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==}
-    dev: true

  /object-keys/1.1.1:
    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
@ -9856,7 +9852,7 @@ packages:
    dependencies:
      call-bind: 1.0.2
      get-intrinsic: 1.1.3
-      object-inspect: 1.12.2
+      object-inspect: 1.12.3

  /signal-exit/3.0.7:
    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
--- a/console/src/composables/use-global-info.ts
+++ b/console/src/composables/use-global-info.ts
@ -15,7 +15,6 @@ export function useGlobalInfoFetch() {

      return data;
    },
-    refetchOnWindowFocus: false,
  });

  return {
--- a/console/src/main.ts
+++ b/console/src/main.ts
@ -21,15 +21,15 @@ import { useThemeStore } from "./stores/theme";
 import { useSystemStatesStore } from "./stores/system-states";
 import { useUserStore } from "./stores/user";
 import { useSystemConfigMapStore } from "./stores/system-configmap";
-import { VueQueryPlugin } from "@tanstack/vue-query";
+import { setupVueQuery } from "./setup/setupVueQuery";

 const app = createApp(App);

 setupComponents(app);
 setupI18n(app);
+setupVueQuery(app);

 app.use(createPinia());
-app.use(VueQueryPlugin);

 function registerModule(pluginModule: PluginModule, core: boolean) {
  if (pluginModule.components) {
--- a/console/src/modules/contents/attachments/components/AttachmentDetailModal.vue
+++ b/console/src/modules/contents/attachments/components/AttachmentDetailModal.vue
@ -56,7 +56,6 @@ const { data: policy } = useQuery({

    return data;
  },
-  refetchOnWindowFocus: false,
  enabled: computed(() => !!policyName.value),
 });

--- a/console/src/modules/contents/attachments/composables/use-attachment-group.ts
+++ b/console/src/modules/contents/attachments/composables/use-attachment-group.ts
@ -24,7 +24,6 @@ export function useFetchAttachmentGroup(): useFetchAttachmentGroupReturn {

      return deletingGroups?.length ? 1000 : false;
    },
-    refetchOnWindowFocus: false,
  });

  return {
--- a/console/src/modules/contents/attachments/composables/use-attachment-policy.ts
+++ b/console/src/modules/contents/attachments/composables/use-attachment-policy.ts
@ -29,7 +29,6 @@ export function useFetchAttachmentPolicy(): useFetchAttachmentPolicyReturn {
      );
      return deletingPolicies?.length ? 1000 : false;
    },
-    refetchOnWindowFocus: false,
  });

  return {
@ -47,7 +46,6 @@ export function useFetchAttachmentPolicyTemplate(): useFetchAttachmentPolicyTemp
        await apiClient.extension.storage.policyTemplate.liststorageHaloRunV1alpha1PolicyTemplate();
      return data.items;
    },
-    refetchOnWindowFocus: false,
  });

  return {
--- a/console/src/modules/contents/attachments/composables/use-attachment.ts
+++ b/console/src/modules/contents/attachments/composables/use-attachment.ts
@ -78,7 +78,6 @@ export function useAttachmentControl(filterOptions: {
      );
      return deletingAttachments?.length ? 3000 : false;
    },
-    refetchOnWindowFocus: false,
  });

  const handleSelectPrevious = async () => {
--- a/console/src/modules/contents/comments/CommentList.vue
+++ b/console/src/modules/contents/comments/CommentList.vue
@ -170,7 +170,6 @@ const {

    return data.items;
  },
-  refetchOnWindowFocus: false,
  refetchInterval(data) {
    const deletingComments = data?.filter(
      (comment) => !!comment.comment.metadata.deletionTimestamp
--- a/console/src/modules/contents/comments/components/CommentListItem.vue
+++ b/console/src/modules/contents/comments/components/CommentListItem.vue
@ -154,7 +154,6 @@ const {
    });
    return data.items;
  },
-  refetchOnWindowFocus: false,
  refetchInterval(data) {
    const deletingReplies = data?.filter(
      (reply) => !!reply.reply.metadata.deletionTimestamp
--- a/console/src/modules/contents/pages/DeletedSinglePageList.vue
+++ b/console/src/modules/contents/pages/DeletedSinglePageList.vue
@ -60,7 +60,6 @@ const {

    return data.items;
  },
-  refetchOnWindowFocus: false,
  refetchInterval(data) {
    const deletedSinglePages = data?.filter(
      (singlePage) =>
--- a/console/src/modules/contents/pages/SinglePageList.vue
+++ b/console/src/modules/contents/pages/SinglePageList.vue
@ -230,7 +230,6 @@ const {

    return data.items;
  },
-  refetchOnWindowFocus: false,
  refetchInterval(data) {
    const abnormalSinglePages = data?.filter((singlePage) => {
      const { spec, metadata, status } = singlePage.page;
--- a/console/src/modules/contents/posts/DeletedPostList.vue
+++ b/console/src/modules/contents/posts/DeletedPostList.vue
@ -60,7 +60,6 @@ const {

    return data.items;
  },
-  refetchOnWindowFocus: false,
  refetchInterval: (data) => {
    const deletingPosts = data?.filter(
      (post) =>
--- a/console/src/modules/contents/posts/PostList.vue
+++ b/console/src/modules/contents/posts/PostList.vue
@ -279,7 +279,6 @@ const {

    return abnormalPosts?.length ? 3000 : false;
  },
-  refetchOnWindowFocus: false,
 });

 const handleOpenSettingModal = async (post: Post) => {
--- a/console/src/modules/contents/posts/categories/composables/use-post-category.ts
+++ b/console/src/modules/contents/posts/categories/composables/use-post-category.ts
@ -43,7 +43,6 @@ export function usePostCategory(): usePostCategoryReturn {
      );
      return abnormalCategories?.length ? 3000 : false;
    },
-    refetchOnWindowFocus: false,
    onSuccess(data) {
      categoriesTree.value = buildCategoriesTree(data);
    },
--- a/console/src/modules/contents/posts/tags/composables/use-post-tag.ts
+++ b/console/src/modules/contents/posts/tags/composables/use-post-tag.ts
@ -36,7 +36,6 @@ export function usePostTag(): usePostTagReturn {
      );
      return abnormalTags?.length ? 3000 : false;
    },
-    refetchOnWindowFocus: false,
  });

  const handleDelete = async (tag: Tag) => {
--- a/console/src/modules/contents/posts/widgets/RecentPublishedWidget.vue
+++ b/console/src/modules/contents/posts/widgets/RecentPublishedWidget.vue
@ -28,7 +28,6 @@ const { data } = useQuery<ListedPost[]>({
    });
    return data.items;
  },
-  refetchOnWindowFocus: false,
 });
 </script>
 <template>
--- a/console/src/modules/interface/menus/Menus.vue
+++ b/console/src/modules/interface/menus/Menus.vue
@ -62,7 +62,6 @@ const {
  onSuccess(data) {
    menuTreeItems.value = buildMenuItemsTree(data);
  },
-  refetchOnWindowFocus: false,
  refetchInterval(data) {
    const deletingMenuItems = data?.filter(
      (menuItem) => !!menuItem.metadata.deletionTimestamp
--- a/console/src/modules/interface/menus/components/MenuList.vue
+++ b/console/src/modules/interface/menus/components/MenuList.vue
@ -55,7 +55,6 @@ const {
    });
    return data.items;
  },
-  refetchOnWindowFocus: false,
  onSuccess(data) {
    if (props.selectedMenu) {
      const updatedMenu = data?.find(
@ -153,7 +152,6 @@ const { data: primaryMenuName, refetch: refetchPrimaryMenuName } = useQuery({

    return menuConfig.primary;
  },
-  refetchOnWindowFocus: false,
 });

 const handleSetPrimaryMenu = async (menu: Menu) => {
--- a/console/src/modules/interface/themes/ThemeSetting.vue
+++ b/console/src/modules/interface/themes/ThemeSetting.vue
@ -34,7 +34,6 @@ const { data: configMap, suspense } = useQuery<ConfigMap>({
    });
    return data;
  },
-  refetchOnWindowFocus: false,
  enabled: computed(() => {
    return !!setting.value && !!selectedTheme?.value;
  }),
--- a/console/src/modules/interface/themes/components/ThemeListModal.vue
+++ b/console/src/modules/interface/themes/components/ThemeListModal.vue
@ -68,7 +68,6 @@ const {
    });
    return data.items;
  },
-  refetchOnWindowFocus: false,
  refetchInterval(data) {
    if (activeTab.value !== "installed") {
      return false;
--- a/console/src/modules/interface/themes/components/preview/ThemePreviewModal.vue
+++ b/console/src/modules/interface/themes/components/preview/ThemePreviewModal.vue
@ -71,7 +71,6 @@ const { data: themes } = useQuery<Theme[]>({
    });
    return data.items;
  },
-  refetchOnWindowFocus: false,
  enabled: computed(() => props.visible),
 });

@ -138,7 +137,6 @@ const { data: setting } = useQuery<Setting>({

    return data;
  },
-  refetchOnWindowFocus: false,
  onSuccess(data) {
    if (data) {
      const { forms } = data.spec;
@ -165,7 +163,6 @@ const { data: configMap, refetch: handleFetchConfigMap } = useQuery<ConfigMap>({
    });
    return data;
  },
-  refetchOnWindowFocus: false,
  enabled: computed(
    () => !!setting.value && !!selectedTheme.value?.spec.configMapName
  ),
--- a/console/src/modules/interface/themes/layouts/ThemeLayout.vue
+++ b/console/src/modules/interface/themes/layouts/ThemeLayout.vue
@ -78,7 +78,6 @@ const { data: setting } = useQuery<Setting>({
    });
    return data;
  },
-  refetchOnWindowFocus: false,
  enabled: computed(() => {
    return (
      !!selectedTheme.value &&
--- a/console/src/modules/system/auth-providers/AuthProviderDetail.vue
+++ b/console/src/modules/system/auth-providers/AuthProviderDetail.vue
@ -48,7 +48,6 @@ const { data: authProvider } = useQuery<AuthProvider>({
      });
    }
  },
-  refetchOnWindowFocus: false,
  enabled: computed(() => !!route.params.name),
 });

@ -74,7 +73,6 @@ const { data: setting, refetch: handleFetchSettings } = useQuery<Setting>({
    );
    return data;
  },
-  refetchOnWindowFocus: false,
  enabled: computed(() => !!authProvider.value?.spec.settingRef?.name),
 });

@ -95,7 +93,6 @@ const { data: configMap, refetch: handleFetchConfigMap } = useQuery({
    return data;
  },
  retry: 0,
-  refetchOnWindowFocus: false,
  onError: async () => {
    const data = {};
    data[group.value] = "";
--- a/console/src/modules/system/auth-providers/AuthProviders.vue
+++ b/console/src/modules/system/auth-providers/AuthProviders.vue
@ -20,7 +20,6 @@ const {
    const { data } = await apiClient.authProvider.listAuthProviders();
    return data;
  },
-  refetchOnWindowFocus: false,
 });
 </script>

--- a/console/src/modules/system/plugins/PluginList.vue
+++ b/console/src/modules/system/plugins/PluginList.vue
@ -137,7 +137,6 @@ const { data, isLoading, isFetching, refetch } = useQuery<Plugin[]>({

    return data.items;
  },
-  refetchOnWindowFocus: false,
  keepPreviousData: true,
  refetchInterval: (data) => {
    const deletingPlugins = data?.filter(
--- a/console/src/modules/system/plugins/PluginSetting.vue
+++ b/console/src/modules/system/plugins/PluginSetting.vue
@ -33,7 +33,6 @@ const { data: configMap, suspense } = useQuery<ConfigMap>({
    });
    return data;
  },
-  refetchOnWindowFocus: false,
  enabled: computed(() => {
    return !!setting.value && !!plugin?.value;
  }),
--- a/console/src/modules/system/plugins/layouts/PluginLayout.vue
+++ b/console/src/modules/system/plugins/layouts/PluginLayout.vue
@ -63,7 +63,6 @@ const { data: plugin } = useQuery({
      });
    return data;
  },
-  refetchOnWindowFocus: false,
 });

 provide<Ref<Plugin | undefined>>("plugin", plugin);
@ -76,7 +75,6 @@ const { data: setting } = useQuery({
    });
    return data;
  },
-  refetchOnWindowFocus: false,
  enabled: computed(() => {
    return (
      !!plugin.value &&
--- a/console/src/modules/system/settings/SystemSetting.vue
+++ b/console/src/modules/system/settings/SystemSetting.vue
@ -32,7 +32,6 @@ const { data: configMap, suspense } = useQuery<ConfigMap>({
    });
    return data;
  },
-  refetchOnWindowFocus: false,
  enabled: computed(() => !!setting.value),
 });

--- a/console/src/modules/system/settings/layouts/SystemSettingsLayout.vue
+++ b/console/src/modules/system/settings/layouts/SystemSettingsLayout.vue
@ -50,7 +50,6 @@ const { data: setting } = useQuery({
    });
    return data;
  },
-  refetchOnWindowFocus: false,
  async onSuccess(data) {
    if (data) {
      const { forms } = data.spec;
--- a/console/src/modules/system/users/UserDetail.vue
+++ b/console/src/modules/system/users/UserDetail.vue
@ -30,7 +30,6 @@ const { data: authProviders, isFetching } = useQuery<ListedAuthProvider[]>({
    const { data } = await apiClient.authProvider.listAuthProviders();
    return data;
  },
-  refetchOnWindowFocus: false,
  enabled: isCurrentUser,
 });

--- a/console/src/modules/system/users/UserList.vue
+++ b/console/src/modules/system/users/UserList.vue
@ -144,7 +144,6 @@ const {

    return data.items;
  },
-  refetchOnWindowFocus: false,
  refetchInterval(data) {
    const deletingUsers = data?.filter(
      (user) => !!user.user.metadata.deletionTimestamp
--- a/console/src/modules/system/users/layouts/UserProfileLayout.vue
+++ b/console/src/modules/system/users/layouts/UserProfileLayout.vue
@ -65,7 +65,6 @@ const {
      return data;
    }
  },
-  refetchOnWindowFocus: false,
 });

 const isCurrentUser = computed(() => {
--- a/console/src/setup/setupVueQuery.ts
+++ b/console/src/setup/setupVueQuery.ts
@ -0,0 +1,19 @@
+import type { App } from "vue";
+import {
+  VueQueryPlugin,
+  type VueQueryPluginOptions,
+} from "@tanstack/vue-query";
+
+const options: VueQueryPluginOptions = {
+  queryClientConfig: {
+    defaultOptions: {
+      queries: {
+        refetchOnWindowFocus: false,
+      },
+    },
+  },
+};
+
+export function setupVueQuery(app: App) {
+  app.use(VueQueryPlugin, options);
+}