migrate to tanstack query v5

src/app/auth/components/features/followList.tsx

@@ -9,9 +9,9 @@ import { User } from '@shared/user';
 export function FollowList() {
   const { db } = useStorage();
   const { ndk } = useNDK();
-  const { status, data } = useQuery(
-    ['follows'],
-    async () => {
+  const { status, data } = useQuery({
+    queryKey: ['follows'],
+    queryFn: async () => {
       const user = ndk.getUser({ hexpubkey: db.account.pubkey });
       const follows = await user.follows();
       const followsAsArr = [];
@@ -29,16 +29,14 @@ export function FollowList() {
 
       return followsAsArr;
     },
-    {
-      refetchOnWindowFocus: false,
-    }
-  );
+    refetchOnWindowFocus: false,
+  });
 
   return (
     <div className="relative rounded-xl bg-neutral-100 p-3 text-neutral-800 dark:bg-neutral-900 dark:text-neutral-200">
       <h5 className="font-semibold">Your follows</h5>
       <div className="mt-2 flex w-full items-center justify-center">
-        {status === 'loading' ? (
+        {status === 'pending' ? (
           <LoaderIcon className="h-4 w-4 animate-spin text-neutral-900 dark:text-neutral-100" />
         ) : (
           <div className="isolate flex -space-x-2">

src/app/auth/onboarding/enrich.tsx

@@ -17,12 +17,15 @@ import { arrayToNIP02 } from '@utils/transform';
 export function OnboardEnrichScreen() {
   const { ndk } = useNDK();
   const { db } = useStorage();
-  const { status, data } = useQuery(['trending-profiles-widget'], async () => {
-    const res = await fetch('https://api.nostr.band/v0/trending/profiles');
-    if (!res.ok) {
-      throw new Error('Error');
-    }
-    return res.json();
+  const { status, data } = useQuery({
+    queryKey: ['trending-profiles-widget'],
+    queryFn: async () => {
+      const res = await fetch('https://api.nostr.band/v0/trending/profiles');
+      if (!res.ok) {
+        throw new Error('Error');
+      }
+      return res.json();
+    },
   });
 
   const [loading, setLoading] = useState(false);
@@ -90,7 +93,7 @@ export function OnboardEnrichScreen() {
         </h1>
       </div>
       <div className="flex w-full flex-nowrap items-center gap-4 overflow-x-auto px-4 scrollbar-none">
-        {status === 'loading' ? (
+        {status === 'pending' ? (
           <div className="flex h-full w-full items-center justify-center">
             <LoaderIcon className="h-4 w-4 animate-spin text-neutral-900 dark:text-neutral-100" />
           </div>

src/app/auth/onboarding/relays.tsx

@@ -24,15 +24,13 @@ export function OnboardRelaysScreen() {
   const { db } = useStorage();
   const { ndk } = useNDK();
   const { getAllRelaysByUsers } = useNostr();
-  const { status, data } = useQuery(
-    ['relays'],
-    async () => {
+  const { status, data } = useQuery({
+    queryKey: ['relays'],
+    queryFn: async () => {
       return await getAllRelaysByUsers();
     },
-    {
-      refetchOnWindowFocus: false,
-    }
-  );
+    refetchOnWindowFocus: false,
+  });
 
   const toggleRelay = (relay: string) => {
     if (relays.has(relay)) {
@@ -89,7 +87,7 @@ export function OnboardRelaysScreen() {
         </h1>
         <div className="flex flex-col gap-4">
           <div className="flex h-[420px] w-full flex-col overflow-y-auto rounded-xl bg-neutral-100 dark:bg-neutral-900">
-            {status === 'loading' ? (
+            {status === 'pending' ? (
               <div className="flex h-full w-full items-center justify-center">
                 <LoaderIcon className="h-4 w-4 animate-spin text-neutral-900 dark:text-neutral-100" />
               </div>