migration to tanstack react query

README.md

···
-# Initial Red Dwarf Open Source Release
-i made red dwarf in three days
+# Red Dwarf
+Red Dwarf is a Bluesky client that does not use any AppView servers, instead it gathers the data from [Constellation](https://constellation.microcosm.blue/) and each users' PDS.
 
-it isnt really that well made
-(go take a look at `UniversalPostRenderer.tsx`)
+![screenshot of red dwarf](/public/screenshot.png)
+
+huge thanks to [Microcosm](https://microcosm.blue/) for making this possible
 
-further development is pending 
-(especially around future plans for user-resolved constellation instances)
+## useQuery
+Red Dwarf has been upgraded from its original bespoke caching system to Tanstack Query (react query). this migration was done to achieve a more robust and maintainable approach to data fetching and caching and state synchronization. ive seen serious performance gains from this switch! 
 
-huge thanks to Constellation ([Microcosm](https://microcosm.blue/)) for making this possible
+all core data fetching logic is now centralized in `src/utils/useQuery.ts` and exposed as a collection of custom react hooks. theres two basic types of custom hooks, the use-once, and the inifinite query ones (used for paginated requests like feed skeletons and listrecord)
 
 ## UniversalPostRenderer
 its a mega component rooted in my Masonry "[TestFront](https://testfront-87q.pages.dev/)" project. its goal is simple: have one component render everything. it has several shims to normalize different post data formats into a single format the component can handle. unlike TestFront, it has no animations, though some weird component splits might linger from the old version.
 
 to adapt TestFront's bsky-api-based `UniversalPostRenderer` to Red Dwarf's model of fetching records directly from each user's PDS and then querying constellation for backlinks, i wrap it in `UniversalPostRendererATURILoader`, which handles raw record and backlink fetching. to bridge the gap between bsky api shapes like `PostView` and the raw record, i use `UniversalPostRendererRawRecordShim`. this way, the core `UniversalPostRenderer` remains the same between TestFront and Red Dwarf (with the only difference being in the red dwarf version the framer motion animations are removed).
 
+## Microcosm
+### Constellation
+the beating heart of Red Dwarf, the backlink index that provides contextual information not available from direct PDS queries. Every post's likes, replies, and reposts all come from constellation. Unfortunately i wasnt using tanstack query at the time (compared to its intensive use in the old version of ForumTest) so it is not using any caching
+
+### Slingshot
+though Red Dwarf was made before Microcosm [Slingshot](https://slingshot.microcosm.blue) existed, it now uses Slingshot to reduce load from each respective PDS server. Slignshot
 
 ## PassAuthProvider
 a really bad app-password auth provider, inherited from TestFront and used in all my projects from TestFront to ForumTest (im very good at naming things). in ForumTest, its been superseded by the [OAuthProvider](https://tangled.sh/@whey.party/forumtest/blob/main/src/providers/OAuthProvider.tsx). i havent backported it here and maybe soon, although oauth makes it slightly more annoying to do development because it requires a tunnel so maybe someday if i managed to merge the password and oauth logins to provide both options
-
-## Constellation
-the beating heart of Red Dwarf, the backlink index that provides contextual information not available from direct PDS queries. Every post's likes, replies, and reposts all come from constellation. Unfortunately i wasnt using tanstack query at the time (compared to its intensive use in the old version of ForumTest) so it is not using any caching
-
-Red Dwarf was made before Microcosm [Slingshot](https://slingshot.microcosm.blue) existed, and it would be a very good idea to migrate to it in the future maybe (to reduce load from individual PDS servers)
 
 ## Custom Feeds
 they work, but i havent implemented a simple way of viewing arbitraty feeds. currently it either loads discover (logged out) or your saved feeds (logged in) and its not a technical limitation i just havent implemented it yet
···
 and for list feeds, you can just use something like graze or skyfeed to input a list of users and output a custom feed
 
 ## Tanstack Router
-it does the job, nothing very specific was used here
+it does the job, nothing very specific was used here
+
+im planning to use the loader system on select pages to prevent loss of scroll positon and state though its really complex so i havent done it yet but the migration to tanstack query is a huge first step towards this goal

package-lock.json

···
         "@atproto/api": "^0.16.6",
         "@tailwindcss/vite": "^4.0.6",
         "@tanstack/react-devtools": "^0.2.2",
+        "@tanstack/react-query": "^5.85.6",
         "@tanstack/react-router": "^1.130.2",
         "@tanstack/react-router-devtools": "^1.131.5",
         "@tanstack/router-plugin": "^1.121.2",
         "idb-keyval": "^6.2.2",
+        "jotai": "^2.13.1",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "react-player": "^3.3.2",
···
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.85.6",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.85.6.tgz",
+      "integrity": "sha512-hCj0TktzdCv2bCepIdfwqVwUVWb+GSHm1Jnn8w+40lfhQ3m7lCO7ADRUJy+2unxQ/nzjh2ipC6ye69NDW3l73g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@tanstack/react-devtools": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/@tanstack/react-devtools/-/react-devtools-0.2.2.tgz",
···
         "@types/react-dom": ">=16.8",
         "react": ">=16.8",
         "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.85.6",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.85.6.tgz",
+      "integrity": "sha512-VUAag4ERjh+qlmg0wNivQIVCZUrYndqYu3/wPCVZd4r0E+1IqotbeyGTc+ICroL/PqbpSaGZg02zSWYfcvxbdA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-core": "5.85.6"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19"
       }
     },
     "node_modules/@tanstack/react-router": {
···
       "license": "MIT",
       "bin": {
         "jiti": "lib/jiti-cli.mjs"
+      }
+    },
+    "node_modules/jotai": {
+      "version": "2.13.1",
+      "resolved": "https://registry.npmjs.org/jotai/-/jotai-2.13.1.tgz",
+      "integrity": "sha512-cRsw6kFeGC9Z/D3egVKrTXRweycZ4z/k7i2MrfCzPYsL9SIWcPXTyqv258/+Ay8VUEcihNiE/coBLE6Kic6b8A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@babel/core": ">=7.0.0",
+        "@babel/template": ">=7.0.0",
+        "@types/react": ">=17.0.0",
+        "react": ">=17.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "@babel/template": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
       }
     },
     "node_modules/js-tokens": {

package.json

···
     "@atproto/api": "^0.16.6",
     "@tailwindcss/vite": "^4.0.6",
     "@tanstack/react-devtools": "^0.2.2",
+    "@tanstack/react-query": "^5.85.6",
     "@tanstack/react-router": "^1.130.2",
     "@tanstack/react-router-devtools": "^1.131.5",
     "@tanstack/router-plugin": "^1.121.2",
     "idb-keyval": "^6.2.2",
+    "jotai": "^2.13.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-player": "^3.3.2",

src/components/InfiniteCustomFeed.tsx

···
+import * as React from "react";
+//import { useInView } from "react-intersection-observer";
+import { UniversalPostRendererATURILoader } from "~/components/UniversalPostRenderer";
+import { useAuth } from "~/providers/PassAuthProvider";
+import { useQueryArbitrary, useQueryIdentity, useInfiniteQueryFeedSkeleton } from "~/utils/useQuery";
+
+interface InfiniteCustomFeedProps {
+  feedUri: string;
+  pdsUrl?: string;
+  feedServiceDid?: string;
+}
+
+export function InfiniteCustomFeed({ feedUri, pdsUrl, feedServiceDid }: InfiniteCustomFeedProps) {
+  const { agent, authed } = useAuth();
+  
+  // const identityresultmaybe = useQueryIdentity(agent?.did);
+  // const identity = identityresultmaybe?.data;
+  // const feedGenGetRecordQuery = useQueryArbitrary(feedUri);
+
+  const {
+    data,
+    error,
+    isLoading,
+    isError,
+    hasNextPage,
+    fetchNextPage,
+    isFetchingNextPage,
+  } = useInfiniteQueryFeedSkeleton({
+    feedUri: feedUri,
+    agent: agent ?? undefined,
+    isAuthed: authed ?? false,
+    pdsUrl: pdsUrl,
+    feedServiceDid: feedServiceDid,
+  });
+
+  //const { ref, inView } = useInView();
+
+  // React.useEffect(() => {
+  //   if (inView && hasNextPage && !isFetchingNextPage) {
+  //     fetchNextPage();
+  //   }
+  // }, [inView, hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+  if (isLoading) {
+    return <div className="p-4 text-center text-gray-500">Loading feed...</div>;
+  }
+
+  if (isError) {
+    return <div className="p-4 text-center text-red-500">Error: {error.message}</div>;
+  }
+
+  const allPosts = data?.pages.flatMap((page) => {if (page) return page.feed}) ?? [];
+
+  if (!allPosts || typeof allPosts !== "object" || allPosts.length === 0) {
+    return <div className="p-4 text-center text-gray-500">No posts in this feed.</div>;
+  }
+
+  return (
+    <>
+      {allPosts.map((item, i) => {
+        if (item) return (
+        <UniversalPostRendererATURILoader key={item.post || i} atUri={item.post} />
+      )})}
+      {/* allPosts?: {allPosts ? "true" : "false"}
+      hasNextPage?: {hasNextPage ? "true" : "false"}
+      isFetchingNextPage?: {isFetchingNextPage ? "true" : "false"} */}
+      {isFetchingNextPage && (
+        <div className="p-4 text-center text-gray-500">Loading more...</div>
+      )}
+      {hasNextPage && !isFetchingNextPage && (
+        <button
+          onClick={() => fetchNextPage()}
+          className="w-[calc(100%-2rem)] mx-4 my-4 px-4 py-2 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 font-semibold"
+        >
+          Load More Posts
+        </button>
+      )}
+      {!hasNextPage && <div className="p-4 text-center text-gray-500">End of feed.</div>}
+    </>
+  );
+}

src/components/UniversalPostRenderer.tsx

···
 import { usePersistentStore } from "~/providers/PersistentStoreProvider";
 import { useNavigate } from "@tanstack/react-router";
 import { type SVGProps } from "react";
+import { useHydratedEmbed } from "~/utils/useHydrated";
+import {
+  useQueryPost,
+  useQueryIdentity,
+  useQueryProfile,
+  useQueryConstellation,
+} from "~/utils/useQuery";
 
 function asTyped<T extends { $type: string }>(obj: T): $Typed<T> {
   return obj as $Typed<T>;
···
   detailed?: boolean;
   bottomReplyLine?: boolean;
   topReplyLine?: boolean;
-  bottomBorder?:boolean;
-  feedviewpost?:boolean;
+  bottomBorder?: boolean;
+  feedviewpost?: boolean;
 }
 
-export async function cachedGetRecord({
-  atUri,
-  cacheTimeout = CACHE_TIMEOUT,
-  get,
-  set,
-}: {
-  atUri: string;
-  //resolved: { pdsUrl: string; did: string } | null | undefined;
-  cacheTimeout?: number;
-  get: (key: string) => any;
-  set: (key: string, value: string) => void;
-}): Promise<any> {
-  const cacheKey = `record:${atUri}`;
-  const cached = get(cacheKey);
-  const now = Date.now();
-  if (
-    cached &&
-    cached.value &&
-    cached.time &&
-    now - cached.time < cacheTimeout
-  ) {
-    try {
-      return JSON.parse(cached.value);
-    } catch {
-      // fall through to fetch
-    }
-  }
-  const parsed = parseAtUri(atUri);
-  if (!parsed) return null;
-  const resolved = await cachedResolveIdentity({
-    didOrHandle: parsed.did,
-    get,
-    set,
-  });
-  if (!resolved?.pdsUrl || !resolved?.did)
-    throw new Error("Missing resolved PDS info");
+// export async function cachedGetRecord({
+//   atUri,
+//   cacheTimeout = CACHE_TIMEOUT,
+//   get,
+//   set,
+// }: {
+//   atUri: string;
+//   //resolved: { pdsUrl: string; did: string } | null | undefined;
+//   cacheTimeout?: number;
+//   get: (key: string) => any;
+//   set: (key: string, value: string) => void;
+// }): Promise<any> {
+//   const cacheKey = `record:${atUri}`;
+//   const cached = get(cacheKey);
+//   const now = Date.now();
+//   if (
+//     cached &&
+//     cached.value &&
+//     cached.time &&
+//     now - cached.time < cacheTimeout
+//   ) {
+//     try {
+//       return JSON.parse(cached.value);
+//     } catch {
+//       // fall through to fetch
+//     }
+//   }
+//   const parsed = parseAtUri(atUri);
+//   if (!parsed) return null;
+//   const resolved = await cachedResolveIdentity({
+//     didOrHandle: parsed.did,
+//     get,
+//     set,
+//   });
+//   if (!resolved?.pdsUrl || !resolved?.did)
+//     throw new Error("Missing resolved PDS info");
 
-  if (!parsed) throw new Error("Invalid atUri");
-  const { collection, rkey } = parsed;
-  const url = `${
-    resolved.pdsUrl
-  }/xrpc/com.atproto.repo.getRecord?repo=${encodeURIComponent(
-    resolved.did,
-  )}&collection=${encodeURIComponent(collection)}&rkey=${encodeURIComponent(
-    rkey,
-  )}`;
-  const res = await fetch(url);
-  if (!res.ok) throw new Error("Failed to fetch base record");
-  const data = await res.json();
-  set(cacheKey, JSON.stringify(data));
-  return data;
-}
+//   if (!parsed) throw new Error("Invalid atUri");
+//   const { collection, rkey } = parsed;
+//   const url = `${
+//     resolved.pdsUrl
+//   }/xrpc/com.atproto.repo.getRecord?repo=${encodeURIComponent(
+//     resolved.did,
+//   )}&collection=${encodeURIComponent(collection)}&rkey=${encodeURIComponent(
+//     rkey,
+//   )}`;
+//   const res = await fetch(url);
+//   if (!res.ok) throw new Error("Failed to fetch base record");
+//   const data = await res.json();
+//   set(cacheKey, JSON.stringify(data));
+//   return data;
+// }
 
-export async function cachedResolveIdentity({
-  didOrHandle,
-  cacheTimeout = HANDLE_DID_CACHE_TIMEOUT,
-  get,
-  set,
-}: {
-  didOrHandle: string;
-  cacheTimeout?: number;
-  get: (key: string) => any;
-  set: (key: string, value: string) => void;
-}): Promise<any> {
-  const isDidInput = didOrHandle.startsWith("did:");
-  const cacheKey = `handleDid:${didOrHandle}`;
-  const now = Date.now();
-  const cached = get(cacheKey);
-  if (
-    cached &&
-    cached.value &&
-    cached.time &&
-    now - cached.time < cacheTimeout
-  ) {
-    try {
-      return JSON.parse(cached.value);
-    } catch {}
-  }
-  const url = `https://free-fly-24.deno.dev/?${
-    isDidInput
-      ? `did=${encodeURIComponent(didOrHandle)}`
-      : `handle=${encodeURIComponent(didOrHandle)}`
-  }`;
-  const res = await fetch(url);
-  if (!res.ok) throw new Error("Failed to resolve handle/did");
-  const data = await res.json();
-  set(cacheKey, JSON.stringify(data));
-  if (!isDidInput && data.did) {
-    set(`handleDid:${data.did}`, JSON.stringify(data));
-  }
-  return data;
-}
+// export async function cachedResolveIdentity({
+//   didOrHandle,
+//   cacheTimeout = HANDLE_DID_CACHE_TIMEOUT,
+//   get,
+//   set,
+// }: {
+//   didOrHandle: string;
+//   cacheTimeout?: number;
+//   get: (key: string) => any;
+//   set: (key: string, value: string) => void;
+// }): Promise<any> {
+//   const isDidInput = didOrHandle.startsWith("did:");
+//   const cacheKey = `handleDid:${didOrHandle}`;
+//   const now = Date.now();
+//   const cached = get(cacheKey);
+//   if (
+//     cached &&
+//     cached.value &&
+//     cached.time &&
+//     now - cached.time < cacheTimeout
+//   ) {
+//     try {
+//       return JSON.parse(cached.value);
+//     } catch {}
+//   }
+//   const url = `https://free-fly-24.deno.dev/?${
+//     isDidInput
+//       ? `did=${encodeURIComponent(didOrHandle)}`
+//       : `handle=${encodeURIComponent(didOrHandle)}`
+//   }`;
+//   const res = await fetch(url);
+//   if (!res.ok) throw new Error("Failed to resolve handle/did");
+//   const data = await res.json();
+//   set(cacheKey, JSON.stringify(data));
+//   if (!isDidInput && data.did) {
+//     set(`handleDid:${data.did}`, JSON.stringify(data));
+//   }
+//   return data;
+// }
 
 export function UniversalPostRendererATURILoader({
   atUri,
···
   detailed = false,
   bottomReplyLine,
   topReplyLine,
-  bottomBorder= true,
+  bottomBorder = true,
   feedviewpost = false,
 }: UniversalPostRendererATURILoaderProps) {
   console.log("atUri", atUri);
-  const { get, set } = usePersistentStore();
-  const [record, setRecord] = React.useState<any>(null);
-  const [links, setLinks] = React.useState<any>(null);
+  //const { get, set } = usePersistentStore();
+  //const [record, setRecord] = React.useState<any>(null);
+  //const [links, setLinks] = React.useState<any>(null);
   //const [error, setError] = React.useState<string | null>(null);
   //const [cacheTime, setCacheTime] = React.useState<number | null>(null);
-  const [resolved, setResolved] = React.useState<any>(null); // { did, pdsUrl, bskyPds, handle }
-  const [opProfile, setOpProfile] = React.useState<any>(null);
+  //const [resolved, setResolved] = React.useState<any>(null); // { did, pdsUrl, bskyPds, handle }
+  //const [opProfile, setOpProfile] = React.useState<any>(null);
   // const [opProfileCacheTime, setOpProfileCacheTime] = React.useState<
   //   number | null
   // >(null);
···
   console.log("did", did);
   console.log("rkey", rkey);
 
-  React.useEffect(() => {
-    const checkCache = async () => {
-      const postUri = atUri;
-      const cacheKey = `record:${postUri}`;
-      const cached = await get(cacheKey);
-      const now = Date.now();
-      console.log(
-        "UniversalPostRenderer checking cache for",
-        cacheKey,
-        "cached:",
-        !!cached,
-      );
-      if (
-        cached &&
-        cached.value &&
-        cached.time &&
-        now - cached.time < CACHE_TIMEOUT
-      ) {
-        try {
-          console.log("UniversalPostRenderer found cached data for", cacheKey);
-          setRecord(JSON.parse(cached.value));
-        } catch {
-          setRecord(null);
-        }
-      }
-    };
-    checkCache();
-  }, [atUri, get]);
+  // React.useEffect(() => {
+  //   const checkCache = async () => {
+  //     const postUri = atUri;
+  //     const cacheKey = `record:${postUri}`;
+  //     const cached = await get(cacheKey);
+  //     const now = Date.now();
+  //     console.log(
+  //       "UniversalPostRenderer checking cache for",
+  //       cacheKey,
+  //       "cached:",
+  //       !!cached,
+  //     );
+  //     if (
+  //       cached &&
+  //       cached.value &&
+  //       cached.time &&
+  //       now - cached.time < CACHE_TIMEOUT
+  //     ) {
+  //       try {
+  //         console.log("UniversalPostRenderer found cached data for", cacheKey);
+  //         setRecord(JSON.parse(cached.value));
+  //       } catch {
+  //         setRecord(null);
+  //       }
+  //     }
+  //   };
+  //   checkCache();
+  // }, [atUri, get]);
 
-  React.useEffect(() => {
-    if (!did || record) return;
-    (async () => {
-      try {
-        const resolvedData = await cachedResolveIdentity({
-          didOrHandle: did,
-          get,
-          set,
-        });
-        setResolved(resolvedData);
-      } catch (e: any) {
-        //setError("Failed to resolve handle/did: " + e?.message);
-      }
-    })();
-  }, [did, get, set, record]);
+  const {
+    data: postQuery,
+    isLoading: isPostLoading,
+    isError: isPostError,
+  } = useQueryPost(atUri);
+  //const record = postQuery?.value;
 
-  React.useEffect(() => {
-    if (!resolved || !resolved.pdsUrl || !resolved.did || !rkey || record)
-      return;
-    let ignore = false;
-    (async () => {
-      try {
-        const data = await cachedGetRecord({
-          atUri,
-          get,
-          set,
-        });
-        if (!ignore) setRecord(data);
-      } catch (e: any) {
-        //if (!ignore) setError("Failed to fetch base record: " + e?.message);
-      }
-    })();
-    return () => {
-      ignore = true;
-    };
-  }, [resolved, rkey, atUri, record]);
+  // React.useEffect(() => {
+  //   if (!did || record) return;
+  //   (async () => {
+  //     try {
+  //       const resolvedData = await cachedResolveIdentity({
+  //         didOrHandle: did,
+  //         get,
+  //         set,
+  //       });
+  //       setResolved(resolvedData);
+  //     } catch (e: any) {
+  //       //setError("Failed to resolve handle/did: " + e?.message);
+  //     }
+  //   })();
+  // }, [did, get, set, record]);
 
-  React.useEffect(() => {
-    if (!resolved || !resolved.did || !rkey) return;
-    const fetchLinks = async () => {
-      const postUri = atUri;
-      const cacheKey = `constellation:${postUri}`;
-      const cached = await get(cacheKey);
-      const now = Date.now();
-      if (
-        cached &&
-        cached.value &&
-        cached.time &&
-        now - cached.time < CACHE_TIMEOUT
-      ) {
-        try {
-          const data = JSON.parse(cached.value);
-          setLinks(data);
-          if (onConstellation) onConstellation(data);
-        } catch {
-          setLinks(null);
-        }
-        //setCacheTime(cached.time);
-        return;
-      }
-      try {
-        const url = `https://constellation.microcosm.blue/links/all?target=${encodeURIComponent(
-          atUri,
-        )}`;
-        const res = await fetch(url);
-        if (!res.ok) throw new Error("Failed to fetch constellation links");
-        const data = await res.json();
-        setLinks(data);
-        //setCacheTime(now);
-        set(cacheKey, JSON.stringify(data));
-        if (onConstellation) onConstellation(data);
-      } catch (e: any) {
-        //setError("Failed to fetch constellation links: " + e?.message);
-      }
-    };
-    fetchLinks();
-  }, [resolved, rkey, get, set, atUri, onConstellation]);
+  const { data: resolved } = useQueryIdentity(did || "");
 
-  React.useEffect(() => {
-    if (!record || !resolved || !resolved.did) return;
-    const fetchOpProfile = async () => {
-      const opDid = resolved.did;
-      const postUri = atUri;
-      const cacheKey = `profile:${postUri}`;
-      const cached = await get(cacheKey);
-      const now = Date.now();
-      if (
-        cached &&
-        cached.value &&
-        cached.time &&
-        now - cached.time < CACHE_TIMEOUT
-      ) {
-        try {
-          setOpProfile(JSON.parse(cached.value));
-        } catch {
-          setOpProfile(null);
-        }
-        //setOpProfileCacheTime(cached.time);
-        return;
-      }
-      try {
-        let opResolvedRaw = await get(`handleDid:${opDid}`);
-        let opResolved: any = null;
-        if (
-          opResolvedRaw &&
-          opResolvedRaw.value &&
-          opResolvedRaw.time &&
-          now - opResolvedRaw.time < HANDLE_DID_CACHE_TIMEOUT
-        ) {
-          try {
-            opResolved = JSON.parse(opResolvedRaw.value);
-          } catch {
-            opResolved = null;
-          }
-        } else {
-          const url = `https://free-fly-24.deno.dev/?did=${encodeURIComponent(
-            opDid,
-          )}`;
-          const res = await fetch(url);
-          if (!res.ok) throw new Error("Failed to resolve OP did");
-          opResolved = await res.json();
-          set(`handleDid:${opDid}`, JSON.stringify(opResolved));
-        }
-        if (!opResolved || !opResolved.pdsUrl)
-          throw new Error("OP did resolution failed or missing pdsUrl");
-        const profileUrl = `${
-          opResolved.pdsUrl
-        }/xrpc/com.atproto.repo.getRecord?repo=${encodeURIComponent(
-          opDid,
-        )}&collection=app.bsky.actor.profile&rkey=self`;
-        const profileRes = await fetch(profileUrl);
-        if (!profileRes.ok) throw new Error("Failed to fetch OP profile");
-        const profileData = await profileRes.json();
-        setOpProfile(profileData);
-        //setOpProfileCacheTime(now);
-        set(cacheKey, JSON.stringify(profileData));
-      } catch (e: any) {
-        //setError("Failed to fetch OP profile: " + e?.message);
-      }
-    };
-    fetchOpProfile();
-  }, [record, get, set, rkey, resolved, atUri]);
+  // React.useEffect(() => {
+  //   if (!resolved || !resolved.pdsUrl || !resolved.did || !rkey || record)
+  //     return;
+  //   let ignore = false;
+  //   (async () => {
+  //     try {
+  //       const data = await cachedGetRecord({
+  //         atUri,
+  //         get,
+  //         set,
+  //       });
+  //       if (!ignore) setRecord(data);
+  //     } catch (e: any) {
+  //       //if (!ignore) setError("Failed to fetch base record: " + e?.message);
+  //     }
+  //   })();
+  //   return () => {
+  //     ignore = true;
+  //   };
+  // }, [resolved, rkey, atUri, record]);
+
+  // React.useEffect(() => {
+  //   if (!resolved || !resolved.did || !rkey) return;
+  //   const fetchLinks = async () => {
+  //     const postUri = atUri;
+  //     const cacheKey = `constellation:${postUri}`;
+  //     const cached = await get(cacheKey);
+  //     const now = Date.now();
+  //     if (
+  //       cached &&
+  //       cached.value &&
+  //       cached.time &&
+  //       now - cached.time < CACHE_TIMEOUT
+  //     ) {
+  //       try {
+  //         const data = JSON.parse(cached.value);
+  //         setLinks(data);
+  //         if (onConstellation) onConstellation(data);
+  //       } catch {
+  //         setLinks(null);
+  //       }
+  //       //setCacheTime(cached.time);
+  //       return;
+  //     }
+  //     try {
+  //       const url = `https://constellation.microcosm.blue/links/all?target=${encodeURIComponent(
+  //         atUri,
+  //       )}`;
+  //       const res = await fetch(url);
+  //       if (!res.ok) throw new Error("Failed to fetch constellation links");
+  //       const data = await res.json();
+  //       setLinks(data);
+  //       //setCacheTime(now);
+  //       set(cacheKey, JSON.stringify(data));
+  //       if (onConstellation) onConstellation(data);
+  //     } catch (e: any) {
+  //       //setError("Failed to fetch constellation links: " + e?.message);
+  //     }
+  //   };
+  //   fetchLinks();
+  // }, [resolved, rkey, get, set, atUri, onConstellation]);
+
+  const { data: links } = useQueryConstellation({
+    method: "/links/all",
+    target: atUri,
+  });
+
+  // React.useEffect(() => {
+  //   if (!record || !resolved || !resolved.did) return;
+  //   const fetchOpProfile = async () => {
+  //     const opDid = resolved.did;
+  //     const postUri = atUri;
+  //     const cacheKey = `profile:${postUri}`;
+  //     const cached = await get(cacheKey);
+  //     const now = Date.now();
+  //     if (
+  //       cached &&
+  //       cached.value &&
+  //       cached.time &&
+  //       now - cached.time < CACHE_TIMEOUT
+  //     ) {
+  //       try {
+  //         setOpProfile(JSON.parse(cached.value));
+  //       } catch {
+  //         setOpProfile(null);
+  //       }
+  //       //setOpProfileCacheTime(cached.time);
+  //       return;
+  //     }
+  //     try {
+  //       let opResolvedRaw = await get(`handleDid:${opDid}`);
+  //       let opResolved: any = null;
+  //       if (
+  //         opResolvedRaw &&
+  //         opResolvedRaw.value &&
+  //         opResolvedRaw.time &&
+  //         now - opResolvedRaw.time < HANDLE_DID_CACHE_TIMEOUT
+  //       ) {
+  //         try {
+  //           opResolved = JSON.parse(opResolvedRaw.value);
+  //         } catch {
+  //           opResolved = null;
+  //         }
+  //       } else {
+  //         const url = `https://free-fly-24.deno.dev/?did=${encodeURIComponent(
+  //           opDid,
+  //         )}`;
+  //         const res = await fetch(url);
+  //         if (!res.ok) throw new Error("Failed to resolve OP did");
+  //         opResolved = await res.json();
+  //         set(`handleDid:${opDid}`, JSON.stringify(opResolved));
+  //       }
+  //       if (!opResolved || !opResolved.pdsUrl)
+  //         throw new Error("OP did resolution failed or missing pdsUrl");
+  //       const profileUrl = `${
+  //         opResolved.pdsUrl
+  //       }/xrpc/com.atproto.repo.getRecord?repo=${encodeURIComponent(
+  //         opDid,
+  //       )}&collection=app.bsky.actor.profile&rkey=self`;
+  //       const profileRes = await fetch(profileUrl);
+  //       if (!profileRes.ok) throw new Error("Failed to fetch OP profile");
+  //       const profileData = await profileRes.json();
+  //       setOpProfile(profileData);
+  //       //setOpProfileCacheTime(now);
+  //       set(cacheKey, JSON.stringify(profileData));
+  //     } catch (e: any) {
+  //       //setError("Failed to fetch OP profile: " + e?.message);
+  //     }
+  //   };
+  //   fetchOpProfile();
+  // }, [record, get, set, rkey, resolved, atUri]);
+
+  const { data: opProfile } = useQueryProfile(
+    resolved ? `at://${resolved?.did}/app.bsky.actor.profile/self` : undefined
+  );
 
   // const displayName =
   //   opProfile?.value?.displayName || resolved?.handle || resolved?.did;
···
     setLikes(
       links
         ? links?.links?.["app.bsky.feed.like"]?.[".subject.uri"]?.records || 0
-        : null,
+        : null
     );
     setReposts(
       links
         ? links?.links?.["app.bsky.feed.repost"]?.[".subject.uri"]?.records || 0
-        : null,
+        : null
     );
     setReplies(
       links
         ? links?.links?.["app.bsky.feed.post"]?.[".reply.parent.uri"]
             ?.records || 0
-        : null,
+        : null
     );
   }, [links]);
 
···
   return (
     <UniversalPostRendererRawRecordShim
       detailed={detailed}
-      postRecord={record}
+      postRecord={postQuery}
       profileRecord={opProfile}
       aturi={atUri}
       resolved={resolved}
···
   detailed = false,
   bottomReplyLine = false,
   topReplyLine = false,
-  bottomBorder= true,
-  feedviewpost= false,
+  bottomBorder = true,
+  feedviewpost = false,
 }: {
   postRecord: any;
   profileRecord: any;
···
   bottomBorder?: boolean;
   feedviewpost?: boolean;
 }) {
+  console.log(`received aturi: ${aturi} of post content: ${postRecord}`);
   const navigate = useNavigate();
 
-  const { get, set } = usePersistentStore();
+  //const { get, set } = usePersistentStore();
   function getAvatarUrl(opProfile: any) {
     const link = opProfile?.value?.avatar?.ref?.["$link"];
     if (!link) return null;
     return `https://cdn.bsky.app/img/avatar/plain/${resolved?.did}/${link}@jpeg`;
   }
 
-  const [hydratedEmbed, setHydratedEmbed] = useState<any>(undefined);
+  // const [hydratedEmbed, setHydratedEmbed] = useState<any>(undefined);
 
-  useEffect(() => {
-    const run = async () => {
-      if (!postRecord?.value?.embed) return;
-      const embed = postRecord?.value?.embed;
-      if (!embed || !embed.$type) {
-        setHydratedEmbed(undefined);
-        return;
-      }
+  // useEffect(() => {
+  //   const run = async () => {
+  //     if (!postRecord?.value?.embed) return;
+  //     const embed = postRecord?.value?.embed;
+  //     if (!embed || !embed.$type) {
+  //       setHydratedEmbed(undefined);
+  //       return;
+  //     }
 
-      try {
-        let result: any;
+  //     try {
+  //       let result: any;
 
-        if (embed?.$type === "app.bsky.embed.recordWithMedia") {
-          const mediaEmbed = embed.media;
+  //       if (embed?.$type === "app.bsky.embed.recordWithMedia") {
+  //         const mediaEmbed = embed.media;
 
-          let hydratedMedia;
-          if (mediaEmbed?.$type === "app.bsky.embed.images") {
-            hydratedMedia = hydrateEmbedImages(mediaEmbed, resolved?.did);
-          } else if (mediaEmbed?.$type === "app.bsky.embed.external") {
-            hydratedMedia = hydrateEmbedExternal(mediaEmbed, resolved?.did);
-          } else if (mediaEmbed?.$type === "app.bsky.embed.video") {
-            hydratedMedia = hydrateEmbedVideo(mediaEmbed, resolved?.did);
-          } else {
-            throw new Error("idiot");
-          }
-          if (!hydratedMedia) throw new Error("idiot");
+  //         let hydratedMedia;
+  //         if (mediaEmbed?.$type === "app.bsky.embed.images") {
+  //           hydratedMedia = hydrateEmbedImages(mediaEmbed, resolved?.did);
+  //         } else if (mediaEmbed?.$type === "app.bsky.embed.external") {
+  //           hydratedMedia = hydrateEmbedExternal(mediaEmbed, resolved?.did);
+  //         } else if (mediaEmbed?.$type === "app.bsky.embed.video") {
+  //           hydratedMedia = hydrateEmbedVideo(mediaEmbed, resolved?.did);
+  //         } else {
+  //           throw new Error("idiot");
+  //         }
+  //         if (!hydratedMedia) throw new Error("idiot");
 
-          // hydrate the outer recordWithMedia now using the hydrated media
-          result = await hydrateEmbedRecordWithMedia(
-            embed,
-            resolved?.did,
-            hydratedMedia,
-            get,
-            set,
-          );
-        } else {
-          const hydrated =
-            embed?.$type === "app.bsky.embed.images"
-              ? hydrateEmbedImages(embed, resolved?.did)
-              : embed?.$type === "app.bsky.embed.external"
-                ? hydrateEmbedExternal(embed, resolved?.did)
-                : embed?.$type === "app.bsky.embed.video"
-                  ? hydrateEmbedVideo(embed, resolved?.did)
-                  : embed?.$type === "app.bsky.embed.record"
-                    ? hydrateEmbedRecord(embed, resolved?.did, get, set)
-                    : undefined;
+  //         // hydrate the outer recordWithMedia now using the hydrated media
+  //         result = await hydrateEmbedRecordWithMedia(
+  //           embed,
+  //           resolved?.did,
+  //           hydratedMedia,
+  //           get,
+  //           set,
+  //         );
+  //       } else {
+  //         const hydrated =
+  //           embed?.$type === "app.bsky.embed.images"
+  //             ? hydrateEmbedImages(embed, resolved?.did)
+  //             : embed?.$type === "app.bsky.embed.external"
+  //               ? hydrateEmbedExternal(embed, resolved?.did)
+  //               : embed?.$type === "app.bsky.embed.video"
+  //                 ? hydrateEmbedVideo(embed, resolved?.did)
+  //                 : embed?.$type === "app.bsky.embed.record"
+  //                   ? hydrateEmbedRecord(embed, resolved?.did, get, set)
+  //                   : undefined;
 
-          result = hydrated instanceof Promise ? await hydrated : hydrated;
-        }
+  //         result = hydrated instanceof Promise ? await hydrated : hydrated;
+  //       }
 
-        console.log(
-          String(result) + " hydrateEmbedRecordWithMedia hey hyeh ye",
-        );
-        setHydratedEmbed(result);
-      } catch (e) {
-        console.error("Error hydrating embed", e);
-        setHydratedEmbed(undefined);
-      }
-    };
+  //       console.log(
+  //         String(result) + " hydrateEmbedRecordWithMedia hey hyeh ye",
+  //       );
+  //       setHydratedEmbed(result);
+  //     } catch (e) {
+  //       console.error("Error hydrating embed", e);
+  //       setHydratedEmbed(undefined);
+  //     }
+  //   };
+
+  //   run();
+  // }, [postRecord, resolved?.did]);
 
-    run();
-  }, [postRecord, resolved?.did]);
+  const {
+    data: hydratedEmbed,
+    isLoading: isEmbedLoading,
+    error: embedError,
+  } = useHydratedEmbed(postRecord?.value?.embed, resolved?.did);
 
   const parsedaturi = parseAtUri(aturi);
 
-  const fakepost = React.useMemo<AppBskyFeedDefs.PostView>(() => ({
-    $type: "app.bsky.feed.defs#postView",
-    uri: aturi,
-    cid: postRecord?.cid || "",
-    author: {
-      did: resolved?.did || "",
-      handle: resolved?.handle || "",
-      displayName: profileRecord?.value?.displayName || "",
-      avatar: getAvatarUrl(profileRecord) || "",
+  const fakepost = React.useMemo<AppBskyFeedDefs.PostView>(
+    () => ({
+      $type: "app.bsky.feed.defs#postView",
+      uri: aturi,
+      cid: postRecord?.cid || "",
+      author: {
+        did: resolved?.did || "",
+        handle: resolved?.handle || "",
+        displayName: profileRecord?.value?.displayName || "",
+        avatar: getAvatarUrl(profileRecord) || "",
+        viewer: undefined,
+        labels: profileRecord?.labels || undefined,
+        verification: undefined,
+      },
+      record: postRecord?.value || {},
+      embed: hydratedEmbed ?? undefined,
+      replyCount: repliesCount ?? 0,
+      repostCount: repostsCount ?? 0,
+      likeCount: likesCount ?? 0,
+      quoteCount: 0,
+      indexedAt: postRecord?.value?.createdAt || "",
       viewer: undefined,
-      labels: profileRecord?.labels || undefined,
-      verification: undefined,
-    },
-    record: postRecord?.value || {},
-    embed: hydratedEmbed ?? undefined,
-    replyCount: repliesCount ?? 0,
-    repostCount: repostsCount ?? 0,
-    likeCount: likesCount ?? 0,
-    quoteCount: 0,
-    indexedAt: postRecord?.value?.createdAt || "",
-    viewer: undefined,
-    labels: postRecord?.labels || undefined,
-    threadgate: undefined,
-  }), [
-    aturi,
-    postRecord,
-    profileRecord,
-    hydratedEmbed,
-    repliesCount,
-    repostsCount,
-    likesCount,
-    resolved,
-  ]);
+      labels: postRecord?.labels || undefined,
+      threadgate: undefined,
+    }),
+    [
+      aturi,
+      postRecord,
+      profileRecord,
+      hydratedEmbed,
+      repliesCount,
+      repostsCount,
+      likesCount,
+      resolved,
+    ]
+  );
 
-  const [feedviewpostreplyhandle, setFeedviewpostreplyhandle] = useState<string | undefined>(undefined);
+  //const [feedviewpostreplyhandle, setFeedviewpostreplyhandle] = useState<string | undefined>(undefined);
 
-  useEffect(() => {
-    if(!feedviewpost) return;
-    let cancelled = false;
+  // useEffect(() => {
+  //   if(!feedviewpost) return;
+  //   let cancelled = false;
 
-    const run = async () => {
-      const thereply = (fakepost?.record as AppBskyFeedPost.Record)?.reply?.parent?.uri;
-      const feedviewpostreplydid = thereply ? new AtUri(thereply).host : undefined;
-
-      if (feedviewpostreplydid) {
-        const opi = await cachedResolveIdentity({
-          didOrHandle: feedviewpostreplydid,
-          get,
-          set,
-        });
+  //   const run = async () => {
+  //     const thereply = (fakepost?.record as AppBskyFeedPost.Record)?.reply?.parent?.uri;
+  //     const feedviewpostreplydid = thereply ? new AtUri(thereply).host : undefined;
 
-        if (!cancelled) {
-          setFeedviewpostreplyhandle(opi?.handle);
-        }
-      }
-    };
+  //     if (feedviewpostreplydid) {
+  //       const opi = await cachedResolveIdentity({
+  //         didOrHandle: feedviewpostreplydid,
+  //         get,
+  //         set,
+  //       });
 
-    run();
+  //       if (!cancelled) {
+  //         setFeedviewpostreplyhandle(opi?.handle);
+  //       }
+  //     }
+  //   };
 
-    return () => {
-      cancelled = true;
-    };
-  }, [fakepost, get, set]);
+  //   run();
 
+  //   return () => {
+  //     cancelled = true;
+  //   };
+  // }, [fakepost, get, set]);
+  const thereply = (fakepost?.record as AppBskyFeedPost.Record)?.reply?.parent
+    ?.uri;
+  const feedviewpostreplydid = thereply ? new AtUri(thereply).host : undefined;
+  const replyhookvalue = useQueryIdentity(
+    feedviewpost ? feedviewpostreplydid : undefined
+  );
+  const feedviewpostreplyhandle = replyhookvalue?.data?.handle;
   return (
     <>
       {/* <p>
···
   );
 }
 
-function hydrateEmbedImages(
-  embed: any,
-  did: string,
-): $Typed<AppBskyEmbedImages.View> | undefined {
-  if (!embed || embed.$type !== "app.bsky.embed.images") return undefined;
-  if (!Array.isArray(embed.images)) return undefined;
-  return asTyped({
-    $type: "app.bsky.embed.images#view" as const, // <-- literal type
-    images: embed.images
-      .map((img: any) => {
-        const link = img?.image?.ref?.["$link"];
-        if (!link) return null;
-        return {
-          thumb: `https://cdn.bsky.app/img/feed_thumbnail/plain/${did}/${link}@jpeg`,
-          fullsize: `https://cdn.bsky.app/img/feed_fullsize/plain/${did}/${link}@jpeg`,
-          alt: img.alt || "",
-          aspectRatio: img.aspectRatio,
-        };
-      })
-      .filter(Boolean),
-  });
-}
-
-function hydrateEmbedExternal(
-  /*{embed, did} : {*/ embed: any,
-  did: string, //}
-): $Typed<AppBskyEmbedExternal.View> | undefined {
-  if (!embed || embed.$type !== "app.bsky.embed.external") return undefined;
-  if (!embed.external) return undefined;
-  return asTyped({
-    $type: "app.bsky.embed.external#view" as const,
-    external: {
-      uri: embed.external.uri,
-      title: embed.external.title,
-      description: embed.external.description,
-      thumb: embed?.external?.thumb?.ref?.$link
-        ? `https://cdn.bsky.app/img/feed_thumbnail/plain/${did}/${embed.external.thumb.ref.$link}@jpeg`
-        : undefined,
-    },
-  });
-}
-
-function hydrateEmbedVideo(
-  embed: any,
-  did: string,
-): $Typed<AppBskyEmbedVideo.View> | undefined {
-  if (!embed || embed.$type !== "app.bsky.embed.video") return undefined;
-  if (!embed.video || !embed.video.ref?.$link) return undefined;
-
-  const videoLink = embed.video.ref.$link;
-
-  return asTyped({
-    $type: "app.bsky.embed.video#view" as const,
-    playlist: `https://video.bsky.app/watch/${did}/${videoLink}/playlist.m3u8`,
-    thumbnail: `https://video.bsky.app/watch/${did}/${videoLink}/thumbnail.jpg`,
-    aspectRatio: embed.aspectRatio,
-    cid: videoLink,
-  });
-}
-async function hydrateEmbedRecordWithMedia(
-  embed: any,
-  did: string,
-  mediaHydratedEmbed:
-    | $Typed<AppBskyEmbedImages.View>
-    | $Typed<AppBskyEmbedVideo.View>
-    | $Typed<AppBskyEmbedExternal.View>
-    | { $type: string },
-  get: (key: string) => any,
-  set: (key: string, value: string) => void,
-): Promise<$Typed<AppBskyEmbedRecordWithMedia.View> | undefined> {
-  //return({"hello": "wow"} as any)
-  console.log("hydrateEmbedRecordWithMedia called!!");
-  if (!embed || embed.$type !== "app.bsky.embed.recordWithMedia")
-    return undefined;
-  console.log("hydrateEmbedRecordWithMedia 1!!");
-  async function deferredrecordget(): Promise<
-    $Typed<AppBskyEmbedRecord.ViewRecord>
-  > {
-    console.log("hydrateEmbedRecordWithMedia 3!!");
-    const quoterr = await cachedGetRecord({
-      atUri: embed.record.record.uri,
-      get,
-      set,
-    });
-    async function defferedQuotedRecordget(): Promise<{
-      [_ in string]: unknown;
-    }> {
-      console.log("hydrateEmbedRecordWithMedia 4!!");
-      return quoterr.value;
-    }
-    async function defferedOPRecordget(): Promise<
-      $Typed<AppBskyActorDefs.ProfileViewBasic>
-    > {
-      const parseduri = parseAtUri(embed.record.record.uri);
-      if (!parseduri) throw new Error("invalid uri");
-      console.log("deep- hydrateEmbedRecordWithMedia " + parseduri.did);
-      const didwhat = parseduri?.did;
-      console.log("hydrateEmbedRecordWithMedia 4.97!!");
-      const opr = await cachedGetRecord({
-        atUri: `at://${didwhat}/app.bsky.actor.profile/self`,
-        get,
-        set,
-      });
-      console.log("hydrateEmbedRecordWithMedia 4.98!! opr:" + opr);
-      const opi = await cachedResolveIdentity({
-        didOrHandle: didwhat,
-        get,
-        set,
-      });
-      console.log("hydrateEmbedRecordWithMedia 4.99!!");
-      console.log("hydrateEmbedRecordWithMedia 5!!");
-      const thedid = didwhat;
-      console.log("hydrateEmbedRecordWithMedia 5.01!! " + thedid);
-      const thehandle = opi?.handle || "";
-      console.log("hydrateEmbedRecordWithMedia 5.02!! " + thehandle);
-      const thedisplayname = (opr.value?.displayName ?? opi?.handle) || "";
-      console.log("hydrateEmbedRecordWithMedia 5.03!! " + thedisplayname);
-      const theavatar = opr.value?.avatar?.ref?.$link
-        ? `https://cdn.bsky.app/img/avatar/plain/${didwhat}/${opr.value?.avatar?.ref?.$link}@jpeg`
-        : undefined;
-      console.log("hydrateEmbedRecordWithMedia 5.04!! " + theavatar);
-      console.log("hydrateEmbedRecordWithMedia 5.05!!");
-      const thecreatedat = opr.value?.createdAt ?? undefined;
-      console.log("hydrateEmbedRecordWithMedia 5.06!! " + thecreatedat);
-      console.log("hydrateEmbedRecordWithMedia 5.07!!");
-      console.log("hydrateEmbedRecordWithMedia 5.08!!");
-      const crying = {
-        $type: "app.bsky.actor.defs#profileViewBasic" as const,
-        did: thedid,
-        handle: thehandle,
-        displayName: thedisplayname,
-        avatar: theavatar,
-        associated: {
-          chat: {
-            allowIncoming: "all",
-          },
-        },
-        labels: [],
-        createdAt: thecreatedat,
-      };
-      return asTyped(crying);
-    }
-
-    const record = await defferedQuotedRecordget();
-    const OP = await defferedOPRecordget();
-
-    console.log("hydrateEmbedRecordWithMedia victory-lap 6!!");
-    return asTyped({
-      $type: "app.bsky.embed.record#viewRecord" as const,
-      uri: embed.record.record.uri,
-      cid: embed.record.record.cid,
-      indexedAt: String(record.createdAt || "") || "",
-      author: OP,
-      value: record,
-    });
-  }
-  console.log("hydrateEmbedRecordWithMedia 2!!");
-
-  const recordion = await deferredrecordget();
-  console.log("hydrateEmbedRecordWithMedia victory-lap 7!!");
-
-  const final = asTyped({
-    $type: "app.bsky.embed.recordWithMedia#view" as const,
-    record: {
-      //$type: "app.bsky.embed.record#view" as const,
-      record: recordion,
-    },
-    media: mediaHydratedEmbed,
-    // media: asTyped({
-    //   $type: "app.bsky.embed.images" as const,
-    //   images: embed.media.images
-    //     ? embed.media.images
-    //         .map((img: any) => {
-    //           const link = img?.image?.ref?.["$link"];
-    //           if (!link) return null;
-    //           return {
-    //             thumb: `https://cdn.bsky.app/img/feed_thumbnail/plain/${did}/${link}@jpeg`,
-    //             fullsize: `https://cdn.bsky.app/img/feed_fullsize/plain/${did}/${link}@jpeg`,
-    //             alt: img.alt || "",
-    //             aspectRatio: img.aspectRatio,
-    //           };
-    //         })
-    //         .filter(Boolean)
-    //     : undefined,
-    // }),
-  });
-  console.log("hydrateEmbedRecordWithMedia final " + final);
-  return final;
-}
-
-async function hydrateEmbedRecord(
-  embed: any,
-  did: string,
-  get: (key: string) => any,
-  set: (key: string, value: string) => void,
-): Promise<$Typed<AppBskyEmbedRecord.View> | undefined> {
-  if (!embed || embed.$type !== "app.bsky.embed.record") return undefined;
-
-  const recordRef = embed.record?.record?.uri
-    ? embed.record.record
-    : embed.record;
-
-  const quoted = await cachedGetRecord({
-    atUri: recordRef.uri,
-    get,
-    set,
-  });
-
-  const parseduri = parseAtUri(recordRef.uri);
-  if (!parseduri) throw new Error("invalid uri");
-  const didwhat = parseduri.did;
-
-  const opr = await cachedGetRecord({
-    atUri: `at://${didwhat}/app.bsky.actor.profile/self`,
-    get,
-    set,
-  });
-  const opi = await cachedResolveIdentity({
-    didOrHandle: didwhat,
-    get,
-    set,
-  });
-
-  const author = {
-    $type: "app.bsky.actor.defs#profileViewBasic" as const,
-    did: didwhat,
-    handle: opi?.handle || "",
-    displayName: (opr.value?.displayName ?? opi?.handle) || "",
-    avatar: opr.value?.avatar?.ref?.$link
-      ? `https://cdn.bsky.app/img/avatar/plain/${didwhat}/${opr.value?.avatar?.ref?.$link}@jpeg`
-      : undefined,
-    associated: {
-      chat: {
-        allowIncoming: "all",
-      },
-    },
-    labels: [],
-    createdAt: opr.value?.createdAt ?? undefined,
-  };
-
-  const viewRecord: $Typed<AppBskyEmbedRecord.ViewRecord> = asTyped({
-    $type: "app.bsky.embed.record#viewRecord" as const,
-    uri: recordRef.uri,
-    cid: recordRef.cid,
-    indexedAt: String(quoted.value.createdAt || "") || "",
-    author,
-    value: quoted.value,
-    replyCount: quoted.value.replyCount,
-    repostCount: quoted.value.repostCount,
-    likeCount: quoted.value.likeCount,
-    quoteCount: quoted.value.quoteCount,
-    labels: quoted.value.labels,
-    embeds: quoted.value.embed ? [quoted.value.embed] : undefined,
-  });
-
-  return asTyped({
-    $type: "app.bsky.embed.record#view" as const,
-    record: viewRecord,
-  });
-}
-
 export function parseAtUri(
-  atUri: string,
+  atUri: string
 ): { did: string; collection: string; rkey: string } | null {
   const PREFIX = "at://";
   if (!atUri.startsWith(PREFIX)) {
···
 //import Masonry from "@mui/lab/Masonry";
 import {
   AppBskyActorDefs,
+  AppBskyActorProfile,
   AppBskyEmbedDefs,
   AppBskyEmbedExternal,
   AppBskyEmbedImages,
···
     "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
   return Array.from(
     { length },
-    () => chars[Math.floor(Math.random() * chars.length)],
+    () => chars[Math.floor(Math.random() * chars.length)]
   ).join("");
 }
 
···
   salt,
   bottomBorder = true,
   feedviewpostreplyhandle,
+  depth = 0,
 }: {
   post: PostView;
   // optional for now because i havent ported every use to this yet
···
   salt: string;
   bottomBorder?: boolean;
   feedviewpostreplyhandle?: string;
+  depth?: number;
 }) {
   const navigate = useNavigate();
   const [hasRetweeted, setHasRetweeted] = useState<Boolean>(
-    post.viewer?.repost ? true : false,
+    post.viewer?.repost ? true : false
   );
   const [hasLiked, setHasLiked] = useState<Boolean>(
-    post.viewer?.like ? true : false,
+    post.viewer?.like ? true : false
   );
   const { agent } = useAuth();
   const [likeUri, setLikeUri] = useState<string | undefined>(post.viewer?.like);
   const [retweetUri, setRetweetUri] = useState<string | undefined>(
-    post.viewer?.repost,
+    post.viewer?.repost
   );
 
   const likeOrUnlikePost = async () => {
···
         //boxShadow: "0 2px 8px rgba(0,0,0,0.04)",
         position: "relative",
         // dont cursor: "pointer",
-        borderBottomWidth: bottomBorder ? isQuote ? 0 : 1 : 0,
+        borderBottomWidth: bottomBorder ? (isQuote ? 0 : 1) : 0,
       }}
       className="border-gray-300 dark:border-gray-600"
     >
···
                 gap: 4,
                 alignItems: "center",
                 //marginLeft: 36,
-                height: !(expanded || isQuote) && !!feedviewpostreplyhandle ? "1rem" : 0,
-                opacity: !(expanded || isQuote) && !!feedviewpostreplyhandle ? 1 : 0,
+                height:
+                  !(expanded || isQuote) && !!feedviewpostreplyhandle
+                    ? "1rem"
+                    : 0,
+                opacity:
+                  !(expanded || isQuote) && !!feedviewpostreplyhandle ? 1 : 0,
               }}
               className="text-gray-500 dark:text-gray-400"
             >
···
           <div
             style={{
               fontSize: 16,
-              marginBottom: (!post.embed && !expanded) ? 0 : 8,
+              marginBottom: !post.embed /*|| depth > 0*/ ? 0 : 8,
               whiteSpace: "pre-wrap",
               textAlign: "left",
               overflowWrap: "anywhere",
···
             }}
             className="text-gray-900 dark:text-gray-100"
           >
-            {renderTextWithFacets(
-              (post.record as { text?: string }).text ?? "",
-              (post.record.facets as Facet[]) ?? [],
-            )}
+            {renderTextWithFacets({
+              text: (post.record as { text?: string }).text ?? "",
+              facets: (post.record.facets as Facet[]) ?? [],
+              navigate: navigate
+            })}
             {}
           </div>
-          {post.embed ? (
+          {post.embed && depth < 1 ? (
             <PostEmbeds
               embed={post.embed}
               //moderation={moderation}
···
               navigate={navigate}
             />
           ) : null}
-          <div style={{ paddingTop: post.embed ? 4 : 0 }}>
+          {post.embed && depth > 0 && (
+            <>
+              <div className="border-gray-300 dark:border-gray-600 p-3 rounded-xl border italic text-gray-400">
+                (there is an embed here thats too deep to render)
+              </div>
+            </>
+          )}
+          <div style={{ paddingTop: post.embed && depth < 1 ? 4 : 0 }}>
             <>
               {expanded && (
                 <div
···
                             "/profile/" +
                             post.author.handle +
                             "/post/" +
-                            post.uri.split("/").pop(),
+                            post.uri.split("/").pop()
                         );
                       } catch {}
                     }}
···
                 });
               }
             }}
