Refactor to use @tanstack/react-query for data fetching in various components

src/App.jsx

@@ -1,8 +1,8 @@
 import NavBar from '@/views/components/NavBar'
 import { Button, Snackbar, Typography, useColorScheme } from '@mui/joy'
 import Tracker from '@openreplay/tracker'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { useEffect, useState } from 'react'
-import { QueryClient, QueryClientProvider } from 'react-query'
 import { Outlet } from 'react-router-dom'
 import { useRegisterSW } from 'virtual:pwa-register/react'
 import { registerCapacitorListeners } from './CapacitorListener'

src/queries/ResourceQueries.jsx

@@ -1,9 +1,11 @@
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import { GetResource } from '../utils/Fetcher'
 
 export const useResource = () => {
-  const { data, isLoading, error } = useQuery('resource', GetResource, {
-    cacheTime: 1000 * 60 * 10, // 1 minute
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['resource'],
+    queryFn: GetResource,
+    cacheTime: 1000 * 60 * 10, // 10 minutes
   })
   return { data, isLoading, error }
 }

src/queries/UserQueries.jsx

@@ -1,21 +1,23 @@
-import { useState } from 'react'
-import { useQuery } from 'react-query'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { GetAllCircleMembers, GetAllUsers } from '../utils/Fetcher'
 
 export const useAllUsers = () => {
-  return useQuery('allUsers', GetAllUsers)
+  return useQuery({
+    queryKey: ['allUsers'],
+    queryFn: GetAllUsers,
+  })
 }
 
 export const useCircleMembers = () => {
-  const [refetchKey, setRefetchKey] = useState(0)
+  const queryClient = useQueryClient()
+
+  const { data, error, isLoading, refetch } = useQuery({
+    queryKey: ['allCircleMembers'],
+    queryFn: GetAllCircleMembers,
+  })
 
-  const { data, error, isLoading, refetch } = useQuery(
-    ['allCircleMembers', refetchKey],
-    GetAllCircleMembers,
-  )
   const handleRefetch = () => {
-    setRefetchKey(prevKey => prevKey + 1)
-    refetch()
+    queryClient.invalidateQueries(['allCircleMembers'])
   }
 
   return { data, error, isLoading, handleRefetch }

src/views/Labels/LabelQueries.jsx

@@ -1,8 +1,9 @@
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 import { GetLabels } from '../../utils/Fetcher'
-
 export const useLabels = () => {
-  return useQuery('labels', GetLabels, {
+  return useQuery({
+    queryKey: ['labels'],
+    queryFn: GetLabels,
     initialData: [],
   })
 }

src/views/Labels/LabelView.jsx

@@ -15,7 +15,7 @@ import { useLabels } from './LabelQueries'
 
 // import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { Add } from '@mui/icons-material'
-import { useQueryClient } from 'react-query'
+import { useQueryClient } from '@tanstack/react-query'
 import { useNavigate } from 'react-router-dom'
 import { getTextColorFromBackgroundColor } from '../../utils/Colors'
 import { DeleteLabel } from '../../utils/Fetcher'

src/views/Modals/Inputs/LabelModal.jsx

@@ -11,7 +11,7 @@ import {
 } from '@mui/joy'
 import { useEffect, useState } from 'react'
 
-import { useMutation, useQueryClient } from 'react-query'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
 import LABEL_COLORS from '../../../utils/Colors.jsx'
 import { CreateLabel, UpdateLabel } from '../../../utils/Fetcher'
 import { useLabels } from '../../Labels/LabelQueries'
@@ -109,7 +109,7 @@ function LabelModal({ isOpen, onClose, label }) {
               <Typography
                 startDecorator={
                   <Box
-                    className='h-4 w-4'
+                    className='size-4'
                     borderRadius={10}
                     sx={{ background: selected.value }}
                   />