attempt to prevent feed corruption

src/components/InfiniteCustomFeed.tsx

···
+import { useQueryClient } from "@tanstack/react-query";
 import * as React from "react";
 
 //import { useInView } from "react-intersection-observer";
···
     isFetchingNextPage,
     refetch,
     isRefetching,
+    queryKey,
   } = useInfiniteQueryFeedSkeleton({
     feedUri: feedUri,
     agent: agent ?? undefined,
···
     pdsUrl: pdsUrl,
     feedServiceDid: feedServiceDid,
   });
+  const queryClient = useQueryClient();
+
 
   const handleRefresh = () => {
+    queryClient.removeQueries({queryKey: queryKey});
+    //queryClient.invalidateQueries(["infinite-feed", feedUri] as const);
     refetch();
   };
 
+  const allPosts = React.useMemo(() => {
+    const flattenedPosts = data?.pages.flatMap((page) => page?.feed) ?? [];
+
+    const seenUris = new Set<string>();
+
+    return flattenedPosts.filter((item) => {
+      if (!item?.post) return false;
+
+      if (seenUris.has(item.post)) {
+        return false;
+      }
+
+      seenUris.add(item.post);
+
+      return true;
+    });
+  }, [data]);
+
   //const { ref, inView } = useInView();
 
   // React.useEffect(() => {
···
     );
   }
 
-  const allPosts =
-    data?.pages.flatMap((page) => {
-      if (page) return page.feed;
-    }) ?? [];
+  // const allPosts =
+  //   data?.pages.flatMap((page) => {
+  //     if (page) return page.feed;
+  //   }) ?? [];
 
   if (!allPosts || typeof allPosts !== "object" || allPosts.length === 0) {
     return (
···
         className="sticky lg:bottom-4 bottom-22 ml-4 w-[42px] h-[42px] z-10 bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 text-gray-50 p-[9px] rounded-full shadow-lg transition-transform duration-200 ease-in-out hover:scale-110 disabled:dark:bg-gray-900 disabled:bg-gray-100 disabled:cursor-not-allowed"
         aria-label="Refresh feed"
       >
-        <RefreshIcon className={`h-6 w-6 text-gray-600 dark:text-gray-400 ${isRefetching && "animate-spin"}`} />
+        <RefreshIcon
+          className={`h-6 w-6 text-gray-600 dark:text-gray-400 ${isRefetching && "animate-spin"}`}
+        />
       </button>
     </>
   );
···
       d="M20 11A8.1 8.1 0 0 0 4.5 9M4 5v4h4m-4 4a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"
     ></path>
   </svg>
-);
+);

src/routes/index.tsx

···
 
       {isReadyForAuthedFeed || isReadyForUnauthedFeed ? (
         <InfiniteCustomFeed
+          key={selectedFeed!}
           feedUri={selectedFeed!}
           pdsUrl={identity?.pds}
           feedServiceDid={feedServiceDid}

src/utils/useQuery.ts

···
 }) {
   const { queryKey, queryFn } = constructInfiniteFeedSkeletonQuery(options);
   
-  return useInfiniteQuery({
+  return {...useInfiniteQuery({
     queryKey,
     queryFn,
     initialPageParam: undefined as never,
···
     staleTime: Infinity,
     refetchOnWindowFocus: false,
     enabled: !!options.feedUri && (options.isAuthed ? !!options.agent && !!options.pdsUrl && !!options.feedServiceDid : true),
-  });
+  }), queryKey: queryKey};
 }