🆙 Update React Query to TanStack Query (#1153)

frontend/src/components/UserSettings/ChangePassword.tsx

@@ -10,7 +10,7 @@ import {
   useColorModeValue,
 } from "@chakra-ui/react"
 import { type SubmitHandler, useForm } from "react-hook-form"
-import { useMutation } from "react-query"
+import { useMutation } from "@tanstack/react-query"
 
 import { type ApiError, type UpdatePassword, UsersService } from "../../client"
 import useCustomToast from "../../hooks/useCustomToast"
@@ -34,20 +34,18 @@ const ChangePassword = () => {
     criteriaMode: "all",
   })
 
-  const mutation = useMutation(
-    (data: UpdatePassword) =>
+  const mutation = useMutation({
+    mutationFn: (data: UpdatePassword) =>
       UsersService.updatePasswordMe({ requestBody: data }),
-    {
-      onSuccess: () => {
-        showToast("Success!", "Password updated.", "success")
-        reset()
-      },
-      onError: (err: ApiError) => {
-        const errDetail = (err.body as any)?.detail
-        showToast("Something went wrong.", `${errDetail}`, "error")
-      },
+    onSuccess: () => {
+      showToast("Success!", "Password updated.", "success")
+      reset()
     },
-  )
+    onError: (err: ApiError) => {
+      const errDetail = (err.body as any)?.detail
+      showToast("Something went wrong.", `${errDetail}`, "error")
+    },
+  })
 
   const onSubmit: SubmitHandler<UpdatePasswordForm> = async (data) => {
     mutation.mutate(data)

frontend/src/components/UserSettings/DeleteConfirmation.tsx

@@ -9,7 +9,7 @@ import {
 } from "@chakra-ui/react"
 import React from "react"
 import { useForm } from "react-hook-form"
-import { useMutation, useQueryClient } from "react-query"
+import { useMutation, useQueryClient } from "@tanstack/react-query"
 
 import { type ApiError, type UserOut, UsersService } from "../../client"
 import useAuth from "../../hooks/useAuth"
@@ -28,30 +28,28 @@ const DeleteConfirmation = ({ isOpen, onClose }: DeleteProps) => {
     handleSubmit,
     formState: { isSubmitting },
   } = useForm()
-  const currentUser = queryClient.getQueryData<UserOut>("currentUser")
+  const currentUser = queryClient.getQueryData<UserOut>(["currentUser"])
   const { logout } = useAuth()
 
-  const mutation = useMutation(
-    (id: number) => UsersService.deleteUser({ userId: id }),
-    {
-      onSuccess: () => {
-        showToast(
-          "Success",
-          "Your account has been successfully deleted.",
-          "success",
-        )
-        logout()
-        onClose()
-      },
-      onError: (err: ApiError) => {
-        const errDetail = (err.body as any)?.detail
-        showToast("Something went wrong.", `${errDetail}`, "error")
-      },
-      onSettled: () => {
-        queryClient.invalidateQueries("currentUser")
-      },
+  const mutation = useMutation({
+    mutationFn: (id: number) => UsersService.deleteUser({ userId: id }),
+    onSuccess: () => {
+      showToast(
+        "Success",
+        "Your account has been successfully deleted.",
+        "success",
+      )
+      logout()
+      onClose()
     },
-  )
+    onError: (err: ApiError) => {
+      const errDetail = (err.body as any)?.detail
+      showToast("Something went wrong.", `${errDetail}`, "error")
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ["currentUser"] })
+    },
+  })
 
   const onSubmit = async () => {
     mutation.mutate(currentUser!.id)

frontend/src/components/UserSettings/UserInformation.tsx

@@ -13,7 +13,7 @@ import {
 } from "@chakra-ui/react"
 import { useState } from "react"
 import { type SubmitHandler, useForm } from "react-hook-form"
-import { useMutation, useQueryClient } from "react-query"
+import { useMutation, useQueryClient } from "@tanstack/react-query"
 
 import {
   type ApiError,
@@ -50,22 +50,22 @@ const UserInformation = () => {
     setEditMode(!editMode)
   }
 
-  const mutation = useMutation(
-    (data: UserUpdateMe) => UsersService.updateUserMe({ requestBody: data }),
-    {
-      onSuccess: () => {
-        showToast("Success!", "User updated successfully.", "success")
-      },
-      onError: (err: ApiError) => {
-        const errDetail = (err.body as any)?.detail
-        showToast("Something went wrong.", `${errDetail}`, "error")
-      },
-      onSettled: () => {
-        queryClient.invalidateQueries("users")
-        queryClient.invalidateQueries("currentUser")
-      },
+  const mutation = useMutation({
+    mutationFn: (data: UserUpdateMe) =>
+      UsersService.updateUserMe({ requestBody: data }),
+    onSuccess: () => {
+      showToast("Success!", "User updated successfully.", "success")
     },
-  )
+    onError: (err: ApiError) => {
+      const errDetail = (err.body as any)?.detail
+      showToast("Something went wrong.", `${errDetail}`, "error")
+    },
+    onSettled: () => {
+      // TODO: can we do just one call now?
+      queryClient.invalidateQueries({ queryKey: ["users"] })
+      queryClient.invalidateQueries({ queryKey: ["currentUser"] })
+    },
+  })
 
   const onSubmit: SubmitHandler<UserUpdateMe> = async (data) => {
     mutation.mutate(data)