Merge pull request #405

refactor(renovate): Upgrade ReactQuery to v5

* refactor(renovate): upgrade react query to v5

* refactor(renovate): refactor queries and mutations

* fix(renovate): fix dev tool

* chore(renovate): add eslint for react-query

* fix(renovate): fix react-query keys (eslint)

* fix(renovate): update pnpm for node v20

* chore(19269): linting and code improvement

Author: vanch3d

.github/actions/setup_node/action.yml

@@ -11,7 +11,7 @@ inputs:
 runs:
   using: "composite"
   steps:
-    - uses: pnpm/action-setup@v2
+    - uses: pnpm/action-setup@v3
       name: Install pnpm
       id: pnpm-install
       with:

hivemq-edge/src/frontend/.eslintrc.cjs

@@ -6,6 +6,7 @@ module.exports = {
     'plugin:react/recommended',
     'plugin:react-hooks/recommended',
     'plugin:cypress/recommended',
+    'plugin:@tanstack/eslint-plugin-query/recommended',
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },

hivemq-edge/src/frontend/package.json

@@ -44,8 +44,8 @@
     "@rjsf/core": "^5.15.1",
     "@rjsf/utils": "^5.15.1",
     "@rjsf/validator-ajv8": "^5.15.1",
-    "@tanstack/react-query": "^4.29.7",
-    "@tanstack/react-query-devtools": "^4.29.7",
+    "@tanstack/react-query": "^5.32.1",
+    "@tanstack/react-query-devtools": "^5.32.1",
     "@tanstack/react-table": "^8.9.3",
     "@tiptap/extension-document": "^2.2.4",
     "@tiptap/extension-mention": "^2.2.4",
@@ -89,6 +89,7 @@
     "@chakra-ui/cli": "^2.4.1",
     "@percy/cli": "^1.24.2",
     "@percy/cypress": "^3.1.2",
+    "@tanstack/eslint-plugin-query": "^5.32.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.1",

hivemq-edge/src/frontend/pnpm-lock.yaml

@@ -6,18 +6,10 @@ import { QUERY_KEYS } from '@/api/utils.ts'
 export const useGetAdaptersStatus = () => {
   const appClient = useHttpClient()
 
-  return useQuery(
-    [QUERY_KEYS.ADAPTERS, QUERY_KEYS.CONNECTION_STATUS],
-    async () => {
-      const item = await appClient.protocolAdapters.getAdaptersStatus()
-      return item
-    },
-    {
-      retry: 0,
-      refetchInterval: () => {
-        // return data ? 4 * 1000 : Math.max(Math.min(query.state.errorUpdateCount, 5 * 60), 4) * 1000
-        return config.httpClient.pollingRefetchInterval
-      },
-    }
-  )
+  return useQuery({
+    queryKey: [QUERY_KEYS.ADAPTERS, QUERY_KEYS.CONNECTION_STATUS],
+    queryFn: () => appClient.protocolAdapters.getAdaptersStatus(),
+    retry: 0,
+    refetchInterval: config.httpClient.pollingRefetchInterval,
+  })
 }

hivemq-edge/src/frontend/src/api/hooks/useConnection/useGetAdaptersStatus.tsx

@@ -6,18 +6,10 @@ import { QUERY_KEYS } from '@/api/utils.ts'
 export const useGetBridgesStatus = () => {
   const appClient = useHttpClient()
 
-  return useQuery(
-    [QUERY_KEYS.BRIDGES, QUERY_KEYS.CONNECTION_STATUS],
-    async () => {
-      const item = await appClient.bridges.getBridgesStatus()
-      return item
-    },
-    {
-      retry: 0,
-      refetchInterval: () => {
-        // return data ? 4 * 1000 : Math.max(Math.min(query.state.errorUpdateCount, 5 * 60), 4) * 1000
-        return config.httpClient.pollingRefetchInterval
-      },
-    }
-  )
+  return useQuery({
+    queryKey: [QUERY_KEYS.BRIDGES, QUERY_KEYS.CONNECTION_STATUS],
+    queryFn: () => appClient.bridges.getBridgesStatus(),
+    retry: 0,
+    refetchInterval: config.httpClient.pollingRefetchInterval,
+  })
 }

hivemq-edge/src/frontend/src/api/hooks/useConnection/useGetBridgesStatus.tsx

@@ -6,7 +6,8 @@ import { QUERY_KEYS } from '@/api/utils.ts'
 export const useGetEvents = () => {
   const appClient = useHttpClient()
 
-  return useQuery<EventList, ApiError>([QUERY_KEYS.EVENTS], async () => {
-    return await appClient.events.getEvents()
+  return useQuery<EventList, ApiError>({
+    queryKey: [QUERY_KEYS.EVENTS],
+    queryFn: () => appClient.events.getEvents(),
   })
 }