Overfetch trending topics before filtering (#11477)

src/state/queries/trending/useGetTrendsQuery.ts

@@ -14,8 +14,10 @@ import {useAppviewClient} from '#/state/session'
 import {app} from '#/lexicons'
 
 export const DEFAULT_LIMIT = 5
+export const DEFAULT_FETCH_LIMIT = 20
 
 type QueryProps = {
+  fetchLimit?: number
   limit?: number
   refetchOnWindowFocus?: boolean
 }
@@ -29,12 +31,13 @@ function dedupe<T extends {link: string}>(trends: T[]): T[] {
   })
 }
 
-export const createGetTrendsQueryKey = (limit?: number) =>
-  limit === undefined ? ['trends'] : ['trends', {limit}]
+export const createGetTrendsQueryKey = (fetchLimit?: number) =>
+  fetchLimit === undefined ? ['trends'] : ['trends', {limit: fetchLimit}]
 
 export function useGetTrendsQuery(props: QueryProps = {}) {
   const client = useAppviewClient()
   const {data: preferences} = usePreferencesQuery()
+  const fetchLimit = props.fetchLimit ?? DEFAULT_FETCH_LIMIT
   const limit = props.limit ?? DEFAULT_LIMIT
   const mutedWords = useMemo(() => {
     return preferences?.moderationPrefs?.mutedWords || []
@@ -44,13 +47,13 @@ export function useGetTrendsQuery(props: QueryProps = {}) {
     enabled: !!preferences,
     refetchOnWindowFocus: props.refetchOnWindowFocus,
     staleTime: STALE.MINUTES.THREE,
-    queryKey: createGetTrendsQueryKey(limit),
+    queryKey: createGetTrendsQueryKey(fetchLimit),
     queryFn: async () => {
       const contentLangs = getContentLanguages().join(',')
       const data = await client.call(
         app.bsky.unspecced.getTrends,
         {
-          limit,
+          limit: fetchLimit,
         },
         {
           headers: {
@@ -75,10 +78,10 @@ export function useGetTrendsQuery(props: QueryProps = {}) {
                 text: `${t.topic} ${t.displayName} ${t.category}`,
               })
             }),
-          ),
+          ).slice(0, limit),
         }
       },
-      [mutedWords],
+      [limit, mutedWords],
     ),
   })
 }