feat: upgrade from react query v3 to v5

canonical · Oct 18, 2024 · 9b16280 · 9b16280
1 parent 0c8b1dd
commit 9b16280
Show file tree

Hide file tree

Showing 13 changed files with 98 additions and 143 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -12,13 +12,13 @@
   },
   "dependencies": {
     "@canonical/react-components": "^1.7.0",
+    "@tanstack/react-query": "^5.59.15",
     "jwt-decode": "^4.0.0",
     "next": "14.2.15",
     "pkijs": "^3.2.4",
     "react": "^18",
     "react-cookie": "^7.2.1",
     "react-dom": "^18",
-    "react-query": "^3.39.3",
     "sass": "^1.79.5",
     "vanilla-framework": "^4.17.1"
   },

diff --git a/ui/src/app/certificate_requests/asideForm.tsx b/ui/src/app/certificate_requests/asideForm.tsx
@@ -1,4 +1,4 @@
-import { useMutation, useQueryClient } from "react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { csrIsValid } from "../utils";
 import { useCookies } from "react-cookie";
 import { postCSR } from "../queries";
@@ -14,11 +14,12 @@ export default function CertificateRequestsAsidePanel(): JSX.Element {
     const [CSRPEMString, setCSRPEMString] = useState<string>("");
     const queryClient = useQueryClient();
 
-    const mutation = useMutation(postCSR, {
+    const mutation = useMutation({
+        mutationFn: postCSR,
         onSuccess: () => {
             setErrorText("");
             asideContext.setIsOpen(false);
-            queryClient.invalidateQueries('csrs');
+            queryClient.invalidateQueries({ queryKey: ['csrs'] });
         },
         onError: (e: Error) => {
             setErrorText(e.message);

diff --git a/ui/src/app/certificate_requests/components.tsx b/ui/src/app/certificate_requests/components.tsx
@@ -1,5 +1,5 @@
 import { Dispatch, SetStateAction, useState, ChangeEvent, useEffect } from "react"
-import { useMutation, useQueryClient } from "react-query"
+import { useMutation, useQueryClient } from "@tanstack/react-query"
 import { csrMatchesCertificate, splitBundle, validateBundle } from "../utils"
 import { postCertToID } from "../queries"
 import { useCookies } from "react-cookie"
@@ -19,9 +19,10 @@ export function SubmitCertificateModal({ id, csr, cert, setFormOpen }: SubmitCer
     const [validationErrorText, setValidationErrorText] = useState<string>("");
     const queryClient = useQueryClient();
 
-    const mutation = useMutation(postCertToID, {
+    const mutation = useMutation({
+        mutationFn: postCertToID,
         onSuccess: () => {
-            queryClient.invalidateQueries('csrs');
+            queryClient.invalidateQueries({ queryKey: ['csrs'] });
             setErrorText("");
             setFormOpen(false);
         },