Use queryClient

src/state/queries/handle.ts

@@ -1,34 +1,27 @@
 import React from 'react'
-import {useMutation} from '@tanstack/react-query'
+import {useQueryClient} from '@tanstack/react-query'
 
 import {useSession} from '#/state/session'
 
-export function useGetHandle() {
+const fetchHandleQueryKey = (handleOrDid: string) => ['handle', handleOrDid]
+
+export function useFetchHandle() {
   const {agent} = useSession()
+  const queryClient = useQueryClient()
 
   return React.useCallback(
     async (handleOrDid: string) => {
       if (handleOrDid.startsWith('did:')) {
-        const res = await agent.getProfile({actor: handleOrDid})
+        const res = await queryClient.fetchQuery({
+          // cache in memory forever, page reload clears
+          staleTime: Infinity,
+          queryKey: fetchHandleQueryKey(handleOrDid),
+          queryFn: () => agent.getProfile({actor: handleOrDid}),
+        })
         return res.data.handle
       }
       return handleOrDid
     },
-    [agent],
+    [agent, queryClient],
   )
 }
-
-export function useGetHandleMutation() {
-  const {agent} = useSession()
-
-  return useMutation({
-    mutationFn: async (handleOrDid: string) => {
-      if (handleOrDid.startsWith('did:')) {
-        // TODO would be nice to do this without all the other fetched data
-        const res = await agent.getProfile({actor: handleOrDid})
-        return res.data.handle
-      }
-      return handleOrDid
-    },
-  })
-}

src/view/shell/desktop/LeftNav.tsx

@@ -45,7 +45,7 @@ import {useProfileQuery} from '#/state/queries/profile'
 import {useSession} from '#/state/session'
 import {useUnreadNotifications} from '#/state/queries/notifications/unread'
 import {useComposerControls} from '#/state/shell/composer'
-import {useGetHandleMutation} from '#/state/queries/handle'
+import {useFetchHandle} from '#/state/queries/handle'
 
 const ProfileCard = observer(function ProfileCardImpl() {
   const {currentAccount} = useSession()
@@ -201,8 +201,8 @@ function ComposeBtn() {
   const {openComposer} = useComposerControls()
   const {_} = useLingui()
   const {isTablet} = useWebMediaQueries()
-  const {mutateAsync: getHandle, isPending: isGetHandlePending} =
+  const [isFetchingHandle, setIsFetchingHandle] = React.useState(false)
-    useGetHandleMutation()
+  const fetchHandle = useFetchHandle()
 
   const getProfileHandle = async () => {
     const {routes} = getState()
@@ -215,9 +215,12 @@ function ComposeBtn() {
 
       if (handle.startsWith('did:')) {
         try {
-          handle = await getHandle(handle)
+          setIsFetchingHandle(true)
+          handle = await fetchHandle(handle)
         } catch (e) {
           handle = undefined
+        } finally {
+          setIsFetchingHandle(false)
         }
       }
 
@@ -242,7 +245,7 @@ function ComposeBtn() {
   }
   return (
     <TouchableOpacity
-      disabled={isGetHandlePending}
+      disabled={isFetchingHandle}
       style={[styles.newPostBtn]}
       onPress={onPressCompose}
       accessibilityRole="button"