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

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 }