🆙 Update React Query to TanStack Query (#1153)

frontend/src/routes/_layout/admin.tsx

@@ -14,7 +14,7 @@ import {
   Tr,
 } from "@chakra-ui/react"
 import { createFileRoute } from "@tanstack/react-router"
-import { useQuery, useQueryClient } from "react-query"
+import { useQuery, useQueryClient } from "@tanstack/react-query"
 
 import { type UserOut, UsersService } from "../../client"
 import ActionsMenu from "../../components/Common/ActionsMenu"
@@ -28,13 +28,16 @@ export const Route = createFileRoute("/_layout/admin")({
 function Admin() {
   const queryClient = useQueryClient()
   const showToast = useCustomToast()
-  const currentUser = queryClient.getQueryData<UserOut>("currentUser")
+  const currentUser = queryClient.getQueryData<UserOut>(["currentUser"])
   const {
     data: users,
     isLoading,
     isError,
     error,
-  } = useQuery("users", () => UsersService.readUsers({}))
+  } = useQuery({
+    queryKey: ["users"],
+    queryFn: () => UsersService.readUsers({}),
+  })
 
   if (isError) {
     const errDetail = (error as any).body?.detail

frontend/src/routes/_layout/index.tsx

@@ -1,6 +1,6 @@
 import { Box, Container, Text } from "@chakra-ui/react"
 import { createFileRoute } from "@tanstack/react-router"
-import { useQueryClient } from "react-query"
+import { useQueryClient } from "@tanstack/react-query"
 
 import type { UserOut } from "../../client"
 
@@ -11,7 +11,7 @@ export const Route = createFileRoute("/_layout/")({
 function Dashboard() {
   const queryClient = useQueryClient()
 
-  const currentUser = queryClient.getQueryData<UserOut>("currentUser")
+  const currentUser = queryClient.getQueryData<UserOut>(["currentUser"])
 
   return (
     <>

frontend/src/routes/_layout/items.tsx

@@ -12,7 +12,7 @@ import {
   Tr,
 } from "@chakra-ui/react"
 import { createFileRoute } from "@tanstack/react-router"
-import { useQuery } from "react-query"
+import { useQuery } from "@tanstack/react-query"
 
 import { ItemsService } from "../../client"
 import ActionsMenu from "../../components/Common/ActionsMenu"
@@ -30,7 +30,10 @@ function Items() {
     isLoading,
     isError,
     error,
-  } = useQuery("items", () => ItemsService.readItems({}))
+  } = useQuery({
+    queryKey: ["items"],
+    queryFn: () => ItemsService.readItems({}),
+  })
 
   if (isError) {
     const errDetail = (error as any).body?.detail

frontend/src/routes/_layout/settings.tsx

@@ -8,7 +8,7 @@ import {
   Tabs,
 } from "@chakra-ui/react"
 import { createFileRoute } from "@tanstack/react-router"
-import { useQueryClient } from "react-query"
+import { useQueryClient } from "@tanstack/react-query"
 
 import type { UserOut } from "../../client"
 import Appearance from "../../components/UserSettings/Appearance"
@@ -29,7 +29,7 @@ export const Route = createFileRoute("/_layout/settings")({
 
 function UserSettings() {
   const queryClient = useQueryClient()
-  const currentUser = queryClient.getQueryData<UserOut>("currentUser")
+  const currentUser = queryClient.getQueryData<UserOut>(["currentUser"])
   const finalTabs = currentUser?.is_superuser
     ? tabsConfig.slice(0, 3)
     : tabsConfig