Integrate Tanstack Query for handling errors and retries for the opinion/analysis tab (#366)

* Fix cluster size and prevent image drag

* Add y offset for cluster label

* Initial integration with TanStack for handling data errors

* Fix bug where opinions not shown if watcher misses it

* Update delete comment API to use the new query system

* Add proper typing to all translation files

* Move composable unrelated to the api

* Add basic error UI for comments

* Create AsyncDataHandler so we can reuse the loading state management for other parts of the code

* Fixed the loading initialization bug

* Move composable file to the utils folder

* Delete the old composable api folder

* Update to the new analysis API endpoint

* Rename reusable component to ZKLoadingState

* Move to another folder

* Adapt the analysis page to use the new state component

* Simplify the async state handler's props

* Fix i18n translation

* Fix the loading delay for comment section

* Clear tanstack data upon logout

* Update all the comment APIs to throw errors for Tanstack

* Clear tanstack data when user logs in

* Add test page for the state handler

* Switch the loading indicator

* Simplify the props for AsyncStateHandler

* Fix locked post check

* Fix moderation permission

* Fix the props for loading handler

* Cleanup old i18n key

* Add i18n translation for the analysis page

* Update some packages

* Update a few more packages

* More packages updated

* Update vue-tsc

* Apply refresh data fixes

* Fix reactivity on tab switching

* Fix data reactivity

* Remove unused imports

* Simplify conversation data composable

* Improve accessibility

* Fixed opinion draft clearing bug

* Reset the highlighting when user changes the filter

* Update typescript to 5.9.2

* Update maz-ui to v4

* Improve the opinion pagination

* Move opinion not found to its own component

* Split the code into composables

* Fix the optimistic vote update

* Fix maz ui config

* Revert maz-ui

* Add transition animation

* Move to always mount the two tabs for conversations

* Align terms to tanstack states

* Add clarification comment on the staleness

* Fix bug where user votes are fetched when unauthenticated

* Fix loading bug when entering a conversation

* Always refresh the cache when loading a conversation

* Add loading indicator when comments or analysis tab is loading

* Cleanup i18n old key

* Add a cache flashing fix

* Prevent immediate refetch when user switches tabs

* Add local vote tracking to delay the update of the analysis tab

* Switch to mount each tab one at a time to simplify the design

* Move all the cachable queries to the PostDetails

* Force refresh analysis cache when a comment is submitted

* Fix bug where no opinion message wasn't showing properly

Author: e32wong

services/agora/package.json

@@ -34,64 +34,65 @@
   "dependencies": {
     "@aparajita/capacitor-biometric-auth": "^8.0.0",
     "@aparajita/capacitor-secure-storage": "^6.0.1",
-    "@dicebear/collection": "^9.2.2",
-    "@dicebear/core": "^9.2.2",
-    "@primeuix/themes": "^1.2.1",
+    "@dicebear/collection": "^9.2.4",
+    "@dicebear/core": "^9.2.4",
+    "@primeuix/themes": "^1.2.3",
     "@quasar/extras": "^1.17.0",
     "@sentry/vite-plugin": "^4.3.0",
     "@sentry/vue": "^10.13.0",
+    "@tanstack/vue-query": "^5.89.0",
     "@ucans/ucans": "^0.12.0",
-    "@vueuse/core": "^13.1.0",
-    "@vueuse/integrations": "^13.1.0",
-    "@vueuse/router": "^13.1.0",
+    "@vueuse/core": "^13.9.0",
+    "@vueuse/integrations": "^13.9.0",
+    "@vueuse/router": "^13.9.0",
     "@zkorum/capacitor-secure-signing": "^1.4.0",
     "@zkorum/keystore-idb": "^0.18.1",
-    "axios": "^1.11.0",
+    "axios": "^1.12.2",
     "buffer": "^6.0.3",
-    "cborg": "^4.2.12",
-    "libphonenumber-js": "^1.12.7",
-    "linkify-html": "^4.3.1",
-    "linkifyjs": "^4.3.1",
+    "cborg": "^4.2.15",
+    "libphonenumber-js": "^1.12.17",
+    "linkify-html": "^4.3.2",
+    "linkifyjs": "^4.3.2",
     "maz-ui": "^3.50.1",
-    "multiformats": "^13.3.0",
+    "multiformats": "^13.4.1",
     "pinia": "^3.0.2",
     "primeicons": "^7.0.0",
-    "primevue": "^4.3.6",
+    "primevue": "^4.3.9",
     "qrcode": "^1",
-    "quasar": "^2.18.2",
+    "quasar": "^2.18.5",
     "sanitize-html": "^2.16.0",
-    "swiper": "^11.2.6",
+    "swiper": "^12.0.2",
     "tweetnacl": "^1.0.3",
     "uint8arrays": "^5.1.0",
-    "vue": "^3.5.18",
-    "vue-i18n": "^11.1.11",
+    "vue": "^3.5.21",
+    "vue-i18n": "^11.1.12",
     "vue-router": "^4.5.1",
-    "zod": "^4.0.9"
+    "zod": "^4.1.9"
   },
   "devDependencies": {
-    "@eslint/js": "^9.14.0",
-    "@eslint/json": "^0.13.1",
+    "@eslint/js": "^9.35.0",
+    "@eslint/json": "^0.13.2",
     "@iconify/vue": "^5.0.0",
-    "@quasar/app-vite": "^2.3.0",
-    "@types/node": "^24.1.0",
+    "@quasar/app-vite": "2.3.0",
+    "@types/node": "^24.5.2",
     "@types/sanitize-html": "^2.13.0",
     "@vitejs/plugin-basic-ssl": "^2.0.0",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.6.0",
     "autoprefixer": "^10.4.21",
-    "dotenv": "^17.2.0",
-    "env-cmd": "^10.1.0",
-    "eslint": "^9.14.0",
-    "eslint-plugin-vue": "^10.3.0",
-    "globals": "^16.3.0",
+    "dotenv": "^17.2.2",
+    "env-cmd": "^11.0.0",
+    "eslint": "^9.35.0",
+    "eslint-plugin-vue": "^10.4.0",
+    "globals": "^16.4.0",
     "prettier": "^3.4.2",
-    "typescript": "5.5.4",
+    "typescript": "5.9.2",
     "unplugin-vue-router": "^0.15.0",
-    "vite-plugin-checker": "^0.10.1",
-    "vue-tsc": "^2.2.12"
+    "vite-plugin-checker": "^0.10.3",
+    "vue-tsc": "^3.0.7"
   },
   "engines": {
-    "node": "^24 || ^22 || ^20 || ^18",
+    "node": "^24 || ^22 || ^20",
     "npm": ">= 6.13.4",
     "yarn": ">= 1.21.1"
   }

services/agora/quasar.config.ts

@@ -14,7 +14,7 @@ export default defineConfig((ctx) => {
   if (ctx.prod && process.env.VITE_STAGING !== "true") {
     boot.push("sentry");
   }
-  boot.push(...["i18n", "axios", "primevue", "maz-ui"]);
+  boot.push(...["i18n", "axios", "primevue", "maz-ui", "vue-query"]);
   console.log("Loaded boot files", boot);
 
   return {

services/agora/src/boot/vue-query.ts

@@ -0,0 +1,65 @@
+import { boot } from "quasar/wrappers";
+import { VueQueryPlugin, QueryClient } from "@tanstack/vue-query";
+import type { AxiosErrorResponse } from "src/utils/api/common";
+import { isTimeoutError, shouldRetryError } from "src/utils/api/common";
+
+// Create a client with custom configuration for our timeout and retry needs
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      // Default stale time - data considered fresh for 5 minutes
+      staleTime: 1000 * 60 * 5,
+      // Cache time - keep unused data for 10 minutes
+      gcTime: 1000 * 60 * 10,
+      // Retry configuration based on our error handling logic
+      retry: (failureCount, error) => {
+        // Don't retry more than 3 times
+        if (failureCount >= 3) return false;
+
+        // Check if it's an Axios error and should be retried
+        const axiosError = error as AxiosErrorResponse;
+        if (axiosError.code) {
+          return shouldRetryError(axiosError.code);
+        }
+
+        // For non-Axios errors, retry network and server errors
+        return (
+          error instanceof Error &&
+          (error.message.includes("Network") ||
+            error.message.includes("timeout") ||
+            error.message.includes("fetch"))
+        );
+      },
+      // Exponential backoff with jitter
+      retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
+      // Keep data fresh while refetching in background
+      refetchOnWindowFocus: false,
+      // Background refetch interval for important data
+      refetchInterval: false,
+    },
+    mutations: {
+      // Retry mutations for timeout/network errors
+      retry: (failureCount, error) => {
+        if (failureCount >= 2) return false;
+
+        const axiosError = error as AxiosErrorResponse;
+        if (axiosError.code) {
+          return (
+            isTimeoutError(axiosError.code) || axiosError.code === "ERR_NETWORK"
+          );
+        }
+
+        return false;
+      },
+      retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 10000),
+    },
+  },
+});
+
+export default boot(({ app }) => {
+  app.use(VueQueryPlugin, {
+    queryClient,
+  });
+});
+
+export { queryClient };

