update other changes to useQuery with fallback

Author: afbase

src/state/queries/actor-autocomplete.ts

@@ -1,6 +1,6 @@
 import React from 'react'
 import {AppBskyActorDefs, moderateProfile, ModerationOpts} from '@atproto/api'
-import {keepPreviousData, useQuery, useQueryClient} from '@tanstack/react-query'
+import {fetchQueryWithFallback, keepPreviousData, useQuery, useQueryClient} from './useQueryWithFallback'
 
 import {isJustAMute, moduiContainsHideableOffense} from '#/lib/moderation'
 import {logger} from '#/logger'
@@ -69,14 +69,16 @@ export function useActorAutocompleteFn() {
       let res
       if (query) {
         try {
-          res = await queryClient.fetchQuery({
-            staleTime: STALE.MINUTES.ONE,
+          res = await fetchQueryWithFallback(queryClient, {
             queryKey: RQKEY(query || ''),
             queryFn: () =>
               agent.searchActorsTypeahead({
                 q: query,
                 limit,
               }),
+            enableFallback: true,
+            fallbackType: 'profile',
+            fallbackIdentifier: query,
           })
         } catch (e) {
           logger.error('useActorSearch: searchActorsTypeahead failed', {

src/state/queries/handle.ts

@@ -1,5 +1,5 @@
 import React from 'react'
-import {useMutation, useQueryClient} from '@tanstack/react-query'
+import {fetchQueryWithFallback, useMutation, useQueryClient} from './useQueryWithFallback'
 
 import {STALE} from '#/state/queries'
 import {useAgent} from '#/state/session'
@@ -19,10 +19,12 @@ export function useFetchHandle() {
   return React.useCallback(
     async (handleOrDid: string) => {
       if (handleOrDid.startsWith('did:')) {
-        const res = await queryClient.fetchQuery({
-          staleTime: STALE.MINUTES.FIVE,
+        const res = await fetchQueryWithFallback(queryClient, {
           queryKey: fetchHandleQueryKey(handleOrDid),
           queryFn: () => agent.getProfile({actor: handleOrDid}),
+          enableFallback: true,
+          fallbackType: 'profile',
+          fallbackIdentifier: handleOrDid,
         })
         return res.data.handle
       }
@@ -57,8 +59,7 @@ export function useFetchDid() {
 
   return React.useCallback(
     async (handleOrDid: string) => {
-      return queryClient.fetchQuery({
-        staleTime: STALE.INFINITY,
+      return fetchQueryWithFallback(queryClient, {
         queryKey: fetchDidQueryKey(handleOrDid),
         queryFn: async () => {
           let identifier = handleOrDid
@@ -68,6 +69,9 @@ export function useFetchDid() {
           }
           return identifier
         },
+        enableFallback: true,
+        fallbackType: 'profile',
+        fallbackIdentifier: handleOrDid,
       })
     },
     [queryClient, agent],

src/state/queries/post-feed.ts

@@ -15,7 +15,7 @@ import {
   type QueryClient,
   type QueryKey,
   useInfiniteQuery,
-} from '@tanstack/react-query'
+} from './useQueryWithFallback'
 
 import {AuthorFeedAPI} from '#/lib/api/feed/author'
 import {CustomFeedAPI} from '#/lib/api/feed/custom'
@@ -381,6 +381,11 @@ export function usePostFeedQuery(
       },
       [selectArgs /* Don't change. Everything needs to go into selectArgs. */],
     ),
+    enableFallback: feedDesc.startsWith('author'),
+    fallbackType: 'feed',
+    fallbackIdentifier: feedDesc.startsWith('author|')
+      ? feedDesc.split('|')[1]
+      : undefined,
   })
 
   // The server may end up returning an empty page, a page with too few items,

src/state/queries/resolve-link.ts

@@ -1,4 +1,4 @@
-import {QueryClient, useQuery} from '@tanstack/react-query'
+import {fetchQueryWithFallback, type QueryClient, useQuery} from './useQueryWithFallback'
 
 import {STALE} from '#/state/queries/index'
 import {useAgent} from '../session'
@@ -29,12 +29,14 @@ export function fetchResolveLinkQuery(
   agent: BskyAgent,
   url: string,
 ) {
-  return queryClient.fetchQuery({
-    staleTime: STALE.HOURS.ONE,
+  return fetchQueryWithFallback(queryClient, {
     queryKey: RQKEY_LINK(url),
     queryFn: async () => {
       return await resolveLink(agent, url)
     },
+    enableFallback: true,
+    fallbackType: 'generic',
+    fallbackIdentifier: url,
   })
 }
 export function precacheResolveLinkQuery(
@@ -60,11 +62,13 @@ export function fetchResolveGifQuery(
   agent: BskyAgent,
   gif: Gif,
 ) {
-  return queryClient.fetchQuery({
-    staleTime: STALE.HOURS.ONE,
+  return fetchQueryWithFallback(queryClient, {
     queryKey: RQKEY_GIF(gif.url),
     queryFn: async () => {
       return await resolveGif(agent, gif)
     },
+    enableFallback: true,
+    fallbackType: 'generic',
+    fallbackIdentifier: gif.url,
   })
 }

src/state/queries/useQueryWithFallback.ts

@@ -359,10 +359,11 @@ async function attemptInfiniteFallback(
   }
 }
 
-// Re-export other hooks from TanStack Query for convenience
+// Re-export other hooks and utilities from TanStack Query for convenience
 export {
   useMutation,
   useQueryClient,
+  keepPreviousData,
   type UseMutationOptions,
   type UseMutationResult,
 } from '@tanstack/react-query'