+            depth={1}
           />
         </div>
         {/* <QuotePostRenderer
···
                 });
               }
             }}
+            depth={1}
           />
         </div>
       );
···
       src: img.fullsize,
       alt: img.alt,
     }));
-
 
     if (images.length > 0) {
       // const items = embed.images.map(img => ({
···
               }}
               className="border border-gray-200 dark:border-gray-700 bg-gray-200 dark:bg-gray-900"
             >
-            {lightboxIndex !== null && (
-              <Lightbox
-                images={lightboxImages}
-                index={lightboxIndex}
-                onClose={() => setLightboxIndex(null)}
-                onNavigate={(newIndex) => setLightboxIndex(newIndex)}
-              />
-            )}
+              {lightboxIndex !== null && (
+                <Lightbox
+                  images={lightboxImages}
+                  index={lightboxIndex}
+                  onClose={() => setLightboxIndex(null)}
+                  onNavigate={(newIndex) => setLightboxIndex(newIndex)}
+                />
+              )}
               <img
                 src={image.fullsize}
                 alt={image.alt}
···
                   height: "100%",
                   objectFit: "contain", // letterbox or scale to fit
                 }}
-                onClick={(e) => {e.stopPropagation();setLightboxIndex(0)}}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setLightboxIndex(0);
+                }}
               />
             </div>
           </div>
···
                     objectFit: "cover",
                     borderRadius: i === 0 ? "12px 0 0 12px" : "0 12px 12px 0",
                   }}
-                  onClick={(e) => {e.stopPropagation();setLightboxIndex(i)}}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setLightboxIndex(i);
+                  }}
                 />
               </div>
             ))}
···
                   objectFit: "cover",
                   borderRadius: "12px 0 0 12px",
                 }}
-                onClick={(e) => {e.stopPropagation();setLightboxIndex(0)}}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setLightboxIndex(0);
+                }}
               />
             </div>
             {/* Right: two stacked 2:1 */}