services/agora/src/components/account/EmbedAccountWidget.i18n.ts

@@ -1,10 +1,12 @@
+import type { SupportedDisplayLanguageCodes } from "src/shared/languages";
+
 export interface EmbedAccountWidgetTranslations {
   logoutButton: string;
   logoutTooltip: string;
 }
 
 export const embedAccountWidgetTranslations: Record<
-  string,
+  SupportedDisplayLanguageCodes,
   EmbedAccountWidgetTranslations
 > = {
   en: {

services/agora/src/components/account/EmbedAccountWidget.vue

@@ -30,7 +30,7 @@
 
 <script setup lang="ts">
 import { storeToRefs } from "pinia";
-import { useComponentI18n } from "src/composables/useComponentI18n";
+import { useComponentI18n } from "src/composables/ui/useComponentI18n";
 import { useAuthenticationStore } from "src/stores/authentication";
 import { useUserStore } from "src/stores/user";
 import { useAuthSetup } from "src/utils/auth/setup";

services/agora/src/components/account/UsernameChange.i18n.ts

@@ -1,15 +1,16 @@
+import type { SupportedDisplayLanguageCodes } from "src/shared/languages";
+
 export interface UsernameChangeTranslations {
   usernameLabel: string;
   updateButton: string;
   usernameChanged: string;
   usernameAlreadyInUse: string;
   usernameCurrentlyInUse: string;
   submitError: string;
-  [key: string]: string;
 }
 
 export const usernameChangeTranslations: Record<
-  string,
+  SupportedDisplayLanguageCodes,
   UsernameChangeTranslations
 > = {
   en: {

services/agora/src/components/account/UsernameChange.vue

@@ -48,7 +48,7 @@ import { useUserStore } from "src/stores/user";
 import { storeToRefs } from "pinia";
 import { useNotify } from "src/utils/ui/notify";
 import { useCommonApi } from "src/utils/api/common";
-import { useComponentI18n } from "src/composables/useComponentI18n";
+import { useComponentI18n } from "src/composables/ui/useComponentI18n";
 import {
   usernameChangeTranslations,
   type UsernameChangeTranslations,

services/agora/src/components/administrator/organization/CreateOrganizationForm.i18n.ts

@@ -1,3 +1,5 @@
+import type { SupportedDisplayLanguageCodes } from "src/shared/languages";
+
 export interface CreateOrganizationFormTranslations {
   nameLabel: string;
   descriptionLabel: string;
@@ -9,7 +11,7 @@ export interface CreateOrganizationFormTranslations {
 }
 
 export const createOrganizationFormTranslations: Record<
-  string,
+  SupportedDisplayLanguageCodes,
   CreateOrganizationFormTranslations
 > = {
   en: {

services/agora/src/components/administrator/organization/CreateOrganizationForm.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-import { useComponentI18n } from "src/composables/useComponentI18n";
+import { useComponentI18n } from "src/composables/ui/useComponentI18n";
 import ZKButton from "src/components/ui-library/ZKButton.vue";
 import { useBackendAdministratorOrganizationApi } from "src/utils/api/administrator/organization";
 import { ref } from "vue";

services/agora/src/components/administrator/organization/DeleteOrganizationForm.i18n.ts

@@ -1,10 +1,11 @@
+import type { SupportedDisplayLanguageCodes } from "src/shared/languages";
+
 export interface DeleteOrganizationFormTranslations {
   noOrganizationsMessage: string;
-  [key: string]: string;
 }
 
 export const deleteOrganizationFormTranslations: Record<
-  string,
+  SupportedDisplayLanguageCodes,
   DeleteOrganizationFormTranslations
 > = {
   en: {