diff --git a/react/package.json b/react/package.json index a45ab83914..145735aff1 100644 --- a/react/package.json +++ b/react/package.json @@ -10,6 +10,7 @@ "@cloudscape-design/board-components": "3.0.60", "@codemirror/language": "^6.10.2", "@storybook/test": "^8.2.8", + "@tanstack/react-query": "^5.51.15", "@testing-library/jest-dom": "^6.4.8", "@testing-library/react": "^15.0.7", "@types/jest": "^29.5.12", @@ -42,7 +43,6 @@ "react-error-boundary": "^4.0.13", "react-i18next": "^14.1.3", "react-markdown": "^9.0.1", - "react-query": "^3.39.3", "react-relay": "^16.2.0", "react-router-dom": "^6.26.0", "react-scripts": "5.0.1", @@ -100,6 +100,7 @@ "@storybook/react": "^8.2.8", "@storybook/react-webpack5": "^8.2.8", "@storybook/testing-library": "^0.2.2", + "@tanstack/eslint-plugin-query": "^5.51.15", "@testing-library/user-event": "^14.5.2", "@types/react-copy-to-clipboard": "^5.0.7", "@types/react-relay": "^16.0.6", diff --git a/react/pnpm-lock.yaml b/react/pnpm-lock.yaml index 7e6ac96b9e..acedc95a14 100644 --- a/react/pnpm-lock.yaml +++ b/react/pnpm-lock.yaml @@ -29,6 +29,9 @@ importers: '@storybook/test': specifier: ^8.2.8 version: 8.2.8(@types/jest@29.5.12)(jest@27.5.1(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4)))(storybook@8.2.8(@babel/preset-env@7.25.3(@babel/core@7.25.2))) + '@tanstack/react-query': + specifier: ^5.51.15 + version: 5.51.23(react@18.3.1) '@testing-library/jest-dom': specifier: ^6.4.8 version: 6.4.8 @@ -125,9 +128,6 @@ importers: react-markdown: specifier: ^9.0.1 version: 9.0.1(@types/react@18.3.3)(react@18.3.1) - react-query: - specifier: ^3.39.3 - version: 3.39.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react-relay: specifier: ^16.2.0 version: 16.2.0(react@18.3.1) @@ -192,6 +192,9 @@ importers: '@storybook/testing-library': specifier: ^0.2.2 version: 0.2.2 + '@tanstack/eslint-plugin-query': + specifier: ^5.51.15 + version: 5.51.15(eslint@8.57.0)(typescript@5.5.4) '@testing-library/user-event': specifier: ^14.5.2 version: 14.5.2(@testing-library/dom@10.1.0) @@ -2302,6 +2305,19 @@ packages: resolution: {integrity: sha512-DOBOK255wfQxguUta2INKkzPj6AIS6iafZYiYmHn6W3pHlycSRRlvWKCfLDG10fXfLWqE3DJHgRUOyJYmARa7g==} engines: {node: '>=10'} + '@tanstack/eslint-plugin-query@5.51.15': + resolution: {integrity: sha512-btX03EOGvNxTGJDqHMmQwfSt/hp93Z8I4FNBijoyEdDnjGi4jVjpGP7nEi9LaMnHFsylucptVGb6GQngWs07bA==} + peerDependencies: + eslint: ^8 || ^9 + + '@tanstack/query-core@5.51.21': + resolution: {integrity: sha512-POQxm42IUp6n89kKWF4IZi18v3fxQWFRolvBA6phNVmA8psdfB1MvDnGacCJdS+EOX12w/CyHM62z//rHmYmvw==} + + '@tanstack/react-query@5.51.23': + resolution: {integrity: sha512-CfJCfX45nnVIZjQBRYYtvVMIsGgWLKLYC4xcUiYEey671n1alvTZoCBaU9B85O8mF/tx9LPyrI04A6Bs2THv4A==} + peerDependencies: + react: ^18.0.0 + '@testing-library/dom@10.1.0': resolution: {integrity: sha512-wdsYKy5zupPyLCW2Je5DLHSxSfbIp6h80WoHOQc+RPtmPGA52O9x5MJEkv92Sjonpq+poOAtUKhh1kBGAXBrNA==} engines: {node: '>=18'} @@ -2635,6 +2651,10 @@ packages: resolution: {integrity: sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + '@typescript-eslint/scope-manager@8.0.0-alpha.30': + resolution: {integrity: sha512-FGW/iPWGyPFamAVZ60oCAthMqQrqafUGebF8UKuq/ha+e9SVG6YhJoRzurlQXOVf8dHfOhJ0ADMXyFnMc53clg==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + '@typescript-eslint/type-utils@5.62.0': resolution: {integrity: sha512-xsSQreu+VnfbqQpW5vnCJdq1Z3Q0U31qiWmRhr98ONQmcp/yhiPJFPq8MXiJVLiksmOKSjIldZzkebzHuCGzew==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} @@ -2649,6 +2669,10 @@ packages: resolution: {integrity: sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + '@typescript-eslint/types@8.0.0-alpha.30': + resolution: {integrity: sha512-4WzLlw27SO9pK9UFj/Hu7WGo8WveT0SEiIpFVsV2WwtQmLps6kouwtVCB8GJPZKJyurhZhcqCoQVQFmpv441Vg==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + '@typescript-eslint/typescript-estree@5.62.0': resolution: {integrity: sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} @@ -2658,16 +2682,35 @@ packages: typescript: optional: true + '@typescript-eslint/typescript-estree@8.0.0-alpha.30': + resolution: {integrity: sha512-WSXbc9ZcXI+7yC+6q95u77i8FXz6HOLsw3ST+vMUlFy1lFbXyFL/3e6HDKQCm2Clt0krnoCPiTGvIn+GkYPn4Q==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + peerDependencies: + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + '@typescript-eslint/utils@5.62.0': resolution: {integrity: sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 + '@typescript-eslint/utils@8.0.0-alpha.30': + resolution: {integrity: sha512-rfhqfLqFyXhHNDwMnHiVGxl/Z2q/3guQ1jLlGQ0hi9Rb7inmwz42crM+NnLPR+2vEnwyw1P/g7fnQgQ3qvFx4g==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + peerDependencies: + eslint: ^8.57.0 || ^9.0.0 + '@typescript-eslint/visitor-keys@5.62.0': resolution: {integrity: sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + '@typescript-eslint/visitor-keys@8.0.0-alpha.30': + resolution: {integrity: sha512-XZuNurZxBqmr6ZIRIwWFq7j5RZd6ZlkId/HZEWyfciK+CWoyOxSF9Pv2VXH9Rlu2ZG2PfbhLz2Veszl4Pfn7yA==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + '@uiw/codemirror-extensions-basic-setup@4.23.0': resolution: {integrity: sha512-+k5nkRpUWGaHr1JWT8jcKsVewlXw5qBgSopm9LW8fZ6KnSNZBycz8kHxh0+WSvckmXEESGptkIsb7dlkmJT/hQ==} peerDependencies: @@ -3165,10 +3208,6 @@ packages: resolution: {integrity: sha512-I6MMLkn+anzNdCUp9hMRyui1HaNEUCco50lxbvNS4+EyXg8lN3nJ48PjPWtbH8UVS9CuMoaKE9U2V3l29DaRQw==} engines: {node: '>= 8.0.0'} - big-integer@1.6.52: - resolution: {integrity: sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==} - engines: {node: '>=0.6'} - big.js@5.2.2: resolution: {integrity: sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==} @@ -3202,9 +3241,6 @@ packages: resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==} engines: {node: '>=8'} - broadcast-channel@3.7.0: - resolution: {integrity: sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==} - browser-assert@1.2.1: resolution: {integrity: sha512-nfulgvOR6S4gt9UKCeGJOuSGBPGiFT6oQ/2UBnvTY/5aQ1PnksW72fhZkM30DzoRRv2WpwZf1vHHEr3mtuXIWQ==} @@ -5356,9 +5392,6 @@ packages: js-cookie@2.2.1: resolution: {integrity: sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==} - js-sha3@0.8.0: - resolution: {integrity: sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q==} - js-tokens@4.0.0: resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==} @@ -5620,9 +5653,6 @@ packages: peerDependencies: react: '>= 0.14.0' - match-sorter@6.3.4: - resolution: {integrity: sha512-jfZW7cWS5y/1xswZo8VBOdudUiSd9nifYRWphc9M5D/ee4w4AoXLgBEdRbgVaxbMuagBPeUC5y2Hi8DO6o9aDg==} - mdast-util-from-markdown@2.0.1: resolution: {integrity: sha512-aJEUyzZ6TzlsX2s5B4Of7lN7EQtAxvtradMMglCQDyaTFgse6CmtmdJ15ElnVRlCg1vpNyVtbem0PWzlNieZsA==} @@ -5748,9 +5778,6 @@ packages: resolution: {integrity: sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==} engines: {node: '>=8.6'} - microseconds@0.2.0: - resolution: {integrity: sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA==} - mime-db@1.52.0: resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==} engines: {node: '>= 0.6'} @@ -5854,9 +5881,6 @@ packages: mz@2.7.0: resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==} - nano-time@1.0.0: - resolution: {integrity: sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA==} - nanoid@3.3.6: resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==} engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} @@ -6004,9 +6028,6 @@ packages: objectorarray@1.0.5: resolution: {integrity: sha512-eJJDYkhJFFbBBAxeh8xW+weHlkI28n2ZdQV/J/DNfWfSKlGEf2xcfAbZTv3riEXHAhL9SVOTs2pRmXiSTf78xg==} - oblivious-set@1.0.0: - resolution: {integrity: sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw==} - obuf@1.1.2: resolution: {integrity: sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==} @@ -7107,18 +7128,6 @@ packages: '@types/react': '>=18' react: '>=18' - react-query@3.39.3: - resolution: {integrity: sha512-nLfLz7GiohKTJDuT4us4X3h/8unOh+00MLb2yJoGTPjxKs2bc1iDhkNx2bd5MKklXnOD3NrVZ+J2UXujA5In4g==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: '*' - react-native: '*' - peerDependenciesMeta: - react-dom: - optional: true - react-native: - optional: true - react-refresh@0.11.0: resolution: {integrity: sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==} engines: {node: '>=0.10.0'} @@ -7278,9 +7287,6 @@ packages: remark-rehype@11.1.0: resolution: {integrity: sha512-z3tJrAs2kIs1AqIIy6pzHmAHlF1hWQ+OdY4/hv+Wxe35EhyLKcajL33iUEn3ScxtFox9nUvRufR/Zre8Q08H/g==} - remove-accents@0.5.0: - resolution: {integrity: sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==} - renderkid@3.0.0: resolution: {integrity: sha512-q/7VIQA8lmM1hF+jn+sFSPWGlMkSAeNYcPLmDQx2zzuiDfaLrOmumR8iaUKlenFgh0XRPIUeSPlH3A+AW3Z5pg==} @@ -7996,6 +8002,12 @@ packages: tryer@1.0.1: resolution: {integrity: sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==} + ts-api-utils@1.3.0: + resolution: {integrity: sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==} + engines: {node: '>=16'} + peerDependencies: + typescript: '>=4.2.0' + ts-dedent@2.2.0: resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==} engines: {node: '>=6.10'} @@ -8187,9 +8199,6 @@ packages: resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==} engines: {node: '>= 10.0.0'} - unload@2.2.0: - resolution: {integrity: sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==} - unpipe@1.0.0: resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==} engines: {node: '>= 0.8'} @@ -11434,6 +11443,21 @@ snapshots: transitivePeerDependencies: - supports-color + '@tanstack/eslint-plugin-query@5.51.15(eslint@8.57.0)(typescript@5.5.4)': + dependencies: + '@typescript-eslint/utils': 8.0.0-alpha.30(eslint@8.57.0)(typescript@5.5.4) + eslint: 8.57.0 + transitivePeerDependencies: + - supports-color + - typescript + + '@tanstack/query-core@5.51.21': {} + + '@tanstack/react-query@5.51.23(react@18.3.1)': + dependencies: + '@tanstack/query-core': 5.51.21 + react: 18.3.1 + '@testing-library/dom@10.1.0': dependencies: '@babel/code-frame': 7.24.7 @@ -11826,6 +11850,11 @@ snapshots: '@typescript-eslint/types': 5.62.0 '@typescript-eslint/visitor-keys': 5.62.0 + '@typescript-eslint/scope-manager@8.0.0-alpha.30': + dependencies: + '@typescript-eslint/types': 8.0.0-alpha.30 + '@typescript-eslint/visitor-keys': 8.0.0-alpha.30 + '@typescript-eslint/type-utils@5.62.0(eslint@8.57.0)(typescript@5.5.4)': dependencies: '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.5.4) @@ -11840,6 +11869,8 @@ snapshots: '@typescript-eslint/types@5.62.0': {} + '@typescript-eslint/types@8.0.0-alpha.30': {} + '@typescript-eslint/typescript-estree@5.62.0(typescript@5.5.4)': dependencies: '@typescript-eslint/types': 5.62.0 @@ -11854,6 +11885,21 @@ snapshots: transitivePeerDependencies: - supports-color + '@typescript-eslint/typescript-estree@8.0.0-alpha.30(typescript@5.5.4)': + dependencies: + '@typescript-eslint/types': 8.0.0-alpha.30 + '@typescript-eslint/visitor-keys': 8.0.0-alpha.30 + debug: 4.3.6(supports-color@5.5.0) + globby: 11.1.0 + is-glob: 4.0.3 + minimatch: 9.0.5 + semver: 7.6.3 + ts-api-utils: 1.3.0(typescript@5.5.4) + optionalDependencies: + typescript: 5.5.4 + transitivePeerDependencies: + - supports-color + '@typescript-eslint/utils@5.62.0(eslint@8.57.0)(typescript@5.5.4)': dependencies: '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0) @@ -11869,11 +11915,27 @@ snapshots: - supports-color - typescript + '@typescript-eslint/utils@8.0.0-alpha.30(eslint@8.57.0)(typescript@5.5.4)': + dependencies: + '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0) + '@typescript-eslint/scope-manager': 8.0.0-alpha.30 + '@typescript-eslint/types': 8.0.0-alpha.30 + '@typescript-eslint/typescript-estree': 8.0.0-alpha.30(typescript@5.5.4) + eslint: 8.57.0 + transitivePeerDependencies: + - supports-color + - typescript + '@typescript-eslint/visitor-keys@5.62.0': dependencies: '@typescript-eslint/types': 5.62.0 eslint-visitor-keys: 3.4.3 + '@typescript-eslint/visitor-keys@8.0.0-alpha.30': + dependencies: + '@typescript-eslint/types': 8.0.0-alpha.30 + eslint-visitor-keys: 3.4.3 + '@uiw/codemirror-extensions-basic-setup@4.23.0(@codemirror/autocomplete@6.18.0(@codemirror/language@6.10.2)(@codemirror/state@6.4.1)(@codemirror/view@6.30.0)(@lezer/common@1.2.1))(@codemirror/commands@6.6.0)(@codemirror/language@6.10.2)(@codemirror/lint@6.8.1)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.30.0)': dependencies: '@codemirror/autocomplete': 6.18.0(@codemirror/language@6.10.2)(@codemirror/state@6.4.1)(@codemirror/view@6.30.0)(@lezer/common@1.2.1) @@ -12619,8 +12681,6 @@ snapshots: jsonpath: 1.1.1 tryer: 1.0.1 - big-integer@1.6.52: {} - big.js@5.2.2: {} binary-extensions@2.3.0: {} @@ -12670,17 +12730,6 @@ snapshots: dependencies: fill-range: 7.1.1 - broadcast-channel@3.7.0: - dependencies: - '@babel/runtime': 7.25.0 - detect-node: 2.1.0 - js-sha3: 0.8.0 - microseconds: 0.2.0 - nano-time: 1.0.0 - oblivious-set: 1.0.0 - rimraf: 3.0.2 - unload: 2.2.0 - browser-assert@1.2.1: {} browser-process-hrtime@1.0.0: {} @@ -15340,8 +15389,6 @@ snapshots: js-cookie@2.2.1: {} - js-sha3@0.8.0: {} - js-tokens@4.0.0: {} js-yaml@3.14.1: @@ -15627,11 +15674,6 @@ snapshots: dependencies: react: 18.3.1 - match-sorter@6.3.4: - dependencies: - '@babel/runtime': 7.25.0 - remove-accents: 0.5.0 - mdast-util-from-markdown@2.0.1: dependencies: '@types/mdast': 4.0.4 @@ -15883,8 +15925,6 @@ snapshots: braces: 3.0.3 picomatch: 2.3.1 - microseconds@0.2.0: {} - mime-db@1.52.0: {} mime-db@1.53.0: {} @@ -15975,10 +16015,6 @@ snapshots: object-assign: 4.1.1 thenify-all: 1.6.0 - nano-time@1.0.0: - dependencies: - big-integer: 1.6.52 - nanoid@3.3.6: {} nanoid@3.3.7: {} @@ -16121,8 +16157,6 @@ snapshots: objectorarray@1.0.5: {} - oblivious-set@1.0.0: {} - obuf@1.1.2: {} ohash@1.1.3: {} @@ -17371,15 +17405,6 @@ snapshots: transitivePeerDependencies: - supports-color - react-query@3.39.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1): - dependencies: - '@babel/runtime': 7.25.0 - broadcast-channel: 3.7.0 - match-sorter: 6.3.4 - react: 18.3.1 - optionalDependencies: - react-dom: 18.3.1(react@18.3.1) - react-refresh@0.11.0: {} react-relay@16.2.0(react@18.3.1): @@ -17687,8 +17712,6 @@ snapshots: unified: 11.0.5 vfile: 6.0.2 - remove-accents@0.5.0: {} - renderkid@3.0.0: dependencies: css-select: 4.3.0 @@ -18489,6 +18512,10 @@ snapshots: tryer@1.0.1: {} + ts-api-utils@1.3.0(typescript@5.5.4): + dependencies: + typescript: 5.5.4 + ts-dedent@2.2.0: {} ts-interface-checker@0.1.13: {} @@ -18684,11 +18711,6 @@ snapshots: universalify@2.0.1: {} - unload@2.2.0: - dependencies: - '@babel/runtime': 7.25.0 - detect-node: 2.1.0 - unpipe@1.0.0: {} unplugin@1.12.1: diff --git a/react/src/components/AnnouncementAlert.tsx b/react/src/components/AnnouncementAlert.tsx index 843013ffb7..6b35bf1dc4 100644 --- a/react/src/components/AnnouncementAlert.tsx +++ b/react/src/components/AnnouncementAlert.tsx @@ -1,5 +1,5 @@ import { useSuspendedBackendaiClient } from '../hooks'; -import { useTanQuery } from '../hooks/reactQueryAlias'; +import { useSuspenseTanQuery } from '../hooks/reactQueryAlias'; import { Alert, theme } from 'antd'; import { AlertProps } from 'antd/lib'; import _ from 'lodash'; @@ -10,7 +10,7 @@ interface Props extends AlertProps {} const AnnouncementAlert: React.FC = ({ style, ...otherProps }) => { const baiClient = useSuspendedBackendaiClient(); const { token } = theme.useToken(); - const { data: announcement } = useTanQuery({ + const { data: announcement } = useSuspenseTanQuery({ queryKey: ['baiClient', 'service', 'get_announcement'], queryFn: () => { return baiClient.service.get_announcement(); diff --git a/react/src/components/DefaultProviders.tsx b/react/src/components/DefaultProviders.tsx index 9690086ee3..2f78904084 100644 --- a/react/src/components/DefaultProviders.tsx +++ b/react/src/components/DefaultProviders.tsx @@ -7,6 +7,7 @@ import { ThemeModeProvider, useThemeMode } from '../hooks/useThemeMode'; // @ts-ignore import indexCss from '../index.css?raw'; import { StyleProvider, createCache } from '@ant-design/cssinjs'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { useUpdateEffect } from 'ahooks'; import { App, AppProps, ConfigProvider, theme, Typography } from 'antd'; import en_US from 'antd/locale/en_US'; @@ -32,7 +33,6 @@ import React, { useState, } from 'react'; import { useTranslation, initReactI18next } from 'react-i18next'; -import { QueryClient, QueryClientProvider } from 'react-query'; import { RelayEnvironmentProvider } from 'react-relay'; import { BrowserRouter, useLocation, useNavigate } from 'react-router-dom'; import { QueryParamProvider } from 'use-query-params'; @@ -74,7 +74,6 @@ export const useWebComponentInfo = () => { const queryClient = new QueryClient({ defaultOptions: { queries: { - suspense: true, refetchOnWindowFocus: false, retry: false, }, diff --git a/react/src/components/EndpointTokenGenerationModal.tsx b/react/src/components/EndpointTokenGenerationModal.tsx index 70a3aec7be..f38979ba1b 100644 --- a/react/src/components/EndpointTokenGenerationModal.tsx +++ b/react/src/components/EndpointTokenGenerationModal.tsx @@ -86,7 +86,7 @@ const EndpointTokenGenerationModal: React.FC< onOk={handleOk} onCancel={handleCancel} okText={t('modelService.Generate')} - confirmLoading={mutationToGenerateToken.isLoading} + confirmLoading={mutationToGenerateToken.isPending} centered title={t('modelService.GenerateNewToken')} > diff --git a/react/src/components/FolderExplorer.tsx b/react/src/components/FolderExplorer.tsx index 4e0c8ba049..b4178a2543 100644 --- a/react/src/components/FolderExplorer.tsx +++ b/react/src/components/FolderExplorer.tsx @@ -1,6 +1,6 @@ // import { filesState, VirtualFolder } from "../../hooks/backendai"; import { useSuspendedBackendaiClient } from '../hooks'; -import { useTanQuery } from '../hooks/reactQueryAlias'; +import { useSuspenseTanQuery } from '../hooks/reactQueryAlias'; import Flex from './Flex'; import FolderDownloadButton from './FolderDownloadButton'; import { VFolder } from './VFolderSelect'; @@ -65,7 +65,7 @@ const FolderExplorer: React.FC = ({ const baiClient = useSuspendedBackendaiClient(); - const { data: fileList } = useTanQuery({ + const { data: fileList } = useSuspenseTanQuery({ queryKey: ['FolderExplorer', folderName, path.join('/')], queryFn: () => { if (!props.open || !folderName) { diff --git a/react/src/components/Information.tsx b/react/src/components/Information.tsx index 55ce64d06d..64d90db932 100644 --- a/react/src/components/Information.tsx +++ b/react/src/components/Information.tsx @@ -1,5 +1,6 @@ import { newLineToBrElement } from '../helper'; import { useSuspendedBackendaiClient } from '../hooks'; +import { useTanQuery } from '../hooks/reactQueryAlias'; import DescriptionLabel from './DescriptionLabel'; import DoubleTag from './DoubleTag'; import Flex from './Flex'; @@ -15,7 +16,6 @@ import { Col, } from 'antd'; import { useTranslation } from 'react-i18next'; -import { useQuery } from 'react-query'; interface InformationProps {} const Information: React.FC = () => { @@ -24,22 +24,19 @@ const Information: React.FC = () => { const baiClient = useSuspendedBackendaiClient(); - let { data: licenseInfo, isLoading: isLoadingLicenseInfo } = useQuery<{ + let { data: licenseInfo, isLoading: isLoadingLicenseInfo } = useTanQuery<{ valid: boolean; type: string; licensee: string; key: string; expiration: string; - }>( - 'licenseInfo', - () => { + }>({ + queryKey: ['licenseInfo'], + queryFn: () => { return baiClient.enterprise.getLicense(); }, - { - // for to render even this fail query failed - suspense: false, - }, - ); + // for to render even this fail query failed + }); if (!licenseInfo) { licenseInfo = { diff --git a/react/src/components/KeypairInfoModal.tsx b/react/src/components/KeypairInfoModal.tsx index 171c127ecf..aac88e307e 100644 --- a/react/src/components/KeypairInfoModal.tsx +++ b/react/src/components/KeypairInfoModal.tsx @@ -38,9 +38,7 @@ const KeypairInfoModal: React.FC = ({ .then((res: any) => res.keypairs) : null; }, - suspense: false, staleTime: 0, - cacheTime: 0, }); const supportMainAccessKey = baiClient?.supports('main-access-key'); diff --git a/react/src/components/ModelCloneModal.tsx b/react/src/components/ModelCloneModal.tsx index e3635c8962..2f00ec0341 100644 --- a/react/src/components/ModelCloneModal.tsx +++ b/react/src/components/ModelCloneModal.tsx @@ -89,7 +89,7 @@ const ModelCloneModal: React.FC = ({ destroyOnClose {...props} okText={t('button.Clone')} - confirmLoading={mutationToClone.isLoading} + confirmLoading={mutationToClone.isPending} onOk={(e) => { formRef.current ?.validateFields() diff --git a/react/src/components/ResetPasswordRequired.tsx b/react/src/components/ResetPasswordRequired.tsx index 2efeb182bd..663c00a80a 100644 --- a/react/src/components/ResetPasswordRequired.tsx +++ b/react/src/components/ResetPasswordRequired.tsx @@ -116,7 +116,7 @@ const ResetPasswordRequired = () => { initialValues={{ currentPassword: currentPassword, }} - disabled={mutation.isLoading} + disabled={mutation.isPending} > { - diff --git a/react/src/components/ResourceGroupSelect.tsx b/react/src/components/ResourceGroupSelect.tsx index 6f1c7fd117..595acdbcbb 100644 --- a/react/src/components/ResourceGroupSelect.tsx +++ b/react/src/components/ResourceGroupSelect.tsx @@ -1,7 +1,7 @@ import { useBaiSignedRequestWithPromise } from '../helper'; import { useUpdatableState } from '../hooks'; -import { useTanQuery } from '../hooks/reactQueryAlias'; import useControllableState from '../hooks/useControllableState'; +import { useSuspenseTanQuery } from '../hooks/reactQueryAlias'; import { useCurrentProjectValue } from '../hooks/useCurrentProject'; import TextHighlighter from './TextHighlighter'; import { Select, SelectProps } from 'antd'; @@ -25,7 +25,7 @@ const ResourceGroupSelect: React.FC = ({ }) => { const baiRequestWithPromise = useBaiSignedRequestWithPromise(); const currentProject = useCurrentProjectValue(); - const [key, checkUpdate] = useUpdatableState('first'); + const [fetchKey, updateFetchKey] = useUpdatableState('first'); const [controllableSearchValue, setControllableSearchValue] = useControllableState({ value: searchValue, @@ -36,7 +36,7 @@ const ResourceGroupSelect: React.FC = ({ useControllableState(selectProps); const [isPendingLoading, startLoadingTransition] = useTransition(); - const { data: resourceGroupSelectQueryResult } = useTanQuery< + const { data: resourceGroupSelectQueryResult } = useSuspenseTanQuery< [ { scaling_groups: { @@ -59,7 +59,7 @@ const ResourceGroupSelect: React.FC = ({ }, ] >({ - queryKey: ['ResourceGroupSelectQuery', key, currentProject.name], + queryKey: ['ResourceGroupSelectQuery', currentProject.name], queryFn: () => { const search = new URLSearchParams(); search.set('group', currentProject.name); @@ -75,6 +75,7 @@ const ResourceGroupSelect: React.FC = ({ ]); }, staleTime: 0, + fetchKey: fetchKey, }); const sftpResourceGroups = _.flatMap( @@ -143,7 +144,7 @@ const ResourceGroupSelect: React.FC = ({ onDropdownVisibleChange={(open) => { if (open) { startLoadingTransition(() => { - checkUpdate(); + updateFetchKey(); }); } }} diff --git a/react/src/components/ResourcePresetSelect.tsx b/react/src/components/ResourcePresetSelect.tsx index 4b033e96bf..fc12bc1ad3 100644 --- a/react/src/components/ResourcePresetSelect.tsx +++ b/react/src/components/ResourcePresetSelect.tsx @@ -145,7 +145,6 @@ const ResourcePresetSelect: React.FC = ({ > {_.map( _.omitBy(slotsInfo, (slot, key) => - // @ts-ignore _.isEmpty(resourceSlots[key]), ), (slot, key) => { diff --git a/react/src/components/SSHKeypairGenerationModal.tsx b/react/src/components/SSHKeypairGenerationModal.tsx index be96b96326..adbe34395f 100644 --- a/react/src/components/SSHKeypairGenerationModal.tsx +++ b/react/src/components/SSHKeypairGenerationModal.tsx @@ -31,7 +31,6 @@ const SSHKeypairGenerationModal: React.FC = ({ queryFn: () => { return baiModalProps.open ? baiClient.refreshSSHKeypair() : null; }, - suspense: false, }); const mutationToPostSSHKeypair = useTanMutation({ diff --git a/react/src/components/ServiceLauncherPageContent.tsx b/react/src/components/ServiceLauncherPageContent.tsx index 4f8db2ee07..d6b1980132 100644 --- a/react/src/components/ServiceLauncherPageContent.tsx +++ b/react/src/components/ServiceLauncherPageContent.tsx @@ -9,7 +9,7 @@ import { useSuspendedBackendaiClient, useWebUINavigate, } from '../hooks'; -import { useTanMutation, useTanQuery } from '../hooks/reactQueryAlias'; +import { useSuspenseTanQuery, useTanMutation } from '../hooks/reactQueryAlias'; import BAIModal, { DEFAULT_BAI_MODAL_Z_INDEX } from './BAIModal'; import EnvVarFormList, { EnvVarFormListValue } from './EnvVarFormList'; import Flex from './Flex'; @@ -194,7 +194,7 @@ const ServiceLauncherPageContent: React.FC = ({ endpointFrgmt, ); - const { data: availableRuntimes } = useTanQuery<{ + const { data: availableRuntimes } = useSuspenseTanQuery<{ runtimes: { name: string; human_readable_name: string }[]; }>({ queryKey: ['baiClient.modelService.runtime.list'], @@ -214,7 +214,6 @@ const ServiceLauncherPageContent: React.FC = ({ }); }, staleTime: 1000, - suspense: true, }); const checkManualImageAllowed = ( @@ -679,7 +678,7 @@ const ServiceLauncherPageContent: React.FC = ({ }>
{}); }; - const isPendingRename = mutation.isLoading || optimisticName !== session.name; + const isPendingRename = mutation.isPending || optimisticName !== session.name; // sessions[objectKey].icon = this._getKernelIcon(session.image); // sessions[objectKey].sessionTags = this._getKernelInfo(session.image); diff --git a/react/src/components/SignoutModal.tsx b/react/src/components/SignoutModal.tsx index a5f41b0dcf..e8b2a2d798 100644 --- a/react/src/components/SignoutModal.tsx +++ b/react/src/components/SignoutModal.tsx @@ -59,7 +59,7 @@ const SignoutModal: React.FC = ({ onOk={handleOk} okText={t('login.LeaveService')} okButtonProps={{ danger: true }} - confirmLoading={signoutMutation.isLoading} + confirmLoading={signoutMutation.isPending} onCancel={() => { onRequestClose(); }} @@ -69,7 +69,7 @@ const SignoutModal: React.FC = ({ ref={formRef} layout="vertical" labelCol={{ span: 6 }} - disabled={signoutMutation.isLoading} + disabled={signoutMutation.isPending} > diff --git a/react/src/components/StorageSelect.tsx b/react/src/components/StorageSelect.tsx index f353dcb1bb..580c412d0b 100644 --- a/react/src/components/StorageSelect.tsx +++ b/react/src/components/StorageSelect.tsx @@ -1,5 +1,6 @@ import { usageIndicatorColor } from '../helper'; import { useSuspendedBackendaiClient } from '../hooks'; +import { useSuspenseTanQuery } from '../hooks/reactQueryAlias'; import useControllableState from '../hooks/useControllableState'; import { useShadowRoot } from './DefaultProviders'; import Flex from './Flex'; @@ -8,7 +9,6 @@ import { Select, SelectProps, Badge, Tooltip } from 'antd'; import _ from 'lodash'; import React, { useEffect } from 'react'; import { useTranslation } from 'react-i18next'; -import { useQuery } from 'react-query'; export type VolumeInfo = { id: string; @@ -41,22 +41,26 @@ const StorageSelect: React.FC = ({ const shadowRoot = useShadowRoot(); const baiClient = useSuspendedBackendaiClient(); - const { data: vhostInfo, isLoading: isLoadingVhostInfo } = useQuery<{ - default: string; - allowed: Array; - volume_info?: { - [key: string]: { - backend: string; - capabilities: string[]; - usage: { - percentage: number; + const { data: vhostInfo, isLoading: isLoadingVhostInfo } = + useSuspenseTanQuery<{ + default: string; + allowed: Array; + volume_info?: { + [key: string]: { + backend: string; + capabilities: string[]; + usage: { + percentage: number; + }; + sftp_scaling_groups: any[]; }; - sftp_scaling_groups: any[]; }; - }; - }>('vhostInfo', () => { - return baiClient.vfolder.list_hosts(); - }); + }>({ + queryKey: ['vhostInfo'], + queryFn: () => { + return baiClient.vfolder.list_hosts(); + }, + }); const [controllableState, setControllableState] = useControllableState({ value, diff --git a/react/src/components/StorageStatusPanel.tsx b/react/src/components/StorageStatusPanel.tsx index 10fe7b6114..554afc2ced 100644 --- a/react/src/components/StorageStatusPanel.tsx +++ b/react/src/components/StorageStatusPanel.tsx @@ -1,5 +1,6 @@ import { addQuotaScopeTypePrefix, usageIndicatorColor } from '../helper'; import { useCurrentDomainValue, useSuspendedBackendaiClient } from '../hooks'; +import { useSuspenseTanQuery } from '../hooks/reactQueryAlias'; import { useCurrentProjectValue } from '../hooks/useCurrentProject'; import Flex from './Flex'; import FlexActivityIndicator from './FlexActivityIndicator'; @@ -25,7 +26,6 @@ import graphql from 'babel-plugin-relay/macro'; import _ from 'lodash'; import React, { useDeferredValue, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { useQuery } from 'react-query'; import { useLazyLoadQuery } from 'react-relay'; const StorageStatusPanel: React.FC<{ @@ -56,12 +56,12 @@ const StorageStatusPanel: React.FC<{ ); }; - const { data: vfolders } = useQuery( - ['vfolders', { deferredFetchKey }], - () => { + const { data: vfolders } = useSuspenseTanQuery({ + queryKey: ['vfolders', { deferredFetchKey }], + queryFn: () => { return baiClient.vfolder.list(currentProject?.id); }, - ); + }); const createdCount = vfolders?.filter( (item: any) => item.is_owner && diff --git a/react/src/components/SummaryPageItems/SummaryItemInvitation.tsx b/react/src/components/SummaryPageItems/SummaryItemInvitation.tsx index 58f97caa5a..9edaa7007a 100644 --- a/react/src/components/SummaryPageItems/SummaryItemInvitation.tsx +++ b/react/src/components/SummaryPageItems/SummaryItemInvitation.tsx @@ -4,11 +4,13 @@ import { useBaiSignedRequestWithPromise, } from '../../helper'; import { useSuspendedBackendaiClient } from '../../hooks'; -import { useTanMutation, useTanQuery } from '../../hooks/reactQueryAlias'; +import { + useSuspenseTanQuery, + useTanMutation, +} from '../../hooks/reactQueryAlias'; import Flex from '../Flex'; import { App, Button, Descriptions, Empty, Tag, Typography, theme } from 'antd'; import { useTranslation } from 'react-i18next'; -import { useQueryClient } from 'react-query'; const SummaryItemInvitation: React.FC = () => { const { t } = useTranslation(); @@ -17,10 +19,10 @@ const SummaryItemInvitation: React.FC = () => { const baiClient = useSuspendedBackendaiClient(); const baiRequestWithPromise = useBaiSignedRequestWithPromise(); - const queryClient = useQueryClient(); const { data: { invitations }, - } = useTanQuery({ + refetch, + } = useSuspenseTanQuery({ queryKey: ['baiClient.invitation.list'], queryFn: () => baiRequestWithPromise({ @@ -104,9 +106,7 @@ const SummaryItemInvitation: React.FC = () => { onClick={() => terminateInvitationsMutation.mutate(invitation.id, { onSuccess() { - queryClient.invalidateQueries([ - 'baiClient.invitation.list', - ]); + refetch(); app.message.success( t('summary.DeclineSharedVFolder') + invitation.vfolder_name, @@ -136,9 +136,7 @@ const SummaryItemInvitation: React.FC = () => { onClick={() => acceptInvitationsMutation.mutate(invitation.id, { onSuccess() { - queryClient.invalidateQueries([ - 'baiClient.invitation.list', - ]); + refetch(); app.message.success( t('summary.AcceptSharedVFolder') + invitation.vfolder_name, diff --git a/react/src/components/TOTPActivateModal.tsx b/react/src/components/TOTPActivateModal.tsx index 89c72423de..59980ec4c5 100644 --- a/react/src/components/TOTPActivateModal.tsx +++ b/react/src/components/TOTPActivateModal.tsx @@ -1,5 +1,5 @@ import { useSuspendedBackendaiClient } from '../hooks'; -import { useTanMutation } from '../hooks/reactQueryAlias'; +import { useTanMutation, useTanQuery } from '../hooks/reactQueryAlias'; import BAIModal, { BAIModalProps } from './BAIModal'; import Flex from './Flex'; import { TOTPActivateModalFragment$key } from './__generated__/TOTPActivateModalFragment.graphql'; @@ -16,7 +16,6 @@ import { import graphql from 'babel-plugin-relay/macro'; import React, { useRef } from 'react'; import { useTranslation } from 'react-i18next'; -import { useQuery } from 'react-query'; import { useFragment } from 'react-relay'; type TOTPActivateFormInput = { @@ -48,7 +47,8 @@ const TOTPActivateModal: React.FC = ({ ); const baiClient = useSuspendedBackendaiClient(); - let initializedTotp = useQuery<{ + + const initializedTotp = useTanQuery<{ totp_key: string; totp_uri: string; }>({ @@ -60,7 +60,6 @@ const TOTPActivateModal: React.FC = ({ ? baiClient.initialize_totp() : null; }, - suspense: false, staleTime: 1000, }); @@ -94,7 +93,7 @@ const TOTPActivateModal: React.FC = ({ { onRequestClose(); diff --git a/react/src/components/UserProfileSettingModal.tsx b/react/src/components/UserProfileSettingModal.tsx index e652278b51..d0f57d0169 100644 --- a/react/src/components/UserProfileSettingModal.tsx +++ b/react/src/components/UserProfileSettingModal.tsx @@ -231,7 +231,7 @@ const UserProfileSettingModal: React.FC = ({ valuePropName="checked" > { if (checked) { toggleTOTPActivateModal(); diff --git a/react/src/components/UserSettingModal.tsx b/react/src/components/UserSettingModal.tsx index 22491bcdfb..1300f0fc9f 100644 --- a/react/src/components/UserSettingModal.tsx +++ b/react/src/components/UserSettingModal.tsx @@ -343,7 +343,7 @@ const UserSettingModal: React.FC = ({ > = ({ const baiRequestWithPromise = useBaiSignedRequestWithPromise(); const webuiNavigate = useWebUINavigate(); - const { data: vFolders } = useTanQuery({ + const { data: vFolders } = useSuspenseTanQuery({ queryKey: ['VFolderSelectQuery'], queryFn: () => { const search = new URLSearchParams(); @@ -30,7 +30,6 @@ const VFolderLazyView: React.FC = ({ }) as Promise; }, staleTime: 1000, - suspense: true, }); const vFolder = vFolders?.find( diff --git a/react/src/components/VFolderSelect.tsx b/react/src/components/VFolderSelect.tsx index ac5192212e..ebc714f97f 100644 --- a/react/src/components/VFolderSelect.tsx +++ b/react/src/components/VFolderSelect.tsx @@ -1,7 +1,7 @@ import { useBaiSignedRequestWithPromise } from '../helper'; import { useUpdatableState } from '../hooks'; -import { useTanQuery } from '../hooks/reactQueryAlias'; import useControllableState from '../hooks/useControllableState'; +import { useSuspenseTanQuery } from '../hooks/reactQueryAlias'; import { useCurrentProjectValue } from '../hooks/useCurrentProject'; import { Select, SelectProps } from 'antd'; import _ from 'lodash'; @@ -74,7 +74,7 @@ const VFolderSelect: React.FC = ({ // ); const [key, checkUpdate] = useUpdatableState('first'); - const { data } = useTanQuery({ + const { data } = useSuspenseTanQuery({ queryKey: ['VFolderSelectQuery', key], queryFn: () => { const search = new URLSearchParams(); diff --git a/react/src/components/VFolderTable.tsx b/react/src/components/VFolderTable.tsx index d4cc917580..9f0fff0987 100644 --- a/react/src/components/VFolderTable.tsx +++ b/react/src/components/VFolderTable.tsx @@ -1,8 +1,8 @@ import { useBaiSignedRequestWithPromise } from '../helper'; import { useSuspendedBackendaiClient, useUpdatableState } from '../hooks'; import { useKeyPairLazyLoadQuery } from '../hooks/hooksUsingRelay'; -import { useTanQuery } from '../hooks/reactQueryAlias'; import useControllableState from '../hooks/useControllableState'; +import { useSuspenseTanQuery } from '../hooks/reactQueryAlias'; import { useCurrentProjectValue } from '../hooks/useCurrentProject'; import { useEventNotStable } from '../hooks/useEventNotStable'; import { useShadowRoot } from './DefaultProviders'; @@ -137,7 +137,7 @@ const VFolderTable: React.FC = ({ const currentProject = useCurrentProjectValue(); const [fetchKey, updateFetchKey] = useUpdatableState('first'); const [isPendingRefetch, startRefetchTransition] = useTransition(); - const { data: allFolderList } = useTanQuery({ + const { data: allFolderList } = useSuspenseTanQuery({ queryKey: ['VFolderSelectQuery', fetchKey, currentProject.id], queryFn: () => { const search = new URLSearchParams(); diff --git a/react/src/components/lablupTalkativotUI/ChatUIModal.tsx b/react/src/components/lablupTalkativotUI/ChatUIModal.tsx index f3dea2d9ea..9387de53c2 100644 --- a/react/src/components/lablupTalkativotUI/ChatUIModal.tsx +++ b/react/src/components/lablupTalkativotUI/ChatUIModal.tsx @@ -62,7 +62,6 @@ const EndpointChatContent: React.FC = ({ (res) => res.json(), ); }, - suspense: false, }); return isFetching ? ( diff --git a/react/src/components/lablupTalkativotUI/EndpointLLMChatCard.tsx b/react/src/components/lablupTalkativotUI/EndpointLLMChatCard.tsx index 760a0a61a4..49b4ab2582 100644 --- a/react/src/components/lablupTalkativotUI/EndpointLLMChatCard.tsx +++ b/react/src/components/lablupTalkativotUI/EndpointLLMChatCard.tsx @@ -1,4 +1,4 @@ -import { useTanQuery } from '../../hooks/reactQueryAlias'; +import { useSuspenseTanQuery } from '../../hooks/reactQueryAlias'; import EndpointSelect from '../EndpointSelect'; import { Model } from './ChatUIModal'; import LLMChatCard, { BAIModel } from './LLMChatCard'; @@ -61,7 +61,7 @@ const EndpointLLMChatCard: React.FC = ({ chatSubmitKeyInfoState, ); - const { data: modelsResult } = useTanQuery<{ + const { data: modelsResult } = useSuspenseTanQuery<{ data: Array; }>({ queryKey: ['models', fetchKey, endpoint?.endpoint_id], @@ -77,7 +77,6 @@ const EndpointLLMChatCard: React.FC = ({ .catch((e) => ({ data: [] })) : Promise.resolve({ data: [] }); }, - suspense: true, }); const models = _.map(modelsResult?.data, (m) => ({ diff --git a/react/src/hooks/backendai.tsx b/react/src/hooks/backendai.tsx index 1a204bafea..331860e2f0 100644 --- a/react/src/hooks/backendai.tsx +++ b/react/src/hooks/backendai.tsx @@ -1,6 +1,10 @@ import { useSuspendedBackendaiClient, useUpdatableState } from '.'; import { maskString, useBaiSignedRequestWithPromise } from '../helper'; -import { useTanMutation, useTanQuery } from './reactQueryAlias'; +import { + useSuspenseTanQuery, + useTanMutation, + useTanQuery, +} from './reactQueryAlias'; import _ from 'lodash'; import { useEffect, useState } from 'react'; @@ -18,7 +22,7 @@ export interface QuotaScope { export const useResourceSlots = () => { const [key, checkUpdate] = useUpdatableState('first'); const baiClient = useSuspendedBackendaiClient(); - const { data: resourceSlots } = useTanQuery<{ + const { data: resourceSlots } = useSuspenseTanQuery<{ cpu?: string; mem?: string; 'cuda.shares'?: string; @@ -30,6 +34,7 @@ export const useResourceSlots = () => { 'atom-plus.device'?: string; 'warboy.device'?: string; 'hyperaccel-lpu.device'?: string; + [key: string]: string | undefined; }>({ queryKey: ['useResourceSlots', key], queryFn: () => { @@ -189,8 +194,8 @@ export const useCurrentUserInfo = () => { ...userInfo, username: getUsername(), isPendingMutation: - mutationToUpdateUserFullName.isLoading || - mutationToUpdateUserPassword.isLoading, + mutationToUpdateUserFullName.isPending || + mutationToUpdateUserPassword.isPending, }, { updateFullName: ( @@ -249,16 +254,13 @@ export const useCurrentUserRole = () => { user: { role: 'superadmin' | 'admin' | 'user' | 'monitor'; }; - }>( - ['getUserRole', userInfo.email], - () => { + }>({ + queryKey: ['getUserRole', userInfo.email], + queryFn: () => { return baiClient.user.get(userInfo.email, ['role']); }, - { - suspense: false, - staleTime: Infinity, - }, - ); + staleTime: Infinity, + }); const userRole = roleData?.user.role; return userRole; @@ -266,16 +268,13 @@ export const useCurrentUserRole = () => { export const useTOTPSupported = () => { const baiClient = useSuspendedBackendaiClient(); - const { data: isManagerSupportingTOTP, isLoading } = useTanQuery( - 'isManagerSupportingTOTP', - () => { + const { data: isManagerSupportingTOTP, isLoading } = useTanQuery({ + queryKey: ['isManagerSupportingTOTP'], + queryFn: () => { return baiClient.isManagerSupportingTOTP(); }, - { - suspense: false, - staleTime: 1000, - }, - ); + staleTime: 1000, + }); const isTOTPSupported = baiClient.supports('2FA') && isManagerSupportingTOTP; return { isTOTPSupported, isLoading }; @@ -283,10 +282,13 @@ export const useTOTPSupported = () => { export const useAllowedHostNames = () => { const baiClient = useSuspendedBackendaiClient(); - const { data: allowedHosts } = useTanQuery<{ + const { data: allowedHosts } = useSuspenseTanQuery<{ allowed: Array; - }>(['useAllowedHostNames'], () => { - return baiClient.vfolder.list_all_hosts(); + }>({ + queryKey: ['useAllowedHostNames'], + queryFn: () => { + return baiClient.vfolder.list_all_hosts(); + }, }); return allowedHosts?.allowed; }; diff --git a/react/src/hooks/index.tsx b/react/src/hooks/index.tsx index 4b27aae1fc..03b53889df 100644 --- a/react/src/hooks/index.tsx +++ b/react/src/hooks/index.tsx @@ -1,7 +1,7 @@ +import { useSuspenseTanQuery } from './reactQueryAlias'; import { useEventNotStable } from './useEventNotStable'; import _ from 'lodash'; import { useEffect, useMemo, useState } from 'react'; -import { useQuery } from 'react-query'; import { NavigateOptions, To, useNavigate } from 'react-router-dom'; interface WebUINavigateOptions extends NavigateOptions { @@ -85,8 +85,8 @@ export const useAnonymousBackendaiClient = ({ }; export const useSuspendedBackendaiClient = () => { - const { data: client } = useQuery({ - queryKey: 'backendai-client-for-suspense', + const { data: client } = useSuspenseTanQuery({ + queryKey: ['backendai-client-for-suspense'], queryFn: () => new Promise((resolve) => { if ( @@ -110,7 +110,6 @@ export const useSuspendedBackendaiClient = () => { }), retry: false, // enabled: false, - suspense: true, }); return client as { @@ -143,8 +142,8 @@ interface ImageMetadata { } export const useBackendAIImageMetaData = () => { - const { data: metadata } = useQuery({ - queryKey: 'backendai-metadata-for-suspense', + const { data: metadata } = useSuspenseTanQuery({ + queryKey: ['backendai-metadata-for-suspense'], queryFn: () => { return fetch('resources/image_metadata.json') .then((response) => response.json()) @@ -164,7 +163,6 @@ export const useBackendAIImageMetaData = () => { }, ); }, - suspense: true, retry: false, }); diff --git a/react/src/hooks/reactQueryAlias.tsx b/react/src/hooks/reactQueryAlias.tsx index b8c5c40db0..f5b874707b 100644 --- a/react/src/hooks/reactQueryAlias.tsx +++ b/react/src/hooks/reactQueryAlias.tsx @@ -1,4 +1,3 @@ -import { useRef } from 'react'; import { type QueryKey, useQuery, @@ -6,7 +5,9 @@ import { UseQueryOptions, useQueryClient, QueryObserver, -} from 'react-query'; + useSuspenseQuery, +} from '@tanstack/react-query'; +import { useRef } from 'react'; export const useTanQuery = useQuery; export const useTanMutation = useMutation; @@ -23,7 +24,7 @@ export const useTanMutation = useMutation; * * @returns {QueryResult} The query result. */ -export const useSuspenseQuery = < +export const useSuspenseTanQuery = < TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, @@ -39,9 +40,8 @@ export const useSuspenseQuery = < >) => { const queryClient = useQueryClient(); - const queryResult = useQuery({ + const queryResult = useSuspenseQuery({ ...options, - suspense: true, }); const promiseInfoRef = useRef<{ diff --git a/react/src/hooks/useResourceLimitAndRemaining.tsx b/react/src/hooks/useResourceLimitAndRemaining.tsx index 7ff4e01980..fa438e903b 100644 --- a/react/src/hooks/useResourceLimitAndRemaining.tsx +++ b/react/src/hooks/useResourceLimitAndRemaining.tsx @@ -3,7 +3,7 @@ import { Image } from '../components/ImageEnvironmentSelectFormItems'; import { AUTOMATIC_DEFAULT_SHMEM } from '../components/ResourceAllocationFormItems'; import { addNumberWithUnits, iSizeToSize } from '../helper'; import { useResourceSlots } from '../hooks/backendai'; -import { useTanQuery } from './reactQueryAlias'; +import { useSuspenseTanQuery } from './reactQueryAlias'; import _ from 'lodash'; interface MergedResourceLimits { @@ -99,7 +99,7 @@ export const useResourceLimitAndRemaining = ({ data: checkPresetInfo, refetch, isRefetching, - } = useTanQuery({ + } = useSuspenseTanQuery({ queryKey: ['check-presets', currentProjectName, currentResourceGroup], queryFn: () => { if (currentResourceGroup) { @@ -114,7 +114,6 @@ export const useResourceLimitAndRemaining = ({ } }, staleTime: 1000, - suspense: true, // suspense: !_.isEmpty(currentResourceGroup), //prevent flicking }); diff --git a/react/src/pages/EndpointDetailPage.tsx b/react/src/pages/EndpointDetailPage.tsx index 3437b6e056..1605aa97cc 100644 --- a/react/src/pages/EndpointDetailPage.tsx +++ b/react/src/pages/EndpointDetailPage.tsx @@ -213,13 +213,15 @@ const EndpointDetailPage: React.FC = () => { }, ); - const mutationToClearError = useTanMutation(() => { - if (!endpoint) return; - return baiSignedRequestWithPromise({ - method: 'POST', - url: `/services/${endpoint.endpoint_id}/errors/clear`, - client: baiClient, - }); + const mutationToClearError = useTanMutation({ + mutationFn: () => { + if (!endpoint) return; + return baiSignedRequestWithPromise({ + method: 'POST', + url: `/services/${endpoint.endpoint_id}/errors/clear`, + client: baiClient, + }); + }, }); const mutationToSyncRoutes = useTanMutation< { @@ -227,12 +229,14 @@ const EndpointDetailPage: React.FC = () => { }, unknown, string - >((endpoint_id) => { - return baiSignedRequestWithPromise({ - method: 'POST', - url: `/services/${endpoint_id}/sync`, - client: baiClient, - }); + >({ + mutationFn: (endpoint_id) => { + return baiSignedRequestWithPromise({ + method: 'POST', + url: `/services/${endpoint_id}/sync`, + client: baiClient, + }); + }, }); const openSessionErrorModal = (session: string) => { if (endpoint === null) return; @@ -597,7 +601,7 @@ const EndpointDetailPage: React.FC = () => { endpoint?.endpoint_id ? (