Port Profile Followers/Follows to RQ (#1893)

* Port user followers to RQ

* Port user follows to RQ

* Start porting FollowButton to RQ

* Fix RQ key

* Check pending

* Fix shadow and pending states

* Rm unused

* Remove last usage of useFollowProfile

3 files changed, 90 insertions, 2 deletions

diff --git a/src/state/queries/profile-followers.ts b/src/state/queries/profile-followers.ts
new file mode 100644
index 000000000..8e76a20a0
--- /dev/null
+++ b/src/state/queries/profile-followers.ts
@@ -0,0 +1,32 @@
+import {AppBskyGraphGetFollowers} from '@atproto/api'
+import {useInfiniteQuery, InfiniteData, QueryKey} from '@tanstack/react-query'
+import {useSession} from '../session'
+
+const PAGE_SIZE = 30
+type RQPageParam = string | undefined
+
+export const RQKEY = (did: string) => ['profile-followers', did]
+
+export function useProfileFollowersQuery(did: string | undefined) {
+  const {agent} = useSession()
+  return useInfiniteQuery<
+    AppBskyGraphGetFollowers.OutputSchema,
+    Error,
+    InfiniteData<AppBskyGraphGetFollowers.OutputSchema>,
+    QueryKey,
+    RQPageParam
+  >({
+    queryKey: RQKEY(did || ''),
+    async queryFn({pageParam}: {pageParam: RQPageParam}) {
+      const res = await agent.app.bsky.graph.getFollowers({
+        actor: did || '',
+        limit: PAGE_SIZE,
+        cursor: pageParam,
+      })
+      return res.data
+    },
+    initialPageParam: undefined,
+    getNextPageParam: lastPage => lastPage.cursor,
+    enabled: !!did,
+  })
+}
diff --git a/src/state/queries/profile-follows.ts b/src/state/queries/profile-follows.ts
new file mode 100644
index 000000000..f96cfc107
--- /dev/null
+++ b/src/state/queries/profile-follows.ts
@@ -0,0 +1,32 @@
+import {AppBskyGraphGetFollows} from '@atproto/api'
+import {useInfiniteQuery, InfiniteData, QueryKey} from '@tanstack/react-query'
+import {useSession} from '../session'
+
+const PAGE_SIZE = 30
+type RQPageParam = string | undefined
+
+export const RQKEY = (did: string) => ['profile-follows', did]
+
+export function useProfileFollowsQuery(did: string | undefined) {
+  const {agent} = useSession()
+  return useInfiniteQuery<
+    AppBskyGraphGetFollows.OutputSchema,
+    Error,
+    InfiniteData<AppBskyGraphGetFollows.OutputSchema>,
+    QueryKey,
+    RQPageParam
+  >({
+    queryKey: RQKEY(did || ''),
+    async queryFn({pageParam}: {pageParam: RQPageParam}) {
+      const res = await agent.app.bsky.graph.getFollows({
+        actor: did || '',
+        limit: PAGE_SIZE,
+        cursor: pageParam,
+      })
+      return res.data
+    },
+    initialPageParam: undefined,
+    getNextPageParam: lastPage => lastPage.cursor,
+    enabled: !!did,
+  })
+}
diff --git a/src/state/queries/suggested-follows.ts b/src/state/queries/suggested-follows.ts
index 805668bcb..5b5e142ca 100644
--- a/src/state/queries/suggested-follows.ts
+++ b/src/state/queries/suggested-follows.ts
@@ -1,7 +1,12 @@
-import {AppBskyActorGetSuggestions, moderateProfile} from '@atproto/api'
+import {
+  AppBskyActorGetSuggestions,
+  AppBskyGraphGetSuggestedFollowsByActor,
+  moderateProfile,
+} from '@atproto/api'
 import {
   useInfiniteQuery,
   useMutation,
+  useQuery,
   InfiniteData,
   QueryKey,
 } from '@tanstack/react-query'
@@ -9,7 +14,11 @@ import {
 import {useSession} from '#/state/session'
 import {useModerationOpts} from '#/state/queries/preferences'
 
-export const suggestedFollowsQueryKey = ['suggested-follows']
+const suggestedFollowsQueryKey = ['suggested-follows']
+const suggestedFollowsByActorQuery = (did: string) => [
+  'suggested-follows-by-actor',
+  did,
+]
 
 export function useSuggestedFollowsQuery() {
   const {agent, currentAccount} = useSession()
@@ -60,6 +69,21 @@ export function useSuggestedFollowsQuery() {
   })
 }
 
+export function useSuggestedFollowsByActorQuery({did}: {did: string}) {
+  const {agent} = useSession()
+
+  return useQuery<AppBskyGraphGetSuggestedFollowsByActor.OutputSchema, Error>({
+    queryKey: suggestedFollowsByActorQuery(did),
+    queryFn: async () => {
+      const res = await agent.app.bsky.graph.getSuggestedFollowsByActor({
+        actor: did,
+      })
+      return res.data
+    },
+  })
+}
+
+// TODO: Delete and replace usages with the one above.
 export function useGetSuggestedFollowersByActor() {
   const {agent} = useSession()