migrate to tanstack query v5

src/shared/notes/child.tsx

@@ -30,7 +30,7 @@ export function ChildNote({ id, root }: { id: string; root?: string }) {
     }
   };
 
-  if (status === 'loading') {
+  if (status === 'pending') {
     return (
       <>
         <div className="absolute bottom-0 left-[18px] h-[calc(100%-3.4rem)] w-0.5 bg-gradient-to-t from-black/20 to-black/10 dark:from-white/20 dark:to-white/10" />

src/shared/notes/kinds/repost.tsx

@@ -28,9 +28,9 @@ export function Repost({
     event.content.length > 0 ? JSON.parse(event.content) : null;
 
   const { ndk } = useNDK();
-  const { status, isError, data } = useQuery(
-    ['repost', event.id],
-    async () => {
+  const { status, isError, data } = useQuery({
+    queryKey: ['repost', event.id],
+    queryFn: async () => {
       const id = event.tags.find((el) => el[0] === 'e')[1];
       if (!id) throw new Error('wrong id');
 
@@ -39,11 +39,9 @@ export function Repost({
 
       return ndkEvent;
     },
-    {
-      enabled: embedEvent === null,
-      refetchOnWindowFocus: false,
-    }
-  );
+    enabled: embedEvent === null,
+    refetchOnWindowFocus: false,
+  });
 
   const renderKind = useCallback((repostEvent: NDKEvent) => {
     switch (repostEvent.kind) {
@@ -87,7 +85,7 @@ export function Repost({
     );
   }
 
-  if (status === 'loading') {
+  if (status === 'pending') {
     return (
       <div className="h-min w-full px-3 pb-3">
         <div className="relative overflow-hidden rounded-xl border border-neutral-300 bg-neutral-200 p-3 dark:border-neutral-700 dark:bg-neutral-800">

src/shared/notes/mentions/note.tsx

@@ -46,7 +46,7 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
     }
   };
 
-  if (status === 'loading') {
+  if (status === 'pending') {
     return (
       <div className="mt-3 cursor-default rounded-lg border border-neutral-300 bg-neutral-200 p-3 dark:border-neutral-700 dark:bg-neutral-800">
         <NoteSkeleton />

src/shared/notes/metadata.tsx

@@ -17,9 +17,9 @@ export function NoteMetadata({ id }: { id: string }) {
 
   const { db } = useStorage();
   const { ndk } = useNDK();
-  const { status, data } = useQuery(
-    ['note-metadata', id],
-    async () => {
+  const { status, data } = useQuery({
+    queryKey: ['note-metadata', id],
+    queryFn: async () => {
       let replies = 0;
       let zap = 0;
       const users = [];
@@ -53,14 +53,12 @@ export function NoteMetadata({ id }: { id: string }) {
 
       return { replies, users, zap };
     },
-    {
-      enabled: !!ndk,
-      refetchOnWindowFocus: false,
-      refetchOnReconnect: false,
-    }
-  );
+    enabled: !!ndk,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+  });
 
-  if (status === 'loading') {
+  if (status === 'pending') {
     return (
       <div className="relative z-10 flex items-center gap-3 pb-3">
         <div className="mt-2 h-6 w-11 shrink-0"></div>

src/shared/notes/preview/link.tsx

@@ -8,7 +8,7 @@ export function LinkPreview({ urls }: { urls: string[] }) {
 
   return (
     <div className="my-2">
-      {status === 'loading' ? (
+      {status === 'pending' ? (
         <div className="flex flex-col bg-neutral-200 dark:bg-neutral-800">
           <div className="h-44 w-full animate-pulse bg-neutral-400 dark:bg-neutral-600" />
           <div className="flex flex-col gap-2 px-3 py-3">

src/shared/notes/stats.tsx

@@ -10,9 +10,9 @@ import { compactNumber } from '@utils/number';
 
 export function NoteStats({ id }: { id: string }) {
   const { ndk } = useNDK();
-  const { status, data } = useQuery(
-    ['note-stats', id],
-    async () => {
+  const { status, data } = useQuery({
+    queryKey: ['note-stats', id],
+    queryFn: async () => {
       let reactions = 0;
       let reposts = 0;
       let zaps = 0;
@@ -48,10 +48,11 @@ export function NoteStats({ id }: { id: string }) {
 
       return { reposts, reactions, zaps };
     },
-    { refetchOnWindowFocus: false, refetchOnReconnect: false }
-  );
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+  });
 
-  if (status === 'loading') {
+  if (status === 'pending') {
     return (
       <div className="flex h-11 items-center">
         <LoaderIcon className="h-4 w-4 animate-spin text-white" />