🆙 Update React Query to TanStack Query (#1153)

frontend/src/components/Admin/AddUser.tsx

@@ -15,7 +15,7 @@ import {
   ModalOverlay,
 } from "@chakra-ui/react"
 import { type SubmitHandler, useForm } from "react-hook-form"
-import { useMutation, useQueryClient } from "react-query"
+import { useMutation, useQueryClient } from "@tanstack/react-query"
 
 import { type UserCreate, UsersService } from "../../client"
 import type { ApiError } from "../../client/core/ApiError"
@@ -53,23 +53,22 @@ const AddUser = ({ isOpen, onClose }: AddUserProps) => {
     },
   })
 
-  const mutation = useMutation(
-    (data: UserCreate) => UsersService.createUser({ requestBody: data }),
-    {
-      onSuccess: () => {
-        showToast("Success!", "User created successfully.", "success")
-        reset()
-        onClose()
-      },
-      onError: (err: ApiError) => {
-        const errDetail = (err.body as any)?.detail
-        showToast("Something went wrong.", `${errDetail}`, "error")
-      },
-      onSettled: () => {
-        queryClient.invalidateQueries("users")
-      },
+  const mutation = useMutation({
+    mutationFn: (data: UserCreate) =>
+      UsersService.createUser({ requestBody: data }),
+    onSuccess: () => {
+      showToast("Success!", "User created successfully.", "success")
+      reset()
+      onClose()
     },
-  )
+    onError: (err: ApiError) => {
+      const errDetail = (err.body as any)?.detail
+      showToast("Something went wrong.", `${errDetail}`, "error")
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ["users"] })
+    },
+  })
 
   const onSubmit: SubmitHandler<UserCreateForm> = (data) => {
     mutation.mutate(data)

frontend/src/components/Admin/EditUser.tsx

@@ -15,7 +15,7 @@ import {
   ModalOverlay,
 } from "@chakra-ui/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,
@@ -52,23 +52,21 @@ const EditUser = ({ user, isOpen, onClose }: EditUserProps) => {
     defaultValues: user,
   })
 
-  const mutation = useMutation(
-    (data: UserUpdateForm) =>
+  const mutation = useMutation({
+    mutationFn: (data: UserUpdateForm) =>
       UsersService.updateUser({ userId: user.id, requestBody: data }),
-    {
-      onSuccess: () => {
-        showToast("Success!", "User updated successfully.", "success")
-        onClose()
-      },
-      onError: (err: ApiError) => {
-        const errDetail = (err.body as any)?.detail
-        showToast("Something went wrong.", `${errDetail}`, "error")
-      },
-      onSettled: () => {
-        queryClient.invalidateQueries("users")
-      },
+    onSuccess: () => {
+      showToast("Success!", "User updated successfully.", "success")
+      onClose()
     },
-  )
+    onError: (err: ApiError) => {
+      const errDetail = (err.body as any)?.detail
+      showToast("Something went wrong.", `${errDetail}`, "error")
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ["users"] })
+    },
+  })
 
   const onSubmit: SubmitHandler<UserUpdateForm> = async (data) => {
     if (data.password === "") {