···
                       objectFit: "cover",
                       borderRadius: i === 1 ? "0 12px 0 0" : "0 0 12px 0",
                     }}
-                    onClick={(e) => {e.stopPropagation();setLightboxIndex(i+1)}}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setLightboxIndex(i + 1);
+                    }}
                   />
                 </div>
               ))}
···
                             ? "0 0 0 12px"
                             : "0 0 12px 0",
                   }}
-                  onClick={(e) => {e.stopPropagation();setLightboxIndex(i)}}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setLightboxIndex(i);
+                  }}
                 />
               </div>
             ))}
···
 }
 
 import { createPortal } from "react-dom";
+import type { Record } from "@atproto/api/dist/client/types/app/bsky/actor/profile";
 type LightboxProps = {
   images: { src: string; alt?: string }[];
   index: number;
   onClose: () => void;
   onNavigate?: (newIndex: number) => void;
 };
-export function Lightbox({ images, index, onClose, onNavigate }: LightboxProps) {
+export function Lightbox({
+  images,
+  index,
+  onClose,
+  onNavigate,
+}: LightboxProps) {
   const image = images[index];
 
   useEffect(() => {
     function handleKey(e: KeyboardEvent) {
       if (e.key === "Escape") onClose();
-      if (e.key === "ArrowRight" && onNavigate) onNavigate((index + 1) % images.length);
-      if (e.key === "ArrowLeft" && onNavigate) onNavigate((index - 1 + images.length) % images.length);
+      if (e.key === "ArrowRight" && onNavigate)
+        onNavigate((index + 1) % images.length);
+      if (e.key === "ArrowLeft" && onNavigate)
+        onNavigate((index - 1 + images.length) % images.length);
     }
     window.addEventListener("keydown", handleKey);
     return () => window.removeEventListener("keydown", handleKey);
···
   return createPortal(
     <div
       className="fixed inset-0 z-50 flex items-center justify-center bg-black/80"
-      onClick={(e)=>{e.stopPropagation();onClose()}}
+      onClick={(e) => {
+        e.stopPropagation();
+        onClose();
+      }}
     >
       <img
         src={image.src}
···
             }}
             className="absolute left-4 top-1/2 -translate-y-1/2 text-white text-4xl h-8 w-8 rounded-full bg-gray-900 flex items-center justify-center"
           >
-            <svg xmlns="http://www.w3.org/2000/svg" width={28} height={28} viewBox="0 0 24 24"><g fill="none" fillRule="evenodd"><path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"></path><path fill="currentColor" d="M8.293 12.707a1 1 0 0 1 0-1.414l5.657-5.657a1 1 0 1 1 1.414 1.414L10.414 12l4.95 4.95a1 1 0 0 1-1.414 1.414z"></path></g></svg>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width={28}
+              height={28}
+              viewBox="0 0 24 24"
+            >
+              <g fill="none" fillRule="evenodd">
+                <path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"></path>
+                <path
+                  fill="currentColor"
+                  d="M8.293 12.707a1 1 0 0 1 0-1.414l5.657-5.657a1 1 0 1 1 1.414 1.414L10.414 12l4.95 4.95a1 1 0 0 1-1.414 1.414z"
+                ></path>
+              </g>
+            </svg>
           </button>
           <button
             onClick={(e) => {
···
             }}
             className="absolute right-4 top-1/2 -translate-y-1/2 text-white text-4xl h-8 w-8 rounded-full bg-gray-900 flex items-center justify-center"
           >
-            <svg xmlns="http://www.w3.org/2000/svg" width={28} height={28} viewBox="0 0 24 24"><g fill="none" fillRule="evenodd"><path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"></path><path fill="currentColor" d="M15.707 11.293a1 1 0 0 1 0 1.414l-5.657 5.657a1 1 0 1 1-1.414-1.414l4.95-4.95l-4.95-4.95a1 1 0 0 1 1.414-1.414z"></path></g></svg>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width={28}
+              height={28}
+              viewBox="0 0 24 24"
+            >
+              <g fill="none" fillRule="evenodd">
+                <path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"></path>
+                <path
+                  fill="currentColor"
+                  d="M15.707 11.293a1 1 0 0 1 0 1.414l-5.657 5.657a1 1 0 1 1-1.414-1.414l4.95-4.95l-4.95-4.95a1 1 0 0 1 1.414-1.414z"
+                ></path>
+              </g>
+            </svg>
           </button>
         </>
       )}
···
 function facetByteRangeToCharRange(
   byteStart: number,
   byteEnd: number,
-  byteToCharMap: number[],
+  byteToCharMap: number[]
 ): [number, number] {
   return [
     byteToCharMap[byteStart] ?? 0,
···
     const [start, end] = facetByteRangeToCharRange(
       f.index.byteStart,
       f.index.byteEnd,
-      map,
+      map
     );
     return { start, end, feature: f.features[0] };
   });
 }
