Restore post-thread caching behaviors (react-query refactor) (#2010)

* Rework resolve-did and resolve-uri queries to be smarter about cache reuse

* Precache handle resolutions

* Remove old unused code

* Load placeholder threads from the post-feed and notifications-feed queries

* Remove logs

* Fix bad ref

* Add loading spinners to the cache-loading thread view

* Scroll replies into view when loading threads

* Add caching within a thread

* Fix: dont show bottom border when the child spinner is active

src/state/queries/resolve-uri.ts

@@ -1,27 +1,76 @@
-import {useQuery} from '@tanstack/react-query'
-import {AtUri} from '@atproto/api'
+import {QueryClient, useQuery, UseQueryResult} from '@tanstack/react-query'
+import {AtUri, AppBskyActorDefs, AppBskyFeedDefs} from '@atproto/api'
 
 import {getAgent} from '#/state/session'
 import {STALE} from '#/state/queries'
+import {ThreadNode} from './post-thread'
 
-export const RQKEY = (uri: string) => ['resolved-uri', uri]
+export const RQKEY = (didOrHandle: string) => ['resolved-did', didOrHandle]
 
-export function useResolveUriQuery(uri: string | undefined) {
-  return useQuery<{uri: string; did: string}, Error>({
-    staleTime: STALE.INFINITY,
-    queryKey: RQKEY(uri || ''),
-    async queryFn() {
-      const urip = new AtUri(uri || '')
-      if (!urip.host.startsWith('did:')) {
-        const res = await getAgent().resolveHandle({handle: urip.host})
-        urip.host = res.data.did
-      }
-      return {did: urip.host, uri: urip.toString()}
-    },
-    enabled: !!uri,
-  })
+type UriUseQueryResult = UseQueryResult<{did: string; uri: string}, Error>
+export function useResolveUriQuery(uri: string | undefined): UriUseQueryResult {
+  const urip = new AtUri(uri || '')
+  const res = useResolveDidQuery(urip.host)
+  if (res.data) {
+    urip.host = res.data
+    return {
+      ...res,
+      data: {did: urip.host, uri: urip.toString()},
+    } as UriUseQueryResult
+  }
+  return res as UriUseQueryResult
 }
 
 export function useResolveDidQuery(didOrHandle: string | undefined) {
-  return useResolveUriQuery(didOrHandle ? `at://${didOrHandle}/` : undefined)
+  return useQuery<string, Error>({
+    staleTime: STALE.INFINITY,
+    queryKey: RQKEY(didOrHandle || ''),
+    async queryFn() {
+      if (!didOrHandle) {
+        return ''
+      }
+      if (!didOrHandle.startsWith('did:')) {
+        const res = await getAgent().resolveHandle({handle: didOrHandle})
+        didOrHandle = res.data.did
+      }
+      return didOrHandle
+    },
+    enabled: !!didOrHandle,
+  })
+}
+
+export function precacheProfile(
+  queryClient: QueryClient,
+  profile:
+    | AppBskyActorDefs.ProfileView
+    | AppBskyActorDefs.ProfileViewBasic
+    | AppBskyActorDefs.ProfileViewDetailed,
+) {
+  queryClient.setQueryData(RQKEY(profile.handle), profile.did)
+}
+
+export function precacheFeedPosts(
+  queryClient: QueryClient,
+  posts: AppBskyFeedDefs.FeedViewPost[],
+) {
+  for (const post of posts) {
+    precacheProfile(queryClient, post.post.author)
+  }
+}
+
+export function precacheThreadPosts(
+  queryClient: QueryClient,
+  node: ThreadNode,
+) {
+  if (node.type === 'post') {
+    precacheProfile(queryClient, node.post.author)
+    if (node.parent) {
+      precacheThreadPosts(queryClient, node.parent)
+    }
+    if (node.replies?.length) {
+      for (const reply of node.replies) {
+        precacheThreadPosts(queryClient, reply)
+      }
+    }
+  }
 }