infinite query

src/screens/StarterPack/Wizard/StepProfiles.tsx

@@ -3,8 +3,9 @@ import {ListRenderItemInfo, View} from 'react-native'
 import {KeyboardAwareScrollView} from 'react-native-keyboard-controller'
 import {AppBskyActorDefs, ModerationOpts} from '@atproto/api'
 
+import {isNative} from 'platform/detection'
 import {useActorAutocompleteQuery} from 'state/queries/actor-autocomplete'
-import {useActorSearch} from 'state/queries/actor-search'
+import {useActorSearchPaginated} from 'state/queries/actor-search'
 import {SearchInput} from 'view/com/util/forms/SearchInput'
 import {List} from 'view/com/util/List'
 import {useWizardState} from '#/screens/StarterPack/Wizard/State'
@@ -14,7 +15,7 @@ import {ScreenTransition} from '#/components/StarterPack/Wizard/ScreenTransition
 import {WizardProfileCard} from '#/components/StarterPack/Wizard/WizardListCard'
 
 function keyExtractor(item: AppBskyActorDefs.ProfileViewBasic) {
-  return item.did
+  return item?.did ?? ''
 }
 
 export function StepProfiles({
@@ -26,10 +27,11 @@ export function StepProfiles({
   const [state, dispatch] = useWizardState()
   const [query, setQuery] = useState('')
 
-  const {data: topFollowers} = useActorSearch({
+  const {data: topPages, fetchNextPage} = useActorSearchPaginated({
     query: encodeURIComponent('*'),
-    limit: 50,
   })
+  const topFollowers = topPages?.pages.flatMap(p => p.actors)
+
   const {data: results} = useActorAutocompleteQuery(query, true, 12)
 
   const renderItem = ({
@@ -67,6 +69,11 @@ export function StepProfiles({
         containWeb={true}
         sideBorders={false}
         style={[a.flex_1]}
+        onEndReached={() => {
+          console.log('test')
+          fetchNextPage()
+        }}
+        onEndReachedThreshold={isNative ? 2 : 0.25}
         ListEmptyComponent={
           <View style={[a.flex_1, a.align_center, a.mt_lg]}>
             <Loader size="lg" />

src/state/queries/actor-search.ts

@@ -1,5 +1,11 @@
-import {AppBskyActorDefs} from '@atproto/api'
+import {AppBskyActorDefs, AppBskyActorSearchActors} from '@atproto/api'
-import {QueryClient, useQuery} from '@tanstack/react-query'
+import {
+  InfiniteData,
+  QueryClient,
+  QueryKey,
+  useInfiniteQuery,
+  useQuery,
+} from '@tanstack/react-query'
 
 import {STALE} from '#/state/queries'
 import {useAgent} from '#/state/session'
@@ -7,6 +13,11 @@ import {useAgent} from '#/state/session'
 const RQKEY_ROOT = 'actor-search'
 export const RQKEY = (query: string) => [RQKEY_ROOT, query]
 
+export const RQKEY_PAGINATED = (query: string) => [
+  `${RQKEY_ROOT}_paginated`,
+  query,
+]
+
 export function useActorSearch({
   query,
   limit = 20,
@@ -31,6 +42,37 @@ export function useActorSearch({
   })
 }
 
+export function useActorSearchPaginated({
+  query,
+  enabled,
+}: {
+  query: string
+  enabled?: boolean
+}) {
+  const agent = useAgent()
+  return useInfiniteQuery<
+    AppBskyActorSearchActors.OutputSchema,
+    Error,
+    InfiniteData<AppBskyActorSearchActors.OutputSchema>,
+    QueryKey,
+    string | undefined
+  >({
+    staleTime: STALE.MINUTES.FIVE,
+    queryKey: RQKEY_PAGINATED(query),
+    queryFn: async ({pageParam}) => {
+      const res = await agent.searchActors({
+        q: query,
+        limit: 25,
+        cursor: pageParam,
+      })
+      return res.data
+    },
+    enabled: enabled && !!query,
+    initialPageParam: undefined,
+    getNextPageParam: lastPage => lastPage.cursor,
+  })
+}
+
 export function* findAllProfilesInQueryData(
   queryClient: QueryClient,
   did: string,