-function renderTextWithFacets(text: string, facets: Facet[]) {
+function renderTextWithFacets({
+  text,
+  facets,
+  navigate,
+}: {
+  text: string;
+  facets: Facet[];
+  navigate: ({}: any) => void;
+}) {
   const ranges = extractFacetRanges(text, facets).sort(
-    (a: any, b: any) => a.start - b.start,
+    (a: any, b: any) => a.start - b.start
   );
 
   const result: React.ReactNode[] = [];
···
           }}
         >
           {fragment}
-        </a>,
+        </a>
       );
     } else if (
       feature.$type === "app.bsky.richtext.facet#mention" &&
···
         <span
           key={start}
           style={{ color: "rgb(29, 122, 242)" }}
+          className=" cursor-pointer"
           onClick={(e) => {
             e.stopPropagation();
+            navigate({
+              to: "/profile/$did",
+              // @ts-ignore
+              params: { did: feature.did},
+            });
           }}
         >
           {fragment}
-        </span>,
+        </span>
       );
     } else if (feature.$type === "app.bsky.richtext.facet#tag") {
       result.push(
···
           }}
         >
           {fragment}
-        </span>,
+        </span>
       );
     } else {
       result.push(<span key={start}>{fragment}</span>);
···
       {
         root: null,
         threshold: 0.25,
-      },
+      }
     );
 
     if (containerRef.current) {

src/components/shrinkpadding.tsx

···
+import { useEffect, useState } from "react";
+
+export default function ShrinkingBox() {
+  const [size, setSize] = useState(2000);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setSize(prev => Math.max(prev - 125, 0));
+    }, 250);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div
+      style={{
+        //width: `${size}px`,
+        height: `${size}px`,
+        //backgroundColor: "skyblue",
+        transition: "all 0.5s ease",
+      }}
+    />
+  );
+}

src/main.tsx

···
 
 import "~/styles/app.css";
 import reportWebVitals from "./reportWebVitals.ts";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
