migrate to tanstack query v5

src/app/relays/components/relayEventList.tsx

@@ -17,9 +17,9 @@ import {
 
 export function RelayEventList({ relayUrl }: { relayUrl: string }) {
   const { fetcher } = useNDK();
-  const { status, data } = useQuery(
-    ['relay-event'],
-    async () => {
+  const { status, data } = useQuery({
+    queryKey: ['relay-event'],
+    queryFn: async () => {
       const url = 'wss://' + relayUrl;
       const events = await fetcher.fetchLatestEvents(
         [url],
@@ -30,8 +30,8 @@ export function RelayEventList({ relayUrl }: { relayUrl: string }) {
       );
       return events as unknown as NDKEvent[];
     },
-    { refetchOnWindowFocus: false }
-  );
+    refetchOnWindowFocus: false,
+  });
 
   const renderItem = useCallback(
     (event: NDKEvent) => {
@@ -70,7 +70,7 @@ export function RelayEventList({ relayUrl }: { relayUrl: string }) {
   return (
     <div className="h-full">
       <div className="mx-auto w-full max-w-[500px]">
-        {status === 'loading' ? (
+        {status === 'pending' ? (
           <div className="flex h-full w-full items-center justify-center">
             <div className="inline-flex flex-col items-center justify-center gap-2">
               <LoaderIcon className="h-5 w-5 animate-spin text-white" />
@@ -78,7 +78,7 @@ export function RelayEventList({ relayUrl }: { relayUrl: string }) {
             </div>
           </div>
         ) : (
-          <VList className="scrollbar-none h-full">
+          <VList className="h-full scrollbar-none">
             <div className="h-10" />
             {data.map((item) => renderItem(item))}
             <div className="h-16" />

src/app/relays/components/relayForm.tsx

@@ -25,7 +25,10 @@ export function RelayForm() {
         const res = await db.createRelay(url);
         if (!res) return setError("You're already using this relay");
 
-        queryClient.invalidateQueries(['user-relay']);
+        queryClient.invalidateQueries({
+          queryKey: ['user-relay'],
+        });
+
         setError('');
         setUrl('');
       } else {

src/app/relays/components/relayList.tsx

@@ -17,18 +17,16 @@ export function RelayList() {
 
   const { getAllRelaysByUsers } = useNostr();
   const { db } = useStorage();
-  const { status, data } = useQuery(
-    ['relays'],
-    async () => {
+  const { status, data } = useQuery({
+    queryKey: ['relays'],
+    queryFn: async () => {
       return await getAllRelaysByUsers();
     },
-    {
-      refetchOnWindowFocus: false,
-      refetchOnMount: false,
-      refetchOnReconnect: false,
-      staleTime: Infinity,
-    }
-  );
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+    staleTime: Infinity,
+  });
 
   const inspectRelay = (relayUrl: string) => {
     const url = new URL(relayUrl);
@@ -40,12 +38,14 @@ export function RelayList() {
     const res = await db.createRelay(url);
 
     if (!res) await message("You're aldready connected to this relay");
-    queryClient.invalidateQueries(['user-relay']);
+    queryClient.invalidateQueries({
+      queryKey: ['user-relay'],
+    });
   };
 
   return (
     <div className="col-span-2 border-r border-neutral-100 dark:border-neutral-900">
-      {status === 'loading' ? (
+      {status === 'pending' ? (
         <div className="flex h-full w-full items-center justify-center pb-10">
           <div className="inline-flex flex-col items-center justify-center gap-2">
             <LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />

src/app/relays/components/userRelay.tsx

@@ -12,22 +12,24 @@ export function UserRelay() {
 
   const { relayUrls } = useNDK();
   const { db } = useStorage();
-  const { status, data } = useQuery(
-    ['user-relay'],
-    async () => {
+  const { status, data } = useQuery({
+    queryKey: ['user-relay'],
+    queryFn: async () => {
       return await db.getExplicitRelayUrls();
     },
-    { refetchOnWindowFocus: false }
-  );
+    refetchOnWindowFocus: false,
+  });
 
   const removeRelay = async (relayUrl: string) => {
     await db.removeRelay(relayUrl);
-    queryClient.invalidateQueries(['user-relay']);
+    queryClient.invalidateQueries({
+      queryKey: ['user-relay'],
+    });
   };
 
   return (
     <div className="mt-3 px-3">
-      {status === 'loading' ? (
+      {status === 'pending' ? (
         <p>Loading...</p>
       ) : (
         <div className="flex flex-col gap-2">