🆙 Update React Query to TanStack Query (fastapi#1153)

Author: patrick91

frontend/package-lock.json

@@ -15,15 +15,16 @@
     "@chakra-ui/react": "2.8.2",
     "@emotion/react": "11.11.3",
     "@emotion/styled": "11.11.0",
+    "@tanstack/react-query": "^5.28.14",
+    "@tanstack/react-query-devtools": "^5.28.14",
     "@tanstack/react-router": "1.19.1",
     "axios": "1.6.2",
     "form-data": "4.0.0",
     "framer-motion": "10.16.16",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "7.49.3",
-    "react-icons": "5.0.1",
-    "react-query": "3.39.3"
+    "react-icons": "5.0.1"
   },
   "devDependencies": {
     "@biomejs/biome": "1.6.1",

frontend/package.json

@@ -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/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 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 === "") {

frontend/src/components/Admin/EditUser.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 { ItemsService, UsersService } from "../../client"
 import useCustomToast from "../../hooks/useCustomToast"
@@ -40,7 +40,8 @@ const Delete = ({ type, id, isOpen, onClose }: DeleteProps) => {
     }
   }
 
-  const mutation = useMutation(deleteEntity, {
+  const mutation = useMutation({
+    mutationFn: deleteEntity,
     onSuccess: () => {
       showToast(
         "Success",
@@ -57,7 +58,9 @@ const Delete = ({ type, id, isOpen, onClose }: DeleteProps) => {
       )
     },
     onSettled: () => {
-      queryClient.invalidateQueries(type === "Item" ? "items" : "users")
+      queryClient.invalidateQueries({
+        queryKey: [type === "Item" ? "items" : "users"],
+      })
     },
   })
 

frontend/src/components/Common/DeleteAlert.tsx

@@ -13,7 +13,7 @@ import {
   useDisclosure,
 } from "@chakra-ui/react"
 import { FiLogOut, FiMenu } from "react-icons/fi"
-import { useQueryClient } from "react-query"
+import { useQueryClient } from "@tanstack/react-query"
 
 import Logo from "../../assets/images/fastapi-logo.svg"
 import type { UserOut } from "../../client"
@@ -25,7 +25,7 @@ const Sidebar = () => {
   const bgColor = useColorModeValue("ui.light", "ui.dark")
   const textColor = useColorModeValue("ui.dark", "ui.light")
   const secBgColor = useColorModeValue("ui.secondary", "ui.darkSlate")
-  const currentUser = queryClient.getQueryData<UserOut>("currentUser")
+  const currentUser = queryClient.getQueryData<UserOut>(["currentUser"])
   const { isOpen, onOpen, onClose } = useDisclosure()
   const { logout } = useAuth()
 

frontend/src/components/Common/Sidebar.tsx

@@ -1,7 +1,7 @@
 import { Box, Flex, Icon, Text, useColorModeValue } from "@chakra-ui/react"
 import { Link } from "@tanstack/react-router"
 import { FiBriefcase, FiHome, FiSettings, FiUsers } from "react-icons/fi"
-import { useQueryClient } from "react-query"
+import { useQueryClient } from "@tanstack/react-query"
 
 import type { UserOut } from "../../client"
 
@@ -19,7 +19,7 @@ const SidebarItems = ({ onClose }: SidebarItemsProps) => {
   const queryClient = useQueryClient()
   const textColor = useColorModeValue("ui.main", "ui.light")
   const bgActive = useColorModeValue("#E2E8F0", "#4A5568")
-  const currentUser = queryClient.getQueryData<UserOut>("currentUser")
+  const currentUser = queryClient.getQueryData<UserOut>(["currentUser"])
 
   const finalItems = currentUser?.is_superuser
     ? [...items, { icon: FiUsers, title: "Admin", path: "/admin" }]

frontend/src/components/Common/SidebarItems.tsx

@@ -13,7 +13,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, type ItemCreate, ItemsService } from "../../client"
 import useCustomToast from "../../hooks/useCustomToast"
@@ -40,23 +40,22 @@ const AddItem = ({ isOpen, onClose }: AddItemProps) => {
     },
   })
 
-  const mutation = useMutation(
-    (data: ItemCreate) => ItemsService.createItem({ requestBody: data }),
-    {
-      onSuccess: () => {
-        showToast("Success!", "Item created successfully.", "success")
-        reset()
-        onClose()
-      },
-      onError: (err: ApiError) => {
-        const errDetail = (err.body as any)?.detail
-        showToast("Something went wrong.", `${errDetail}`, "error")
-      },
-      onSettled: () => {
-        queryClient.invalidateQueries("items")
-      },
+  const mutation = useMutation({
+    mutationFn: (data: ItemCreate) =>
+      ItemsService.createItem({ requestBody: data }),
+    onSuccess: () => {
+      showToast("Success!", "Item 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: ["items"] })
+    },
+  })
 
   const onSubmit: SubmitHandler<ItemCreate> = (data) => {
     mutation.mutate(data)

frontend/src/components/Items/AddItem.tsx

@@ -13,7 +13,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,
@@ -43,23 +43,21 @@ const EditItem = ({ item, isOpen, onClose }: EditItemProps) => {
     defaultValues: item,
   })
 
-  const mutation = useMutation(
-    (data: ItemUpdate) =>
+  const mutation = useMutation({
+    mutationFn: (data: ItemUpdate) =>
       ItemsService.updateItem({ id: item.id, requestBody: data }),
-    {
-      onSuccess: () => {
-        showToast("Success!", "Item updated successfully.", "success")
-        onClose()
-      },
-      onError: (err: ApiError) => {
-        const errDetail = (err.body as any)?.detail
-        showToast("Something went wrong.", `${errDetail}`, "error")
-      },
-      onSettled: () => {
-        queryClient.invalidateQueries("items")
-      },
+    onSuccess: () => {
+      showToast("Success!", "Item updated successfully.", "success")
+      onClose()
     },
-  )
+    onError: (err: ApiError) => {
+      const errDetail = (err.body as any)?.detail
+      showToast("Something went wrong.", `${errDetail}`, "error")
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ["items"] })
+    },
+  })
 
   const onSubmit: SubmitHandler<ItemUpdate> = async (data) => {
     mutation.mutate(data)

frontend/src/components/Items/EditItem.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)