Prototype: Show known likers on post thread page (#11080)

Co-authored-by: Eric Bailey <git@esb.lol>

src/state/queries/post-liked-by.ts

@@ -4,8 +4,11 @@ import {
   type QueryClient,
   type QueryKey,
   useInfiniteQuery,
+  useQuery,
 } from '@tanstack/react-query'
 
+import {STALE} from '#/state/queries'
+import {createQueryKey} from '#/state/queries/util'
 import {useAgent} from '#/state/session'
 
 const PAGE_SIZE = 30
@@ -39,6 +42,40 @@ export function useLikedByQuery(resolvedUri: string | undefined) {
   })
 }
 
+/**
+ * The maximum `limit` accepted by `app.bsky.feed.getLikes` in a single
+ * request.
+ */
+const SAMPLE_SIZE = 100
+
+const likedBySampleQueryKeyRoot = 'liked-by-sample'
+export const createLikedBySampleQueryKey = (args: {uri: string}) =>
+  createQueryKey(likedBySampleQueryKeyRoot, args)
+
+/**
+ * A single-request sample of a post's most recent likers, as many as the API
+ * allows in one page (100). Used for the known-likers social proof on the
+ * post thread page. Kept separate from `useLikedByQuery` so it does not
+ * perturb the liked-by screen's pagination.
+ */
+export function useLikedBySampleQuery({uri}: {uri: string | undefined}) {
+  const agent = useAgent()
+  return useQuery({
+    queryKey: createLikedBySampleQueryKey({uri: uri ?? ''}),
+    queryFn: async () => {
+      const res = await agent.getLikes({uri: uri ?? '', limit: SAMPLE_SIZE})
+      return res.data
+    },
+    staleTime: STALE.MINUTES.FIVE,
+    enabled: !!uri,
+    /*
+     * Consumers fall back to a plain like count when this query fails, so
+     * failing fast is preferable to amplifying getLikes load with retries.
+     */
+    retry: 1,
+  })
+}
+
 export function* findAllProfilesInQueryData(
   queryClient: QueryClient,
   did: string,
@@ -60,4 +97,18 @@ export function* findAllProfilesInQueryData(
       }
     }
   }
+  const sampleQueryDatas =
+    queryClient.getQueriesData<AppBskyFeedGetLikes.OutputSchema>({
+      queryKey: [likedBySampleQueryKeyRoot],
+    })
+  for (const [_queryKey, queryData] of sampleQueryDatas) {
+    if (!queryData?.likes) {
+      continue
+    }
+    for (const like of queryData.likes) {
+      if (like.actor.did === did) {
+        yield like.actor
+      }
+    }
+  }
 }