+const queryClient = new QueryClient();
 // Create a new router instance
 const router = createRouter({
   routeTree,
-  context: {},
+  context: { queryClient },
   defaultPreload: "intent",
   scrollRestoration: true,
   defaultStructuralSharing: true,
···
   root.render(
     // double queries annoys me
     <StrictMode>
-      <RouterProvider router={router} />
+      <QueryClientProvider client={queryClient}>
+        <RouterProvider router={router} />
+      </QueryClientProvider>
     </StrictMode>
   );
 }

src/routes/index.tsx

···
 import { createFileRoute } from "@tanstack/react-router";
 import {
   CACHE_TIMEOUT,
-  cachedGetRecord,
-  cachedResolveIdentity,
+  //cachedGetRecord,
+  //cachedResolveIdentity,
   UniversalPostRendererATURILoader,
 } from "~/components/UniversalPostRenderer";
 import * as React from "react";
 import { useAuth } from "~/providers/PassAuthProvider";
-import { usePersistentStore } from "~/providers/PersistentStoreProvider";
+//import { usePersistentStore } from "~/providers/PersistentStoreProvider";
+import {
+  useQueryIdentity,
+  useQueryPost,
+  useQueryFeedSkeleton,
+  useQueryPreferences,
+  useQueryArbitrary
+} from "~/utils/useQuery";
+import { InfiniteCustomFeed } from "~/components/InfiniteCustomFeed";
 
 export const Route = createFileRoute("/")({
   component: Home,
···
     loading: loadering,
     authed,
   } = useAuth();
-  const { get, set } = usePersistentStore();
-  const [feed, setFeed] = React.useState<any[]>([]);
-  const [loading, setLoading] = React.useState(true);
-  const [error, setError] = React.useState<string | null>(null);
+  //const { get, set } = usePersistentStore();
+  // const [feed, setFeed] = React.useState<any[]>([]);
+  // const [loading, setLoading] = React.useState(true);
+  // const [error, setError] = React.useState<string | null>(null);
 
-  const [prefs, setPrefs] = React.useState<any>({});
-  React.useEffect(() => {
-    if (!loadering && authed && agent && agent.did) {
-      const run = async () => {
-        try {
-          if (!agent.did) return;
-          const prefs = await cachedGetPrefs({
-            did: agent.did,
-            agent,
-            get,
-            set,
-          });
+  // const [prefs, setPrefs] = React.useState<any>({});
+  // React.useEffect(() => {
+  //   if (!loadering && authed && agent && agent.did) {
+  //     const run = async () => {
+  //       try {
+  //         if (!agent.did) return;
+  //         const prefs = await cachedGetPrefs({
+  //           did: agent.did,
+  //           agent,
+  //           get,
+  //           set,
+  //         });
+
+  //         console.log("alistoffeeds", prefs);
+  //         setPrefs(prefs || {});
+  //       } catch (err) {
+  //         console.error("alistoffeeds Fetch error in preferences effect:", err);
+  //       }
+  //     };
+
+  //     run();
+  //   }
+  // }, [loadering, authed, agent]);
 
-          console.log("alistoffeeds", prefs);
-          setPrefs(prefs || {});
-        } catch (err) {
-          console.error("alistoffeeds Fetch error in preferences effect:", err);
-        }
-      };
+  // const savedFeedsPref = React.useMemo(() => {
+  //   if (!prefs?.preferences) return null;
+  //   return prefs.preferences.find(
+  //     (p: any) => p?.$type === "app.bsky.actor.defs#savedFeedsPrefV2",
+  //   );
+  // }, [prefs]);
 
-      run();
-    }
-  }, [loadering, authed, agent]);
+  // const savedFeeds = savedFeedsPref?.items || [];
+    
+  const identityresultmaybe = useQueryIdentity(agent?.did);
+  const identity = identityresultmaybe?.data
 
-  const savedFeedsPref = React.useMemo(() => {
-    if (!prefs?.preferences) return null;
-    return prefs.preferences.find(
-      (p: any) => p?.$type === "app.bsky.actor.defs#savedFeedsPrefV2",
+  const prefsresultmaybe = useQueryPreferences({agent: agent ?? undefined, pdsUrl: identity?.pds});
+  const prefs = prefsresultmaybe?.data
+  
+  const savedFeeds = React.useMemo(() => {
+    const savedFeedsPref = prefs?.preferences?.find(
+      (p: any) => p?.$type === "app.bsky.actor.defs#savedFeedsPrefV2"
     );
+    return savedFeedsPref?.items || [];
   }, [prefs]);
 
-  const savedFeeds = savedFeedsPref?.items || [];
+
 
   const [selectedFeed, setSelectedFeed] = React.useState<string | null>(null);
 
   React.useEffect(() => {
     const fallbackFeed =
-      "at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.generator/wh-hot";
+      "at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.generator/whats-hot";
     if (authed) {
       if (savedFeeds.length > 0) {
         setSelectedFeed((prev) =>
···
     }
   }, [savedFeeds, authed]);
 
-  React.useEffect(() => {
-    if (loadering || !selectedFeed) return;
+  // React.useEffect(() => {
+  //   if (loadering || !selectedFeed) return;
 
-    let ignore = false;
+  //   let ignore = false;
 
-    const run = async () => {
-      setLoading(true);
-      setError(null);
+  //   const run = async () => {
+  //     setLoading(true);
+  //     setError(null);
 
-      try {
-        if (authed && agent) {
-          if (!agent.did) return;
+  //     try {
+  //       if (authed && agent) {
+  //         if (!agent.did) return;
 
-          const pdsurl = await cachedResolveIdentity({
-            didOrHandle: agent.did,
-            get,
-            set,
-          });
+  //         const pdsurl = await cachedResolveIdentity({
+  //           didOrHandle: agent.did,
+  //           get,
+  //           set,
+  //         });
 
-          const fetchstringcomplex = `${pdsurl.pdsUrl}/xrpc/app.bsky.feed.getFeedSkeleton?feed=${selectedFeed}`;
-          console.log("fetching feed authed: " + fetchstringcomplex);
+  //         const fetchstringcomplex = `${pdsurl.pdsUrl}/xrpc/app.bsky.feed.getFeedSkeleton?feed=${selectedFeed}`;
+  //         console.log("fetching feed authed: " + fetchstringcomplex);
 
-          const feeddef = await cachedGetRecord({
-            atUri: selectedFeed,
-            get,
-            set,
-          });
+  //         const feeddef = await cachedGetRecord({
+  //           atUri: selectedFeed,
+  //           get,
+  //           set,
+  //         });
 
-          const feedservicedid = feeddef.value.did;
+  //         const feedservicedid = feeddef.value.did;
 
-          const res = await agent.fetchHandler(fetchstringcomplex, {
-            method: "GET",
-            headers: {
-              "atproto-proxy": `${feedservicedid}#bsky_fg`,
-              "Content-Type": "application/json",
-            },
-          });
+  //         const res = await agent.fetchHandler(fetchstringcomplex, {
+  //           method: "GET",
+  //           headers: {
+  //             "atproto-proxy": `${feedservicedid}#bsky_fg`,
+  //             "Content-Type": "application/json",
+  //           },
+  //         });
 
-          if (!res.ok) throw new Error("Failed to fetch feed");
-          const data = await res.json();
+  //         if (!res.ok) throw new Error("Failed to fetch feed");
+  //         const data = await res.json();
 
-          if (!ignore) setFeed(data.feed || []);
-        } else {
-          console.log("falling back");
-          // always use fallback feed for not logged in
-          const fallbackFeed =
-            "at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.generator/whats-hot";
-          // const feeddef = await cachedGetRecord({
-          //   atUri: fallbackFeed,
-          //   get,
-          //   set,
-          // });
+  //         if (!ignore) setFeed(data.feed || []);
+  //       } else {
+  //         console.log("falling back");
+  //         // always use fallback feed for not logged in
+  //         const fallbackFeed =
+  //           "at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.generator/whats-hot";
+  //         // const feeddef = await cachedGetRecord({
+  //         //   atUri: fallbackFeed,
+  //         //   get,
+  //         //   set,
+  //         // });
 
-          //const feedservicedid = "did:web:discover.bsky.app" //feeddef.did;
-          const fetchstringsimple = `https://discover.bsky.app/xrpc/app.bsky.feed.getFeedSkeleton?feed=${fallbackFeed}`;
-          console.log("fetching feed unauthed: " + fetchstringsimple);
+  //         //const feedservicedid = "did:web:discover.bsky.app" //feeddef.did;
+  //         const fetchstringsimple = `https://discover.bsky.app/xrpc/app.bsky.feed.getFeedSkeleton?feed=${fallbackFeed}`;
+  //         console.log("fetching feed unauthed: " + fetchstringsimple);
 
-          const res = await fetch(fetchstringsimple);
-          if (!res.ok) throw new Error("Failed to fetch feed");
-          const data = await res.json();
+  //         const res = await fetch(fetchstringsimple);
+  //         if (!res.ok) throw new Error("Failed to fetch feed");
+  //         const data = await res.json();
 
-          if (!ignore) setFeed(data.feed || []);
-        }
-      } catch (e) {
-        if (!ignore) {
-          if (e instanceof Error) {
-            setError(e.message);
-          } else {
-            setError("Unknown error");
-          }
-        }
-      } finally {
-        if (!ignore) setLoading(false);
-      }
-    };
+  //         if (!ignore) setFeed(data.feed || []);
+  //       }
+  //     } catch (e) {
+  //       if (!ignore) {
+  //         if (e instanceof Error) {
+  //           setError(e.message);
+  //         } else {
+  //           setError("Unknown error");
+  //         }
+  //       }
+  //     } finally {
+  //       if (!ignore) setLoading(false);
+  //     }
+  //   };
+
+  //   run();
+
+  //   return () => {
+  //     ignore = true;
+  //   };
+  // }, [authed, agent, loadering, selectedFeed, get, set]);
+  
+
+  const feedGengetrecordquery = useQueryArbitrary(selectedFeed??undefined);
+  const feedServiceDid = (feedGengetrecordquery?.data?.value as any)?.did;
+
+  // const {
+  //   data: feedData,
+  //   isLoading: isFeedLoading,
+  //   error: feedError,
+  // } = useQueryFeedSkeleton({
+  //   feedUri: selectedFeed!,
+  //   agent: agent ?? undefined,
+  //   isAuthed: authed ?? false,
+  //   pdsUrl: identity?.pds,
+  //   feedServiceDid: feedServiceDid,
+  // });
 
-    run();
+  // const feed = feedData?.feed || [];
 
-    return () => {
-      ignore = true;
-    };
-  }, [authed, agent, loadering, selectedFeed, get, set]);
+  const isReadyForAuthedFeed = authed && agent && identity?.pds && feedServiceDid;
+  const isReadyForUnauthedFeed = !authed && selectedFeed;
 
   return (
     <div className="flex flex-col divide-y divide-gray-200 dark:divide-gray-800">
···
                 key={item.value || idx}
                 className={`px-3 py-1 rounded-full whitespace-nowrap font-medium transition-colors ${
                   isActive
-                    ? "bg-gray-600 text-white"
+                    ? "bg-gray-500 text-white"
                     : item.pinned
                       ? "bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-200"
                       : "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-200"
···
           <span className="text-xl font-bold ml-2">Home</span>
         )}
       </div>
-      {loading && <div className="p-4 text-gray-500">Loading...</div>}
-      {error && <div className="p-4 text-red-500">{error}</div>}
-      {!loading && !error && feed.length === 0 && (
+      {/* {isFeedLoading && <div className="p-4 text-gray-500">Loading...</div>}
+      {feedError && <div className="p-4 text-red-500">{feedError.message}</div>}
+      {!isFeedLoading && !feedError && feed.length === 0 && (
         <div className="p-4 text-gray-500">No posts found.</div>
-      )}
-      {feed.map((item, i) => (
+      )} */}
+      {/* {feed.map((item, i) => (
         <UniversalPostRendererATURILoader
           key={item.post || i}
           atUri={item.post}
         />
-      ))}
+      ))} */}
+
+      {(authed && (!identity?.pds || !feedServiceDid)) && (
+        <div className="p-4 text-center text-gray-500">Preparing your feed...</div>
+      )}
+
+      {(isReadyForAuthedFeed || isReadyForUnauthedFeed) ? (
+          <InfiniteCustomFeed 
+            feedUri={selectedFeed!} 
+            pdsUrl={identity?.pds}
+            feedServiceDid={feedServiceDid}
+          />
+      ) : (
+          <div className="p-4 text-center text-gray-500">Select a feed to get started.</div>
+      )}
     </div>
   );
 }
···
   return data;
 }
 
-export async function cachedGetPrefs({
-  did,
-  agent,
-  get,
-  set,
-  cacheTimeout = CACHE_TIMEOUT,
-}: {
-  did: string;
-  agent: any; // or type properly if available
-  get: (key: string) => any;
-  set: (key: string, value: string) => void;
-  cacheTimeout?: number;
-}): Promise<any> {
-  const cacheKey = `prefs:${did}`;
-  const cached = get(cacheKey);
-  const now = Date.now();
+// export async function cachedGetPrefs({
+//   did,
+//   agent,
+//   get,
+//   set,
+//   cacheTimeout = CACHE_TIMEOUT,
+// }: {
+//   did: string;
+//   agent: any; // or type properly if available
+//   get: (key: string) => any;
+//   set: (key: string, value: string) => void;
+//   cacheTimeout?: number;
+// }): Promise<any> {
+//   const cacheKey = `prefs:${did}`;
+//   const cached = get(cacheKey);
+//   const now = Date.now();
 
-  if (
-    cached &&
-    cached.value &&
-    cached.time &&
-    now - cached.time < cacheTimeout
-  ) {
-    try {
-      return JSON.parse(cached.value);
-    } catch {
-      // fall through to fetch
-    }
-  }
+//   if (
+//     cached &&
+//     cached.value &&
+//     cached.time &&
+//     now - cached.time < cacheTimeout
+//   ) {
+//     try {
+//       return JSON.parse(cached.value);
+//     } catch {
+//       // fall through to fetch
+//     }
+//   }
 
-  const resolved = await cachedResolveIdentity({
-    didOrHandle: did,
-    get,
-    set,
-  });
+//   const resolved = await cachedResolveIdentity({
+//     didOrHandle: did,
+//     get,
+//     set,
+//   });
 
-  if (!resolved?.pdsUrl) throw new Error("Missing resolved PDS info");
+//   if (!resolved?.pdsUrl) throw new Error("Missing resolved PDS info");
 
-  const fetchUrl = `${resolved.pdsUrl}/xrpc/app.bsky.actor.getPreferences`;
+//   const fetchUrl = `${resolved.pdsUrl}/xrpc/app.bsky.actor.getPreferences`;
 
-  const res = await agent.fetchHandler(fetchUrl, {
-    method: "GET",
-    headers: {
-      "Content-Type": "application/json",
-    },
-  });
+//   const res = await agent.fetchHandler(fetchUrl, {
+//     method: "GET",
+//     headers: {
+//       "Content-Type": "application/json",
+//     },
+//   });
 
-  if (!res.ok) throw new Error(`Failed to fetch preferences: ${res.status}`);
+//   if (!res.ok) throw new Error(`Failed to fetch preferences: ${res.status}`);
 
-  const text = await res.text();
+//   const text = await res.text();
 
-  let data: any;
-  try {
-    data = JSON.parse(text);
-  } catch (err) {
-    console.error("Failed to parse preferences JSON:", err);
-    throw err;
-  }
+//   let data: any;
+//   try {
+//     data = JSON.parse(text);
+//   } catch (err) {
+//     console.error("Failed to parse preferences JSON:", err);
+//     throw err;
+//   }
 
-  set(cacheKey, JSON.stringify(data));
-  return data;
-}
+//   set(cacheKey, JSON.stringify(data));
+//   return data;
+// }

src/routes/profile.$did/index.tsx

···
 import { createFileRoute, Link } from "@tanstack/react-router";
 import React from "react";
 import { UniversalPostRendererATURILoader } from "~/components/UniversalPostRenderer";
-import { usePersistentStore } from "~/providers/PersistentStoreProvider";
+import { useQueryClient } from "@tanstack/react-query";
 
-const HANDLE_DID_CACHE_TIMEOUT = 60 * 60 * 1000; // 1 hour
-const CACHE_TIMEOUT = 5 * 60 * 1000; // 5 minutes
+import {
+  useQueryIdentity,
+  useQueryProfile,
+  useInfiniteQueryAuthorFeed,
+} from "~/utils/useQuery";
 
 export const Route = createFileRoute("/profile/$did/")({
   component: ProfileComponent,
···
 
 function ProfileComponent() {
   const { did } = Route.useParams();
-  const { get, set } = usePersistentStore();
-  const [resolvedDid, setResolvedDid] = React.useState<string | null>(null);
-  const [resolvedHandle, setResolvedHandle] = React.useState<string | null>(
-    null,
-  );
-  const [loading, setLoading] = React.useState(false);
-  const [error, setError] = React.useState<string | null>(null);
-  const [profile, setProfile] = React.useState<any>(null);
-  const [posts, setPosts] = React.useState<any[]>([]);
-  const [postsLoading, setPostsLoading] = React.useState(false);
-  const [cursor, setCursor] = React.useState<string | null>(null);
-  const [hasMore, setHasMore] = React.useState(true);
-  const [postsCached, setPostsCached] = React.useState(false);
+  const queryClient = useQueryClient();
 
-  React.useEffect(() => {
-    let ignore = false;
-    async function resolveDidIfNeeded() {
-      if (!did) {
-        setResolvedDid(null);
-        setResolvedHandle(null);
-        return;
-      }
-      if (did.startsWith("did:")) {
-        setResolvedDid(did);
-        setLoading(true);
-        setError(null);
-        const cacheKey = `handleDid:${did}`;
-        const now = Date.now();
-        const cached = await get(cacheKey);
-        if (
-          cached &&
-          cached.value &&
-          cached.time &&
-          now - cached.time < HANDLE_DID_CACHE_TIMEOUT
-        ) {
-          try {
-            const data = JSON.parse(cached.value);
-            if (!ignore) {
-              setResolvedDid(data.did);
-              setResolvedHandle(data.handle || null);
-            }
-            setLoading(false);
-            return;
-          } catch {}
-        }
-        try {
-          const url = `https://free-fly-24.deno.dev/?did=${encodeURIComponent(did)}`;
-          const res = await fetch(url);
-          if (!res.ok) throw new Error("Failed to resolve DID");
-          const data = await res.json();
-          set(cacheKey, JSON.stringify(data));
-          if (!ignore) {
-            setResolvedDid(data.did);
-            setResolvedHandle(data.handle || null);
-          }
-        } catch (e: any) {
-          if (!ignore)
-            setError("Failed to resolve handle: " + (e?.message || e));
-        } finally {
-          setLoading(false);
-        }
-        return;
-      }
-      setLoading(true);
-      setError(null);
-      const cacheKey = `handleDid:${did}`;
-      const now = Date.now();
-      const cached = await get(cacheKey);
-      if (
-        cached &&
-        cached.value &&
-        cached.time &&
-        now - cached.time < HANDLE_DID_CACHE_TIMEOUT
-      ) {
-        try {
-          const data = JSON.parse(cached.value);
-          if (!ignore) {
-            setResolvedDid(data.did);
-            setResolvedHandle(data.handle || did);
-          }
-          setLoading(false);
-          return;
-        } catch {}
-      }
-      try {
-        const url = `https://free-fly-24.deno.dev/?handle=${encodeURIComponent(did)}`;
-        const res = await fetch(url);
-        if (!res.ok) throw new Error("Failed to resolve handle");
-        const data = await res.json();
-        set(cacheKey, JSON.stringify(data));
-        if (!ignore) {
-          setResolvedDid(data.did);
-          setResolvedHandle(data.handle || did);
-        }
-      } catch (e: any) {
-        if (!ignore) setError("Failed to resolve handle: " + (e?.message || e));
-      } finally {
-        setLoading(false);
-      }
-    }
-    resolveDidIfNeeded();
-    return () => {
-      ignore = true;
-    };
-  }, [did, get, set]);
+  const {
+    data: identity,
+    isLoading: isIdentityLoading,
+    error: identityError,
+  } = useQueryIdentity(did);
 
-  React.useEffect(() => {
-    if (!resolvedDid) return;
-    let ignore = false;
-    async function fetchProfile() {
-      const cacheKey = `profile:${resolvedDid}`;
-      const now = Date.now();
-      const cached = await get(cacheKey);
-      if (
-        cached &&
-        cached.value &&
-        cached.time &&
-        now - cached.time < CACHE_TIMEOUT
-      ) {
-        try {
-          if (!ignore) setProfile(JSON.parse(cached.value));
-          return;
-        } catch {}
-      }
-      try {
-        if (!resolvedDid) return;
-        let resolvedRaw = await get(`handleDid:${resolvedDid}`);
-        let resolved: any = null;
-        if (
-          resolvedRaw &&
-          resolvedRaw.value &&
-          resolvedRaw.time &&
-          now - resolvedRaw.time < HANDLE_DID_CACHE_TIMEOUT
-        ) {
-          try {
-            resolved = JSON.parse(resolvedRaw.value);
-          } catch {
-            resolved = null;
-          }
-        } else {
-          const url = `https://free-fly-24.deno.dev/?did=${encodeURIComponent(resolvedDid)}`;
-          const res = await fetch(url);
-          if (!res.ok) throw new Error("Failed to resolve DID");
-          resolved = await res.json();
-          set(`handleDid:${resolvedDid}`, JSON.stringify(resolved));
-        }
-        if (!resolved || !resolved.pdsUrl)
-          throw new Error("DID resolution failed or missing pdsUrl");
+  const resolvedDid = did.startsWith("did:") ? did : identity?.did;
+  const resolvedHandle = did.startsWith("did:") ? identity?.handle : did;
+  const pdsUrl = identity?.pds;
 
-        const profileUrl = `${resolved.pdsUrl}/xrpc/com.atproto.repo.getRecord?repo=${encodeURIComponent(resolvedDid)}&collection=app.bsky.actor.profile&rkey=self`;
-        const profileRes = await fetch(profileUrl);
-        if (!profileRes.ok) throw new Error("Failed to fetch profile");
-        const profileData = await profileRes.json();
-        if (!ignore) {
-          setProfile(profileData);
-          set(cacheKey, JSON.stringify(profileData));
-        }
-      } catch (e: any) {
-        if (!ignore) setError("Failed to fetch profile: " + (e?.message || e));
-      }
-    }
-    fetchProfile();
-    return () => {
-      ignore = true;
-    };
-  }, [resolvedDid, get, set]);
+  const profileUri = resolvedDid
+    ? `at://${resolvedDid}/app.bsky.actor.profile/self`
+    : undefined;
+  const { data: profileRecord } = useQueryProfile(profileUri);
+  const profile = profileRecord?.value;
+
+  const {
+    data: postsData,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isLoading: arePostsLoading,
+  } = useInfiniteQueryAuthorFeed(resolvedDid, pdsUrl);
 
   React.useEffect(() => {
-    if (!resolvedDid) return;
-    let ignore = false;
-    async function fetchPosts() {
-      setPostsLoading(true);
-      setPostsCached(false);
-      try {
-        if (!resolvedDid) return;
-        let resolvedRaw = await get(`handleDid:${resolvedDid}`);
-        let resolved: any = null;
-        const now = Date.now();
-        if (
-          resolvedRaw &&
-          resolvedRaw.value &&
-          resolvedRaw.time &&
-          now - resolvedRaw.time < HANDLE_DID_CACHE_TIMEOUT
-        ) {
-          try {
-            resolved = JSON.parse(resolvedRaw.value);
-          } catch {
-            resolved = null;
+    if (postsData) {
+      postsData.pages.forEach((page) => {
+        page.records.forEach((record) => {
+          if (!queryClient.getQueryData(["post", record.uri])) {
+            queryClient.setQueryData(["post", record.uri], record);
           }
-        } else {
-          const url = `https://free-fly-24.deno.dev/?did=${encodeURIComponent(resolvedDid)}`;
-          const res = await fetch(url);
-          if (!res.ok) throw new Error("Failed to resolve DID");
-          resolved = await res.json();
-          set(`handleDid:${resolvedDid}`, JSON.stringify(resolved));
-        }
-        if (!resolved || !resolved.pdsUrl)
-          throw new Error("DID resolution failed or missing pdsUrl");
-
-        const postsUrl = `${resolved.pdsUrl}/xrpc/com.atproto.repo.listRecords?repo=${resolvedDid}&collection=app.bsky.feed.post${cursor && false ? `&cursor=${cursor}` : ""}&limit=20`;
-        const postsRes = await fetch(postsUrl);
-        if (!postsRes.ok) throw new Error("Failed to fetch posts");
-        const postsData = await postsRes.json();
-
-        if (postsData.records) {
-          await Promise.all(
-            postsData.records.map(async (post: any) => {
-              if (post.uri && post.value) {
-                const postCacheKey = `record:${post.uri}`;
-                console.log(
-                  "caching post",
-                  postCacheKey,
-                  JSON.stringify(post, null, 2),
-                );
-                await set(postCacheKey, JSON.stringify(post));
-              }
-            }),
-          );
-        }
+        });
+      });
+    }
+  }, [postsData, queryClient]);
 
-        if (!ignore) {
-          setPosts((prev) =>
-            cursor ? [...prev, ...postsData.records] : postsData.records,
-          );
-          setCursor(postsData.cursor || null);
-          setHasMore(postsData.records.length === 20);
-          setPostsCached(true);
-        }
-      } catch (e: any) {
-        if (!ignore) setError("Failed to fetch posts: " + (e?.message || e));
-      } finally {
-        if (!ignore) setPostsLoading(false);
-      }
-    }
-    fetchPosts();
-    return () => {
-      ignore = true;
-    };
-  }, [resolvedDid, cursor, get, set]);
+  const posts = React.useMemo(
+    () => postsData?.pages.flatMap((page) => page.records) ?? [],
+    [postsData]
+  );
 
-  function getAvatarUrl(profile: any) {
-    const link = profile?.value?.avatar?.ref?.["$link"];
+  function getAvatarUrl(p: typeof profile) {
+    const link = p?.avatar?.ref?.["$link"];
     if (!link || !resolvedDid) return null;
     return `https://cdn.bsky.app/img/avatar/plain/${resolvedDid}/${link}@jpeg`;
   }
-  function getBannerUrl(profile: any) {
-    const link = profile?.value?.banner?.ref?.["$link"];
+  function getBannerUrl(p: typeof profile) {
+    const link = p?.banner?.ref?.["$link"];
     if (!link || !resolvedDid) return null;
     return `https://cdn.bsky.app/img/banner/plain/${resolvedDid}/${link}@jpeg`;
   }
 
   const displayName =
-    profile?.value?.displayName ||
-    (resolvedHandle ? `@${resolvedHandle}` : did);
-  let handle: string;
-  if (resolvedHandle) {
-    handle = `@${resolvedHandle}`;
-  } else if (did && !did.startsWith("did:")) {
-    handle = `@${did}`;
-  } else {
-    handle = resolvedDid || did;
+    profile?.displayName || (resolvedHandle ? `@${resolvedHandle}` : did);
+  const handle = resolvedHandle ? `@${resolvedHandle}` : resolvedDid || did;
+  const description = profile?.description || "";
+
+  if (isIdentityLoading) {
+    return (
+      <div className="p-4 text-center text-gray-500">Resolving profile...</div>
+    );
   }
-  const description = profile?.value?.description || "";
 
-  if (!did) return <div>Invalid profile</div>;
-  if (loading) return <div>Resolving handle...</div>;
-  if (error) return <div style={{ color: "red" }}>{error}</div>;
-  if (!resolvedDid) return <div>Invalid profile</div>;
+  if (identityError) {
+    return (
+      <div className="p-4 text-center text-red-500">
+        Error: {identityError.message}
+      </div>
+    );
+  }
+
+  if (!resolvedDid) {
+    return (
+      <div className="p-4 text-center text-gray-500">Profile not found.</div>
+    );
+  }
 
   return (
     <>
-      <div className="flex items-center gap-2 px-4 py-2 h-[52px] sticky top-0 bg-white dark:bg-gray-950 z-10 border-b border-gray-200 dark:border-gray-700">
+      <div className="flex gap-2 px-4 py-2 h-[52px] sticky top-0 bg-white dark:bg-gray-950 z-10 border-b border-gray-200 dark:border-gray-700">
         <Link
           to=".."
           className="px-3 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-900 font-bold text-lg"
···
       </div>
 
       {/* Profile Header */}
-      <div
-        style={{
-          width: "100%",
-          maxWidth: 600,
-          margin: "0 auto",
-          boxShadow: "0 2px 12px #0002",
-          padding: 0,
-          color: "#eee",
-          fontFamily: "system-ui, sans-serif",
-          // marginTop: 20,
-          //background: '#181a20',
-          borderRadius: 16,
-          overflow: "hidden",
-          position: "relative",
-        }}
-        className="bg-gray-200 dark:bg-gray-900"
-      >
+      <div className="w-full max-w-2xl mx-auto shadow-lg rounded-b-lg overflow-hidden relative bg-gray-200 dark:bg-gray-900">
         {/* Banner */}
         <div
+          className="w-full h-40 bg-gray-300 dark:bg-gray-700"
           style={{
-            width: "100%",
-            height: 160,
-            background: `#222 url(${getBannerUrl(profile)}) center/cover no-repeat`,
-            position: "relative",
+            backgroundImage: `url(${getBannerUrl(profile)})`,
+            backgroundSize: "cover",
+            backgroundPosition: "center",
           }}
         />
+
         {/* Avatar (PFP) */}
-        <div
-          style={{
-            position: "absolute",
-            left: "50%",
-            top: 120,
-            transform: "translateX(-50%)",
-            zIndex: 2,
-            borderRadius: "50%",
-            border: "4px solid #181a20",
-            boxShadow: "0 2px 8px #0006",
-            background: "#222",
-          }}
-        >
+        <div className="absolute left-[16px] top-[100px] ">
           <img
             src={getAvatarUrl(profile) || "/favicon.png"}
             alt="avatar"
-            style={{
-              width: 112,
-              height: 112,
-              borderRadius: "50%",
-              objectFit: "cover",
-              display: "block",
-            }}
+            className="w-28 h-28 rounded-full object-cover border-4 border-white dark:border-gray-950 bg-gray-300 dark:bg-gray-700"
           />
         </div>
+
+        <div className="absolute right-[16px] top-[170px] flex flex-row gap-2.5">
+          {/* 
+            todo: full follow and unfollow backfill (along with partial likes backfill, 
+            just enough for it to be useful) 
+            also delay the backfill to be on demand because it would be pretty intense
+            also save it persistently
+          */}
+          {true ? (
+            <>
+              <button className="rounded-full bg-gray-600 px-3 py-2 text-[14px]">
+                Follow
+              </button>
+              <button className="rounded-full bg-gray-600 px-3 py-2 text-[14px]">
+                Unfollow
+              </button>
+            </>
+          ) : (
+            <button className="rounded-full bg-gray-600 px-3 py-2 text-[14px]">
+              Edit Profile
+            </button>
+          )}
+          <button className="rounded-full bg-gray-600 px-3 py-2 text-[14px]">
+            ... {/* todo: icon */}
+          </button>
+        </div>
+
         {/* Info Card */}
-        <div
-          style={{
-            marginTop: 72,
-            padding: "0 24px 24px 24px",
-            textAlign: "center",
-          }}
-        >
-          <div style={{ fontWeight: 700, fontSize: 24, marginBottom: 4 }}>
-            {displayName}
-          </div>
-          <div style={{ color: "#aaa", fontSize: 16, marginBottom: 12 }}>
+        <div className="mt-16 pb-2 px-4 text-gray-900 dark:text-gray-100">
+          <div className="font-bold text-2xl">{displayName}</div>
+          <div className="text-gray-500 dark:text-gray-400 text-base mb-3">
             {handle}
           </div>
           {description && (
-            <div
-              style={{
-                fontSize: 16,
-                lineHeight: 1.5,
-                color: "#ddd",
-                marginBottom: 20,
-              }}
-            >
+            <div className="text-base leading-relaxed text-gray-800 dark:text-gray-300 mb-5 whitespace-pre-wrap break-words text-[15px]">
               {description}
             </div>
           )}
-          {!profile && !error && (
-            <div style={{ color: "#888", padding: 16 }}>Loading profile...</div>
-          )}
         </div>
       </div>
 
-      {/* Posts */}
-      <div style={{ maxWidth: 600, margin: "0px auto 0", padding: 0 }}>
-        <div
-          className="text-gray-500 dark:text-gray-400 text-sm font-bold"
-          style={{
-            fontSize: 18,
-            margin: "12px 16px 12px 16px",
-            fontWeight: 600,
-          }}
-        >
+      {/* Posts Section */}
+      <div className="max-w-2xl mx-auto">
+        <div className="text-gray-500 dark:text-gray-400 text-lg font-semibold my-3 mx-4">
           Posts
         </div>
-        <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
-          {postsCached &&
-            posts.map((post) => {
-              return (
-                <UniversalPostRendererATURILoader
-                  key={post.uri}
-                  atUri={post.uri}
-                  feedviewpost={true}
-                />
-              );
-            })}
+        <div>
+          {posts.map((post) => (
+            <UniversalPostRendererATURILoader
+              key={post.uri}
+              atUri={post.uri}
+              feedviewpost={true}
+            />
+          ))}
         </div>
-        {postsLoading && (
-          <div style={{ color: "#888", padding: 16, textAlign: "center" }}>
-            Loading posts...
-          </div>
+
+        {/* Loading and "Load More" states */}
+        {arePostsLoading && posts.length === 0 && (
+          <div className="p-4 text-center text-gray-500">Loading posts...</div>
+        )}
+        {isFetchingNextPage && (
+          <div className="p-4 text-center text-gray-500">Loading more...</div>
         )}
-        {hasMore && !postsLoading && (
+        {hasNextPage && !isFetchingNextPage && (
           <button
-            onClick={() => setCursor(cursor)}
-            style={{
-              width: "100%",
-              padding: 12,
-              background: "#222",
-              color: "#eee",
-              border: "none",
-              borderRadius: 8,
-              cursor: "pointer",
-              fontSize: 16,
-              marginTop: 16,
-            }}
+            onClick={() => fetchNextPage()}
+            className="w-[calc(100%-2rem)] mx-4 my-4 px-4 py-2 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 font-semibold"
           >
             Load More Posts
           </button>
         )}
-        {posts.length === 0 && !postsLoading && !error && (
-          <div style={{ color: "#888", padding: 16, textAlign: "center" }}>
-            No posts found
-          </div>
+        {posts.length === 0 && !arePostsLoading && (
+          <div className="p-4 text-center text-gray-500">No posts found.</div>
         )}
       </div>
     </>

src/routes/profile.$did/post.$rkey.tsx

···
-import { createFileRoute, Link } from '@tanstack/react-router';
-import React from 'react';
-import { UniversalPostRendererATURILoader, cachedGetRecord } from '~/components/UniversalPostRenderer';
-import { usePersistentStore } from '~/providers/PersistentStoreProvider';
+import { useQueryClient } from "@tanstack/react-query";
+import { createFileRoute, Link } from "@tanstack/react-router";
+import React, { useLayoutEffect } from "react";
+import ShrinkingBox from "~/components/shrinkpadding";
+import { UniversalPostRendererATURILoader } from "~/components/UniversalPostRenderer";
+//import { usePersistentStore } from '~/providers/PersistentStoreProvider';
+import {
+  useQueryIdentity,
+  useQueryPost,
+  useQueryConstellation,
+  constructPostQuery,
+  useQueryArbitrary,
+} from "~/utils/useQuery";
 
-const HANDLE_DID_CACHE_TIMEOUT = 60 * 60 * 1000; // 1 hour
+//const HANDLE_DID_CACHE_TIMEOUT = 60 * 60 * 1000; // 1 hour
 
-export const Route = createFileRoute('/profile/$did/post/$rkey')({
+export const Route = createFileRoute("/profile/$did/post/$rkey")({
   component: RouterWrapper,
 });
 
 function RouterWrapper() {
   const { did, rkey } = Route.useParams();
 
-  return <ProfilePostComponent key={`/profile/${did}/post/${rkey}`} did={did} rkey={rkey} />;
+  return (
+    <>
+      <ProfilePostComponent
+        key={`/profile/${did}/post/${rkey}`}
+        did={did}
+        rkey={rkey}
+      />
+      {/* <ShrinkingBox /> */}
+    </>
+  );
 }
 
 function ProfilePostComponent({ did, rkey }: { did: string; rkey: string }) {
-  const { get, set } = usePersistentStore();
-  const [resolvedDid, setResolvedDid] = React.useState<string | null>(null);
-  const [loading, setLoading] = React.useState(false);
-  const [error, setError] = React.useState<string | null>(null);
+  //const { get, set } = usePersistentStore();
+  const queryClient = useQueryClient();
+  // const [resolvedDid, setResolvedDid] = React.useState<string | null>(null);
+  // const [loading, setLoading] = React.useState(false);
+  // const [error, setError] = React.useState<string | null>(null);
+
+  // const [mainPost, setMainPost] = React.useState<any | null>(null);
+  // const [parents, setParents] = React.useState<any[]>([]);
+  // const [parentsLoading, setParentsLoading] = React.useState(false);
+  // const [replies, setReplies] = React.useState<any[]>([]);
+
+  // React.useEffect(() => {
+  //   let ignore = false;
+  //   async function resolveDidIfNeeded() {
+  //     if (!did) {
+  //       setResolvedDid(null);
+  //       return;
+  //     }
+  //     if (did.startsWith('did:')) {
+  //       setResolvedDid(did);
+  //       return;
+  //     }
+  //     setLoading(true);
+  //     setError(null);
+  //     const cacheKey = `handleDid:${did}`;
+  //     const now = Date.now();
+  //     const cached = await get(cacheKey); // <-- await here
+  //     if (cached && cached.value && cached.time && now - cached.time < HANDLE_DID_CACHE_TIMEOUT) {
+  //       try {
+  //         const data = JSON.parse(cached.value);
+  //         if (!ignore) setResolvedDid(data.did);
+  //         setLoading(false);
+  //         return;
+  //       } catch {}
+  //     }
+  //     try {
+  //       const url = `https://free-fly-24.deno.dev/?handle=${encodeURIComponent(did)}`;
+  //       const res = await fetch(url);
+  //       if (!res.ok) throw new Error('Failed to resolve handle');
+  //       const data = await res.json();
+  //       await set(cacheKey, JSON.stringify(data)); // <-- await here
+  //       if (!ignore) setResolvedDid(data.did);
+  //     } catch (e: any) {
+  //       if (!ignore) setError('Failed to resolve handle: ' + (e?.message || e));
+  //     } finally {
+  //       setLoading(false);
+  //     }
+  //   }
+  //   resolveDidIfNeeded();
+  //   return () => {
+  //     ignore = true;
+  //   };
+  // }, [did, get, set]);
+
+  // const atUri = resolvedDid && rkey ? `at://${decodeURIComponent(resolvedDid)}/app.bsky.feed.post/${rkey}` : '';
+
+  // React.useEffect(() => {
+  //   if (!atUri) return;
+  //   let ignore = false;
+  //   async function fetchMainPost() {
+  //     try {
+  //       const postData = await cachedGetRecord({ atUri, get, set });
+  //       if (!ignore) {
+  //         setMainPost(postData);
+  //       }
+  //     } catch (e) {
+  //       console.error('Failed to fetch main post record:', e);
+  //     }
+  //   }
+  //   fetchMainPost();
+  //   return () => {
+  //     ignore = true;
+  //   };
+  // }, [atUri, get, set]);
+
+  // React.useEffect(() => {
+  //   if (!mainPost) return;
+  //   let ignore = false;
+  //   async function fetchParents() {
+  //     setParentsLoading(true);
+  //     const parentChain: any[] = [];
+  //     let currentParentUri = mainPost.value?.reply?.parent?.uri;
+  //     const MAX_PARENTS = 25; // Important to know theres a limit
+  //     let safetyCounter = 0;
+
+  //     while (currentParentUri && safetyCounter < MAX_PARENTS) {
+  //       try {
+  //         const parentPost = await cachedGetRecord({ atUri: currentParentUri, get, set });
+  //         if (!parentPost) break;
+  //         parentChain.push(parentPost);
+  //         currentParentUri = parentPost.value?.reply?.parent?.uri;
+  //         safetyCounter++;
+  //       } catch (error) {
+  //         console.error('Failed to fetch a parent post:', error);
+  //         break;
+  //       }
+  //     }
+
+  //     if (!ignore) {
+  //       setParents(parentChain.reverse());
+  //       setParentsLoading(false);
+  //     }
+  //   }
+
+  //   fetchParents();
+  //   return () => {
+  //     ignore = true;
+  //   };
+  // }, [mainPost, get, set]);
 
-  const [mainPost, setMainPost] = React.useState<any | null>(null);
+  // React.useEffect(() => {
+  //   if (!atUri) return;
+  //   let ignore = false;
+  //   async function fetchReplies() {
+  //     try {
+  //       const url = `https://constellation.microcosm.blue/links?target=${encodeURIComponent(
+  //         atUri,
+  //       )}&collection=app.bsky.feed.post&path=.reply.parent.uri`;
+  //       const res = await fetch(url);
+  //       if (!res.ok) throw new Error('Failed to fetch replies');
+  //       const data = await res.json();
+  //       if (!ignore && data.linking_records) {
+  //         setReplies(data.linking_records.slice(0, 50));
+  //       }
+  //     } catch (e) {
+  //       if (!ignore) setReplies([]);
+  //     }
+  //   }
+  //   fetchReplies();
+  //   return () => {
+  //     ignore = true;
+  //   };
+  // }, [atUri]);
+
+  const {
+    data: identity,
+    isLoading: isIdentityLoading,
+    error: identityError,
+  } = useQueryIdentity(did);
+
+  const resolvedDid = did.startsWith("did:") ? did : identity?.did;
+
+  const atUri = React.useMemo(
+    () =>
+      resolvedDid
+        ? `at://${decodeURIComponent(resolvedDid)}/app.bsky.feed.post/${rkey}`
+        : "",
+    [resolvedDid, rkey]
+  );
+
+  const { data: mainPost } = useQueryPost(atUri);
+
+  const { data: repliesData } = useQueryConstellation({
+    method: "/links",
+    target: atUri,
+    collection: "app.bsky.feed.post",
+    path: ".reply.parent.uri",
+  });
+  const replies = repliesData?.linking_records.slice(0, 50) ?? [];
+
   const [parents, setParents] = React.useState<any[]>([]);
   const [parentsLoading, setParentsLoading] = React.useState(false);
-  const [replies, setReplies] = React.useState<any[]>([]);
+
+  const mainPostRef = React.useRef<HTMLDivElement>(null);
+  const userHasScrolled = React.useRef(false);
+
+  const scrollAnchor = React.useRef<{ top: number } | null>(null);
+
 
   React.useEffect(() => {
-    let ignore = false;
-    async function resolveDidIfNeeded() {
-      if (!did) {
-        setResolvedDid(null);
-        return;
-      }
-      if (did.startsWith('did:')) {
-        setResolvedDid(did);
-        return;
-      }
-      setLoading(true);
-      setError(null);
-      const cacheKey = `handleDid:${did}`;
-      const now = Date.now();
-      const cached = await get(cacheKey); // <-- await here
-      if (cached && cached.value && cached.time && now - cached.time < HANDLE_DID_CACHE_TIMEOUT) {
-        try {
-          const data = JSON.parse(cached.value);
-          if (!ignore) setResolvedDid(data.did);
-          setLoading(false);
-          return;
-        } catch {}
-      }
-      try {
-        const url = `https://free-fly-24.deno.dev/?handle=${encodeURIComponent(did)}`;
-        const res = await fetch(url);
-        if (!res.ok) throw new Error('Failed to resolve handle');
-        const data = await res.json();
-        await set(cacheKey, JSON.stringify(data)); // <-- await here
-        if (!ignore) setResolvedDid(data.did);
-      } catch (e: any) {
-        if (!ignore) setError('Failed to resolve handle: ' + (e?.message || e));
-      } finally {
-        setLoading(false);
+    const onScroll = () => {
+
+      if (window.scrollY > 50) {
+        userHasScrolled.current = true;
+
+        window.removeEventListener("scroll", onScroll);
       }
-    }
-    resolveDidIfNeeded();
-    return () => {
-      ignore = true;
     };
-  }, [did, get, set]);
+
+    if (!userHasScrolled.current) {
+      window.addEventListener("scroll", onScroll, { passive: true });
+    }
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
 
-  const atUri = resolvedDid && rkey ? `at://${decodeURIComponent(resolvedDid)}/app.bsky.feed.post/${rkey}` : '';
+  useLayoutEffect(() => {
+    if (parentsLoading && mainPostRef.current && !userHasScrolled.current) {
+      scrollAnchor.current = {
+        top: mainPostRef.current.getBoundingClientRect().top,
+      };
+    }
+  }, [parentsLoading]);
 
-  React.useEffect(() => {
-    if (!atUri) return;
-    let ignore = false;
-    async function fetchMainPost() {
-      try {
-        const postData = await cachedGetRecord({ atUri, get, set });
-        if (!ignore) {
-          setMainPost(postData);
-        }
-      } catch (e) {
-        console.error('Failed to fetch main post record:', e);
+  useLayoutEffect(() => {
+    if (
+      scrollAnchor.current &&
+      mainPostRef.current &&
+      !userHasScrolled.current
+    ) {
+      const newTop = mainPostRef.current.getBoundingClientRect().top;
+      const topDiff = newTop - scrollAnchor.current.top;
+      if (topDiff > 0) {
+        window.scrollBy(0, topDiff);
       }
+      scrollAnchor.current = null;
     }
-    fetchMainPost();
-    return () => {
-      ignore = true;
-    };
-  }, [atUri, get, set]);
+  }, [parents]);
 
   React.useEffect(() => {
-    if (!mainPost) return;
+    if (!mainPost?.value?.reply?.parent?.uri) {
+      setParents([]);
+      return;
+    }
+
     let ignore = false;
-    async function fetchParents() {
+    const fetchParents = async () => {
       setParentsLoading(true);
       const parentChain: any[] = [];
-      let currentParentUri = mainPost.value?.reply?.parent?.uri;
-      const MAX_PARENTS = 25; // Important to know theres a limit
+      let currentParentUri = mainPost?.value.reply?.parent.uri;
+      const MAX_PARENTS = 25;
       let safetyCounter = 0;
 
       while (currentParentUri && safetyCounter < MAX_PARENTS) {
         try {
-          const parentPost = await cachedGetRecord({ atUri: currentParentUri, get, set });
+          const parentPost = await queryClient.fetchQuery(
+            constructPostQuery(currentParentUri)
+          );
           if (!parentPost) break;
           parentChain.push(parentPost);
           currentParentUri = parentPost.value?.reply?.parent?.uri;
-          safetyCounter++;
         } catch (error) {
-          console.error('Failed to fetch a parent post:', error);
+          console.error("Failed to fetch a parent post:", error);
           break;
         }
+        safetyCounter++;
       }
 
       if (!ignore) {
         setParents(parentChain.reverse());
         setParentsLoading(false);
       }
-    }
+    };
 
     fetchParents();
     return () => {
       ignore = true;
     };
-  }, [mainPost, get, set]);
-
-  React.useEffect(() => {
-    if (!atUri) return;
-    let ignore = false;
-    async function fetchReplies() {
-      try {
-        const url = `https://constellation.microcosm.blue/links?target=${encodeURIComponent(
-          atUri,
-        )}&collection=app.bsky.feed.post&path=.reply.parent.uri`;
-        const res = await fetch(url);
-        if (!res.ok) throw new Error('Failed to fetch replies');
-        const data = await res.json();
-        if (!ignore && data.linking_records) {
-          setReplies(data.linking_records.slice(0, 50));
-        }
-      } catch (e) {
-        if (!ignore) setReplies([]);
-      }
-    }
-    fetchReplies();
-    return () => {
-      ignore = true;
-    };
-  }, [atUri]);
+  }, [mainPost, queryClient]);
 
   if (!did || !rkey) return <div>Invalid post URI</div>;
-  if (loading) return <div>Resolving handle...</div>;
-  if (error) return <div style={{ color: 'red' }}>{error}</div>;
-  if (!atUri) return <div>Invalid post URI</div>;
+  if (isIdentityLoading) return <div>Resolving handle...</div>;
+  if (identityError)
+    return <div style={{ color: "red" }}>{identityError.message}</div>;
+  if (!atUri) return <div>Could not construct post URI.</div>;
 
   return (
     <>
···
         <Link
           to=".."
           className="px-3 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-900 font-bold text-lg"
-          onClick={e => {
+          onClick={(e) => {
             e.preventDefault();
-            window.history.length > 1 ? window.history.back() : window.location.assign('/');
+            window.history.length > 1
+              ? window.history.back()
+              : window.location.assign("/");
           }}
           aria-label="Go back"
         >
···
         <span className="text-xl font-bold ml-2">Post</span>
       </div>
 
-      {parentsLoading && <div className="p-4 text-center text-gray-500 dark:text-gray-400">Loading conversation...</div>}
+      {parentsLoading && (
+        <div className="text-center text-gray-500 dark:text-gray-400 flex flex-row">
+          <div className="ml-4 w-[42px] flex justify-center">
+            <div
+              style={{ width: 2, height: "100%", opacity: 0.5 }}
+              className="bg-gray-500 dark:bg-gray-400"
+            ></div>
+          </div>
+          Loading conversation...
+        </div>
+      )}
 
       {/* we should use the reply lines here thats provided by UPR*/}
-      <div style={{ maxWidth: 600, margin: '0px auto 0', padding: 0 }}>
+      <div style={{ maxWidth: 600, margin: "0px auto 0", padding: 0 }}>
         {parents.map((parent, index) => (
-          <UniversalPostRendererATURILoader key={parent.uri} atUri={parent.uri} 
-            topReplyLine={index > 0} 
+          <UniversalPostRendererATURILoader
+            key={parent.uri}
+            atUri={parent.uri}
+            topReplyLine={index > 0}
             bottomReplyLine={true}
             bottomBorder={false}
-             />
+          />
         ))}
       </div>
-
-      <UniversalPostRendererATURILoader atUri={atUri} detailed={true} topReplyLine={parents.length > 0} />
-
-      {replies.length > 0 && (
-        <div style={{ maxWidth: 600, margin: '0px auto 0', padding: 0 }}>
-          <div
-            className="text-gray-500 dark:text-gray-400 text-sm font-bold"
-            style={{ fontSize: 18, margin: '12px 16px 12px 16px', fontWeight: 600 }}
-          >
-            Replies
-          </div>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
-            {replies.map(reply => {
+      <div ref={mainPostRef}>
+        <UniversalPostRendererATURILoader
+          atUri={atUri}
+          detailed={true}
+          topReplyLine={parentsLoading || parents.length > 0}
+        />
+      </div>
+      <div
+        style={{
+          maxWidth: 600,
+          margin: "0px auto 0",
+          padding: 0,
+          minHeight: "100dvh",
+        }}
+      >
+        <div
+          className="text-gray-500 dark:text-gray-400 text-sm font-bold"
+          style={{
+            fontSize: 18,
+            margin: "12px 16px 12px 16px",
+            fontWeight: 600,
+          }}
+        >
+          Replies
+        </div>
+        <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
+          {replies.length > 0 &&
+            replies.map((reply) => {
               const replyAtUri = `at://${reply.did}/app.bsky.feed.post/${reply.rkey}`;
-              return <UniversalPostRendererATURILoader key={replyAtUri} atUri={replyAtUri} />;
+              return (
+                <UniversalPostRendererATURILoader
+                  key={replyAtUri}
+                  atUri={replyAtUri}
+                />
+              );
             })}
-          </div>
         </div>
-      )}
+      </div>
     </>
   );
-}
+}

src/utils/atoms.ts

···
+import { atom } from "jotai";
+
+export const selectedFeedUriAtom = atom<string | null>(null);
+
+export const feedScrollPositionsAtom = atom<Record<string, number>>({});

src/utils/useHydrated.ts

···
+import { useState, useEffect, useMemo } from "react";
+import {
+  AppBskyEmbedExternal,
+  AppBskyEmbedImages,
+  AppBskyEmbedRecord,
+  AppBskyEmbedRecordWithMedia,
+  AppBskyEmbedVideo,
+  AppBskyActorDefs,
+  AppBskyFeedPost,
+  AtUri,
+  type $Typed,
+} from "@atproto/api";
+import * as ATPAPI from "@atproto/api"
+
+import { useQueryPost, useQueryProfile, useQueryIdentity } from "./useQuery";
+
+type QueryResultData<T extends (...args: any) => any> = ReturnType<T> extends
+  | { data: infer D }
+  | undefined
+  ? D
+  : never;
+
+function asTyped<T extends { $type: string }>(obj: T): $Typed<T> {
+  return obj as $Typed<T>;
+}
+
+export function hydrateEmbedImages(
+  embed: AppBskyEmbedImages.Main,
+  did: string,
+): $Typed<AppBskyEmbedImages.View> {
+  return asTyped({
+    $type: "app.bsky.embed.images#view" as const,
+    images: embed.images
+      .map((img) => {
+        const link = img.image.ref?.["$link"];
+        if (!link) return null;
+        return {
+          thumb: `https://cdn.bsky.app/img/feed_thumbnail/plain/${did}/${link}@jpeg`,
+          fullsize: `https://cdn.bsky.app/img/feed_fullsize/plain/${did}/${link}@jpeg`,
+          alt: img.alt || "",
+          aspectRatio: img.aspectRatio,
+        };
+      })
+      .filter(Boolean) as AppBskyEmbedImages.ViewImage[],
+  });
+}
+
+export function hydrateEmbedExternal(
+  embed: AppBskyEmbedExternal.Main,
+  did: string,
+): $Typed<AppBskyEmbedExternal.View> {
+  return asTyped({
+    $type: "app.bsky.embed.external#view" as const,
+    external: {
+      uri: embed.external.uri,
+      title: embed.external.title,
+      description: embed.external.description,
+      thumb: embed.external.thumb?.ref?.$link
+        ? `https://cdn.bsky.app/img/feed_thumbnail/plain/${did}/${embed.external.thumb.ref.$link}@jpeg`
+        : undefined,
+    },
+  });
+}
+
+export function hydrateEmbedVideo(
+  embed: AppBskyEmbedVideo.Main,
+  did: string,
+): $Typed<AppBskyEmbedVideo.View> {
+  const videoLink = embed.video.ref.$link;
+  return asTyped({
+    $type: "app.bsky.embed.video#view" as const,
+    playlist: `https://video.bsky.app/watch/${did}/${videoLink}/playlist.m3u8`,
+    thumbnail: `https://video.bsky.app/watch/${did}/${videoLink}/thumbnail.jpg`,
+    aspectRatio: embed.aspectRatio,
+    cid: videoLink,
+  });
+}
+
+function hydrateEmbedRecord(
+  embed: AppBskyEmbedRecord.Main,
+  quotedPost: QueryResultData<typeof useQueryPost>,
+  quotedProfile: QueryResultData<typeof useQueryProfile>,
+  quotedIdentity: QueryResultData<typeof useQueryIdentity>,
+): $Typed<AppBskyEmbedRecord.View> | undefined {
+  if (!quotedPost || !quotedProfile || !quotedIdentity) {
+    return undefined;
+  }
+
+  const author: $Typed<AppBskyActorDefs.ProfileViewBasic> = asTyped({
+    $type: "app.bsky.actor.defs#profileViewBasic" as const,
+    did: quotedIdentity.did,
+    handle: quotedIdentity.handle,
+    displayName: quotedProfile.value.displayName ?? quotedIdentity.handle,
+    avatar: quotedProfile.value.avatar?.ref?.$link
+      ? `https://cdn.bsky.app/img/avatar/plain/${quotedIdentity.did}/${quotedProfile.value.avatar.ref.$link}@jpeg`
+      : undefined,
+    viewer: {},
+    labels: [],
+  });
+
+  const viewRecord: $Typed<AppBskyEmbedRecord.ViewRecord> = asTyped({
+    $type: "app.bsky.embed.record#viewRecord" as const,
+    uri: quotedPost.uri,
+    cid: quotedPost.cid,
+    author,
+    value: quotedPost.value,
+    indexedAt: quotedPost.value.createdAt,
+    embeds: quotedPost.value.embed ? [quotedPost.value.embed] : undefined,
+  });
+
+  return asTyped({
+    $type: "app.bsky.embed.record#view" as const,
+    record: viewRecord,
+  });
+}
+
+function hydrateEmbedRecordWithMedia(
+  embed: AppBskyEmbedRecordWithMedia.Main,
+  mediaHydratedEmbed:
+    | $Typed<AppBskyEmbedImages.View>
+    | $Typed<AppBskyEmbedVideo.View>
+    | $Typed<AppBskyEmbedExternal.View>,
+  quotedPost: QueryResultData<typeof useQueryPost>,
+  quotedProfile: QueryResultData<typeof useQueryProfile>,
+  quotedIdentity: QueryResultData<typeof useQueryIdentity>,
+): $Typed<AppBskyEmbedRecordWithMedia.View> | undefined {
+  const hydratedRecord = hydrateEmbedRecord(
+    embed.record,
+    quotedPost,
+    quotedProfile,
+    quotedIdentity,
+  );
+
+  if (!hydratedRecord) return undefined;
+
+  return asTyped({
+    $type: "app.bsky.embed.recordWithMedia#view" as const,
+    record: hydratedRecord,
+    media: mediaHydratedEmbed,
+  });
+}
+
+type HydratedEmbedView =
+  | $Typed<AppBskyEmbedImages.View>
+  | $Typed<AppBskyEmbedExternal.View>
+  | $Typed<AppBskyEmbedVideo.View>
+  | $Typed<AppBskyEmbedRecord.View>
+  | $Typed<AppBskyEmbedRecordWithMedia.View>;
+
+export function useHydratedEmbed(
+  embed: AppBskyFeedPost.Record["embed"],
+  postAuthorDid: string | undefined,
+) {
+  const recordInfo = useMemo(() => {
+    if (
+      AppBskyEmbedRecordWithMedia.isMain(embed)
+    ) {
+      const recordUri = embed.record.record.uri;
+      const quotedAuthorDid = new AtUri(recordUri).hostname;
+      return { recordUri, quotedAuthorDid, isRecordType: true };
+    } else 
+    if (
+      AppBskyEmbedRecord.isMain(embed)
+    ) {
+      const recordUri = embed.record.uri;
+      const quotedAuthorDid = new AtUri(recordUri).hostname;
+      return { recordUri, quotedAuthorDid, isRecordType: true };
+    }
+    return {
+      recordUri: undefined,
+      quotedAuthorDid: undefined,
+      isRecordType: false,
+    };
+  }, [embed]);
+  const { isRecordType, recordUri, quotedAuthorDid } = recordInfo;
+
+
+  const usequerypostresults = useQueryPost(recordUri);
+  // const {
+  //   data: quotedPost,
+  //   isLoading: isLoadingPost,
+  //   error: postError,
+  // } = usequerypostresults
+
+  const profileUri = quotedAuthorDid ? `at://${quotedAuthorDid}/app.bsky.actor.profile/self` : undefined;
+
+  const {
+    data: quotedProfile,
+    isLoading: isLoadingProfile,
+    error: profileError,
+  } = useQueryProfile(profileUri);
+
+  const queryidentityresult = useQueryIdentity(quotedAuthorDid);
+  // const {
+  //   data: quotedIdentity,
+  //   isLoading: isLoadingIdentity,
+  //   error: identityError,
+  // } = queryidentityresult
+
+  const [hydratedEmbed, setHydratedEmbed] = useState<
+    HydratedEmbedView | undefined
+  >(undefined);
+
+  useEffect(() => {
+    if (!embed || !postAuthorDid) {
+      setHydratedEmbed(undefined);
+      return;
+    }
+
+    if (isRecordType && (!usequerypostresults?.data || !quotedProfile || !queryidentityresult?.data)) {
+      setHydratedEmbed(undefined);
+      return;
+    }
+
+    try {
+      let result: HydratedEmbedView | undefined;
+
+      if (AppBskyEmbedImages.isMain(embed)) {
+        result = hydrateEmbedImages(embed, postAuthorDid);
+      } else if (AppBskyEmbedExternal.isMain(embed)) {
+        result = hydrateEmbedExternal(embed, postAuthorDid);
+      } else if (AppBskyEmbedVideo.isMain(embed)) {
+        result = hydrateEmbedVideo(embed, postAuthorDid);
+      } else if (AppBskyEmbedRecord.isMain(embed)) {
+        result = hydrateEmbedRecord(
+          embed,
+          usequerypostresults?.data,
+          quotedProfile,
+          queryidentityresult?.data,
+        );
+      } else if (AppBskyEmbedRecordWithMedia.isMain(embed)) {
+        let hydratedMedia:
+          | $Typed<AppBskyEmbedImages.View>
+          | $Typed<AppBskyEmbedVideo.View>
+          | $Typed<AppBskyEmbedExternal.View>
+          | undefined;
+
+        if (AppBskyEmbedImages.isMain(embed.media)) {
+          hydratedMedia = hydrateEmbedImages(embed.media, postAuthorDid);
+        } else if (AppBskyEmbedExternal.isMain(embed.media)) {
+          hydratedMedia = hydrateEmbedExternal(embed.media, postAuthorDid);
+        } else if (AppBskyEmbedVideo.isMain(embed.media)) {
+          hydratedMedia = hydrateEmbedVideo(embed.media, postAuthorDid);
+        }
+
+        if (hydratedMedia) {
+          result = hydrateEmbedRecordWithMedia(
+            embed,
+            hydratedMedia,
+            usequerypostresults?.data,
+            quotedProfile,
+            queryidentityresult?.data,
+          );
+        }
+      }
+      setHydratedEmbed(result);
+    } catch (e) {
+      console.error("Error hydrating embed", e);
+      setHydratedEmbed(undefined);
+    }
+  }, [
+    embed,
+    postAuthorDid,
+    isRecordType,
+    usequerypostresults?.data,
+    quotedProfile,
+    queryidentityresult?.data,
+  ]);
+
+  const isLoading = isRecordType
+    ? usequerypostresults?.isLoading || isLoadingProfile || queryidentityresult?.isLoading
+    : false;
+  const error = usequerypostresults?.error || profileError || queryidentityresult?.error;
+
+  return { data: hydratedEmbed, isLoading, error };
+}

src/utils/useQuery.ts

···
+import {
+  queryOptions,
+  useQuery,
+  useInfiniteQuery,
+  type QueryFunctionContext,
+  type UseQueryResult,
+  type InfiniteData
+} from "@tanstack/react-query";
+import * as ATPAPI from "@atproto/api";
+
+export function constructIdentityQuery(didorhandle?: string) {
+  return queryOptions({
+    queryKey: ["identity", didorhandle],
+    queryFn: async () => {
+      if (!didorhandle) return undefined as undefined
+      const res = await fetch(
+        `https://slingshot.microcosm.blue/xrpc/com.bad-example.identity.resolveMiniDoc?identifier=${encodeURIComponent(didorhandle)}`
+      );
+      if (!res.ok) throw new Error("Failed to fetch post");
+      try {
+        return (await res.json()) as {
+          did: string;
+          handle: string;
+          pds: string;
+          signing_key: string;
+        };
+      } catch (_e) {
+        return undefined;
+      }
+    },
+  });
+}
+export function useQueryIdentity(didorhandle: string): UseQueryResult<
+  {
+    did: string;
+    handle: string;
+    pds: string;
+    signing_key: string;
+  },
+  Error
+>;
+export function useQueryIdentity(): UseQueryResult<
+      undefined,
+      Error
+    >
+export function useQueryIdentity(didorhandle?: string):
+  UseQueryResult<
+      {
+        did: string;
+        handle: string;
+        pds: string;
+        signing_key: string;
+      } | undefined,
+      Error
+    >
+export function useQueryIdentity(didorhandle?: string) {
+  return useQuery(constructIdentityQuery(didorhandle));
+}
+
+export function constructPostQuery(uri?: string) {
+  return queryOptions({
+    queryKey: ["post", uri],
+    queryFn: async () => {
+      if (!uri) return undefined as undefined
+      const res = await fetch(
+        `https://slingshot.microcosm.blue/xrpc/com.bad-example.repo.getUriRecord?at_uri=${encodeURIComponent(uri)}`
+      );
+      if (!res.ok) throw new Error("Failed to fetch post");
+      try {
+        return (await res.json()) as {
+          uri: string;
+          cid: string;
+          value: ATPAPI.AppBskyFeedPost.Record;
+        };
+      } catch (_e) {
+        return undefined;
+      }
+    },
+  });
+}
+export function useQueryPost(uri: string): UseQueryResult<
+  {
+    uri: string;
+    cid: string;
+    value: ATPAPI.AppBskyFeedPost.Record;
+  },
+  Error
+>;
+export function useQueryPost(): UseQueryResult<
+      undefined,
+      Error
+    >
+export function useQueryPost(uri?: string):
+  UseQueryResult<
+      {
+        uri: string;
+        cid: string;
+        value: ATPAPI.AppBskyFeedPost.Record;
+      } | undefined,
+      Error
+    >
+export function useQueryPost(uri?: string) {
+  return useQuery(constructPostQuery(uri));
+}
+
+export function constructProfileQuery(uri?: string) {
+  return queryOptions({
+    queryKey: ["profile", uri],
+    queryFn: async () => {
+      if (!uri) return undefined as undefined
+      const res = await fetch(
+        `https://slingshot.microcosm.blue/xrpc/com.bad-example.repo.getUriRecord?at_uri=${encodeURIComponent(uri)}`
+      );
+      if (!res.ok) throw new Error("Failed to fetch post");
+      try {
+        return (await res.json()) as {
+          uri: string;
+          cid: string;
+          value: ATPAPI.AppBskyActorProfile.Record;
+        };
+      } catch (_e) {
+        return undefined;
+      }
+    },
+  });
+}
+export function useQueryProfile(uri: string): UseQueryResult<
+  {
+    uri: string;
+    cid: string;
+    value: ATPAPI.AppBskyActorProfile.Record;
+  },
+  Error
+>;
+export function useQueryProfile(): UseQueryResult<
+  undefined,
+  Error
+>;
+export function useQueryProfile(uri?: string):
+  UseQueryResult<
+    {
+      uri: string;
+      cid: string;
+      value: ATPAPI.AppBskyActorProfile.Record;
+    } | undefined,
+    Error
+  >
+export function useQueryProfile(uri?: string) {
+  return useQuery(constructProfileQuery(uri));
+}
+
+// export function constructConstellationQuery(
+//   method: "/links",
+//   target: string,
+//   collection: string,
+//   path: string,
+//   cursor?: string
+// ): QueryOptions<linksRecordsResponse, Error>;
+// export function constructConstellationQuery(
+//   method: "/links/distinct-dids",
+//   target: string,
+//   collection: string,
+//   path: string,
+//   cursor?: string
+// ): QueryOptions<linksDidsResponse, Error>;
+// export function constructConstellationQuery(
+//   method: "/links/count",
+//   target: string,
+//   collection: string,
+//   path: string,
+//   cursor?: string
+// ): QueryOptions<linksCountResponse, Error>;
+// export function constructConstellationQuery(
+//   method: "/links/count/distinct-dids",
+//   target: string,
+//   collection: string,
+//   path: string,
+//   cursor?: string
+// ): QueryOptions<linksCountResponse, Error>;
+// export function constructConstellationQuery(
+//   method: "/links/all",
+//   target: string
+// ): QueryOptions<linksAllResponse, Error>;
+export function constructConstellationQuery(query?:{
+  method:
+    | "/links"
+    | "/links/distinct-dids"
+    | "/links/count"
+    | "/links/count/distinct-dids"
+    | "/links/all",
+  target: string,
+  collection?: string,
+  path?: string,
+  cursor?: string
+}
+) {
+  // : QueryOptions<
+  //   | linksRecordsResponse
+  //   | linksDidsResponse
+  //   | linksCountResponse
+  //   | linksAllResponse
+  //   | undefined,
+  //   Error
+  // >
+  return queryOptions({
+    queryKey: ["post", query?.method, query?.target, query?.collection, query?.path, query?.cursor] as const,
+    queryFn: async () => {
+      if (!query) return undefined as undefined
+      const method = query.method
+      const target = query.target
+      const collection = query?.collection
+      const path = query?.path
+      const cursor = query.cursor
+      const res = await fetch(
+        `https://constellation.microcosm.blue${method}?target=${encodeURIComponent(target)}${collection ? `&collection=${encodeURIComponent(collection)}` : ""}${path ? `&path=${encodeURIComponent(path)}` : ""}${cursor ? `&cursor=${encodeURIComponent(cursor)}` : ""}`
+      );
+      if (!res.ok) throw new Error("Failed to fetch post");
+      try {
+        switch (method) {
+          case "/links":
+            return (await res.json()) as linksRecordsResponse;
+          case "/links/distinct-dids":
+            return (await res.json()) as linksDidsResponse;
+          case "/links/count":
+            return (await res.json()) as linksCountResponse;
+          case "/links/count/distinct-dids":
+            return (await res.json()) as linksCountResponse;
+          case "/links/all":
+            return (await res.json()) as linksAllResponse;
+          default:
+            return undefined;
+        }
+      } catch (_e) {
+        return undefined;
+      }
+    },
+  });
+}
+export function useQueryConstellation(query: {
+  method: "/links";
+  target: string;
+  collection: string;
+  path: string;
+  cursor?: string;
+}): UseQueryResult<linksRecordsResponse, Error>;
+export function useQueryConstellation(query: {
+  method: "/links/distinct-dids";
+  target: string;
+  collection: string;
+  path: string;
+  cursor?: string;
+}): UseQueryResult<linksDidsResponse, Error>;
+export function useQueryConstellation(query: {
+  method: "/links/count";
+  target: string;
+  collection: string;
+  path: string;
+  cursor?: string;
+}): UseQueryResult<linksCountResponse, Error>;
+export function useQueryConstellation(query: {
+  method: "/links/count/distinct-dids";
+  target: string;
+  collection: string;
+  path: string;
+  cursor?: string;
+}): UseQueryResult<linksCountResponse, Error>;
+export function useQueryConstellation(query: {
+  method: "/links/all";
+  target: string;
+}): UseQueryResult<linksAllResponse, Error>;
+export function useQueryConstellation(): undefined;
+export function useQueryConstellation(query?: {
+  method:
+    | "/links"
+    | "/links/distinct-dids"
+    | "/links/count"
+    | "/links/count/distinct-dids"
+    | "/links/all";
+  target: string;
+  collection?: string;
+  path?: string;
+  cursor?: string;
+}):
+  | UseQueryResult<
+      | linksRecordsResponse
+      | linksDidsResponse
+      | linksCountResponse
+      | linksAllResponse
+      | undefined,
+      Error
+    >
+  | undefined {
+  //if (!query) return;
+  return useQuery(
+    constructConstellationQuery(query)
+  );
+}
+
+type linksRecord = {
+  did: string;
+  collection: string;
+  rkey: string;
+};
+type linksRecordsResponse = {
+  total: string;
+  linking_records: linksRecord[];
+  cursor?: string;
+};
+type linksDidsResponse = {
+  total: string;
+  linking_dids: string[];
+  cursor?: string;
+};
+type linksCountResponse = {
+  total: string;
+};
+type linksAllResponse = {
+  links: Record<
+    string,
+    Record<
+      string,
+      {
+        records: number;
+        distinct_dids: number;
+      }
+    >
+  >;
+};
+
+export function constructFeedSkeletonQuery(options?: {
+  feedUri: string;
+  agent?: ATPAPI.AtpAgent;
+  isAuthed: boolean;
+  pdsUrl?: string;
+  feedServiceDid?: string;
+}) {
+  return queryOptions({
+    // The query key includes all dependencies to ensure it refetches when they change
+    queryKey: ["feedSkeleton", options?.feedUri, { isAuthed: options?.isAuthed, did: options?.agent?.did }],
+    queryFn: async () => {
+      if (!options) return undefined as undefined
+      const { feedUri, agent, isAuthed, pdsUrl, feedServiceDid } = options;
+      if (isAuthed) {
+        // Authenticated flow
+        if (!agent || !pdsUrl || !feedServiceDid) {
+          throw new Error("Missing required info for authenticated feed fetch.");
+        }
+        const url = `${pdsUrl}/xrpc/app.bsky.feed.getFeedSkeleton?feed=${encodeURIComponent(feedUri)}`;
+        const res = await agent.fetchHandler(url, {
+          method: "GET",
+          headers: {
+            "atproto-proxy": `${feedServiceDid}#bsky_fg`,
+            "Content-Type": "application/json",
+          },
+        });
+        if (!res.ok) throw new Error(`Authenticated feed fetch failed: ${res.statusText}`);
+        return (await res.json()) as ATPAPI.AppBskyFeedGetFeedSkeleton.OutputSchema;
+      } else {
+        // Unauthenticated flow (using a public PDS/AppView)
+        const url = `https://discover.bsky.app/xrpc/app.bsky.feed.getFeedSkeleton?feed=${encodeURIComponent(feedUri)}`;
+        const res = await fetch(url);
+        if (!res.ok) throw new Error(`Public feed fetch failed: ${res.statusText}`);
+        return (await res.json()) as ATPAPI.AppBskyFeedGetFeedSkeleton.OutputSchema;
+      }
+    },
+    //enabled: !!feedUri && (isAuthed ? !!agent && !!pdsUrl && !!feedServiceDid : true),
+  });
+}
+
+export function useQueryFeedSkeleton(options?: {
+  feedUri: string;
+  agent?: ATPAPI.AtpAgent;
+  isAuthed: boolean;
+  pdsUrl?: string;
+  feedServiceDid?: string;
+}) {
+  return useQuery(constructFeedSkeletonQuery(options));
+}
+
+export function constructPreferencesQuery(agent?: ATPAPI.AtpAgent | undefined, pdsUrl?: string | undefined) {
+  return queryOptions({
+    queryKey: ['preferences', agent?.did],
+    queryFn: async () => {
+      if (!agent || !pdsUrl) throw new Error("Agent or PDS URL not available");
+      const url = `${pdsUrl}/xrpc/app.bsky.actor.getPreferences`;
+      const res = await agent.fetchHandler(url, { method: "GET" });
+      if (!res.ok) throw new Error("Failed to fetch preferences");
+      return res.json();
+    },
+  });
+}
+export function useQueryPreferences(options: {
+  agent?: ATPAPI.AtpAgent | undefined, pdsUrl?: string | undefined
+}) {
+  return useQuery(constructPreferencesQuery(options.agent, options.pdsUrl));
+}
+
+
+
+export function constructArbitraryQuery(uri?: string) {
+  return queryOptions({
+    queryKey: ["post", uri],
+    queryFn: async () => {
+      if (!uri) return undefined as undefined
+      const res = await fetch(
+        `https://slingshot.microcosm.blue/xrpc/com.bad-example.repo.getUriRecord?at_uri=${encodeURIComponent(uri)}`
+      );
+      if (!res.ok) throw new Error("Failed to fetch post");
+      try {
+        return (await res.json()) as {
+          uri: string;
+          cid: string;
+          value: any;
+        };
+      } catch (_e) {
+        return undefined;
+      }
+    },
+  });
+}
+export function useQueryArbitrary(uri: string): UseQueryResult<
+  {
+    uri: string;
+    cid: string;
+    value: any;
+  },
+  Error
+>;
+export function useQueryArbitrary(): UseQueryResult<
+  undefined,
+  Error
+>;
+export function useQueryArbitrary(uri?: string): UseQueryResult<
+  {
+    uri: string;
+    cid: string;
+    value: any;
+  } | undefined,
+  Error
+>;
+export function useQueryArbitrary(uri?: string) {
+  return useQuery(constructArbitraryQuery(uri));
+}
+
+export function constructFallbackNothingQuery(){
+  return queryOptions({
+    queryKey: ["nothing"],
+    queryFn: async () => {
+      return undefined
+    },
+  });
+}
+
+type ListRecordsResponse = {
+  cursor?: string;
+  records: {
+    uri: string;
+    cid: string;
+    value: ATPAPI.AppBskyFeedPost.Record;
+  }[];
+};
+
+export function constructAuthorFeedQuery(did: string, pdsUrl: string) {
+  return queryOptions({
+    queryKey: ['authorFeed', did],
+    queryFn: async ({ pageParam }: QueryFunctionContext) => {
+      const limit = 25;
+      
+      const cursor = pageParam as string | undefined;
+      const cursorParam = cursor ? `&cursor=${cursor}` : '';
+      
+      const url = `${pdsUrl}/xrpc/com.atproto.repo.listRecords?repo=${did}&collection=app.bsky.feed.post&limit=${limit}${cursorParam}`;
+      
+      const res = await fetch(url);
+      if (!res.ok) throw new Error("Failed to fetch author's posts");
+      
+      return res.json() as Promise<ListRecordsResponse>;
+    },
+  });
+}
+
+export function useInfiniteQueryAuthorFeed(did: string | undefined, pdsUrl: string | undefined) {
+  const { queryKey, queryFn } = constructAuthorFeedQuery(did!, pdsUrl!);
+  
+  return useInfiniteQuery({
+    queryKey,
+    queryFn,
+    initialPageParam: undefined as never, // ???? what is this shit
+    getNextPageParam: (lastPage) => lastPage.cursor as null | undefined,
+    enabled: !!did && !!pdsUrl,
+  });
+}
+
+type FeedSkeletonPage = ATPAPI.AppBskyFeedGetFeedSkeleton.OutputSchema;
+
+export function constructInfiniteFeedSkeletonQuery(options: {
+  feedUri: string;
+  agent?: ATPAPI.AtpAgent;
+  isAuthed: boolean;
+  pdsUrl?: string;
+  feedServiceDid?: string;
+}) {
+  const { feedUri, agent, isAuthed, pdsUrl, feedServiceDid } = options;
+  
+  return queryOptions({
+    queryKey: ["feedSkeleton", feedUri, { isAuthed, did: agent?.did }],
+    
+    queryFn: async ({ pageParam }: QueryFunctionContext): Promise<FeedSkeletonPage> => {
+      const cursorParam = pageParam ? `&cursor=${pageParam}` : "";
+      
+      if (isAuthed) {
+        if (!agent || !pdsUrl || !feedServiceDid) {
+          throw new Error("Missing required info for authenticated feed fetch.");
+        }
+        const url = `${pdsUrl}/xrpc/app.bsky.feed.getFeedSkeleton?feed=${encodeURIComponent(feedUri)}${cursorParam}`;
+        const res = await agent.fetchHandler(url, {
+          method: "GET",
+          headers: {
+            "atproto-proxy": `${feedServiceDid}#bsky_fg`,
+            "Content-Type": "application/json",
+          },
+        });
+        if (!res.ok) throw new Error(`Authenticated feed fetch failed: ${res.statusText}`);
+        return (await res.json()) as FeedSkeletonPage;
+      } else {
+        const url = `https://discover.bsky.app/xrpc/app.bsky.feed.getFeedSkeleton?feed=${encodeURIComponent(feedUri)}${cursorParam}`;
+        const res = await fetch(url);
+        if (!res.ok) throw new Error(`Public feed fetch failed: ${res.statusText}`);
+        return (await res.json()) as FeedSkeletonPage;
+      }
+    },
+  });
+}
+
+export function useInfiniteQueryFeedSkeleton(options: {
+  feedUri: string;
+  agent?: ATPAPI.AtpAgent;
+  isAuthed: boolean;
+  pdsUrl?: string;
+  feedServiceDid?: string;
+}) {
+  const { queryKey, queryFn } = constructInfiniteFeedSkeletonQuery(options);
+  
+  return useInfiniteQuery({
+    queryKey,
+    queryFn,
+    initialPageParam: undefined as never,
+    getNextPageParam: (lastPage) => lastPage.cursor as null | undefined,
+    enabled: !!options.feedUri && (options.isAuthed ? !!options.agent && !!options.pdsUrl && !!options.feedServiceDid : true),
+  });
+}