basic profile follow UI

packages/client/app/lib/follow.server.ts

···
+import { getServiceAgent, getSessionAgent } from '@www/lib/xrpcClient'
+import { env } from './env.server'
+import { ok } from '@atcute/client'
+import type { Did } from '@atcute/lexicons'
+import type { OAuthSession } from '@atproto/oauth-client-node'
+import * as TID from '@atcute/tid'
+
+const serviceDid = () =>
+  `did:web:${encodeURIComponent(new URL(env.API_URL).host)}` as const
+
+/**
+ * Get the bidirectional follow relationship between two users
+ */
+export async function getRelationship(
+  session: OAuthSession,
+  actorDid: Did,
+  viewerDid: Did
+) {
+  const serverClient = await getServiceAgent(session, serviceDid())
+  const result = await ok(
+    serverClient.get('app.wafrn.graph.getRelationship', {
+      params: {
+        actor: actorDid,
+        viewer: viewerDid
+      }
+    })
+  )
+  return result
+}
+
+/**
+ * Follow a user
+ * Creates follow record on user's PDS and caches it on the server
+ */
+export async function followUser(
+  session: OAuthSession,
+  followeeDid: Did
+): Promise<void> {
+  const repoClient = getSessionAgent(session)
+  const serverClient = await getServiceAgent(session, serviceDid())
+
+  // Create follow record on user's PDS
+  const record = {
+    $type: 'app.wafrn.graph.follow',
+    subject: followeeDid,
+    createdAt: new Date().toISOString()
+  }
+
+  const { uri } = await ok(
+    repoClient.post('com.atproto.repo.putRecord', {
+      input: {
+        collection: 'app.wafrn.graph.follow',
+        record,
+        repo: session.did,
+        rkey: TID.now()
+      }
+    })
+  )
+
+  // Cache follow on server
+  await ok(
+    serverClient.post('app.wafrn.graph.cacheFollow', {
+      input: {
+        follower: session.did,
+        followee: followeeDid,
+        uri,
+        createdAt: record.createdAt
+      }
+    })
+  )
+}
+
+/**
+ * Unfollow a user
+ * Deletes from server cache and removes the follow record from PDS
+ */
+export async function unfollowUser(
+  session: OAuthSession,
+  followeeDid: Did
+): Promise<void> {
+  const repoClient = getSessionAgent(session)
+  const serverClient = await getServiceAgent(session, serviceDid())
+
+  // Delete from server cache and get the follow record URI
+  const result = await ok(
+    serverClient.post('app.wafrn.graph.deleteFollow', {
+      input: {
+        follower: session.did,
+        followee: followeeDid
+      }
+    })
+  )
+
+  // Delete the follow record from PDS if we got a URI
+  if (result.uri) {
+    await ok(
+      repoClient.post('com.atproto.repo.deleteRecord', {
+        input: {
+          repo: session.did,
+          collection: 'app.wafrn.graph.follow',
+          rkey: result.uri.split('/').pop()! // Extract rkey from URI
+        }
+      })
+    )
+  }
+}

packages/client/app/routes/profile.$handle.tsx

···
 import { Form, useLoaderData, useNavigation } from 'react-router'
 import PostFeed from '@www/components/PostFeed'
 import asyncWrap from '@www/lib/asyncWrap'
-import { useRootData } from '@www/lib/useRootData'
 import { getOAuthSession } from '@www/lib/oauth.server'
 import { getSessionAgent, getServiceAgent } from '@www/lib/xrpcClient'
-import { followUser, unfollowUser, getRelationship } from '@www/lib/follow.server'
+import {
+  followUser,
+  unfollowUser,
+  getRelationship
+} from '@www/lib/follow.server'
 import { idResolver } from '@www/lib/idResolver.server'
 import { env } from '@www/lib/env.server'
 import { ok } from '@atcute/client'
···
 export async function loader({ request, params }: Route.LoaderArgs) {
   const session = await getOAuthSession(request)
   const sessionAgent = getSessionAgent(session)
-  const serviceDid = `did:web:${encodeURIComponent(new URL(env.API_URL).host)}` as const
+  const serviceDid =
+    `did:web:${encodeURIComponent(new URL(env.API_URL).host)}` as const
   const serverClient = await getServiceAgent(session, serviceDid)
 
   // Resolve handle to DID
-  const profileDid = await idResolver.handle.resolve(params.handle as Handle) as Did
+  const profileDid = (await idResolver.handle.resolve(
+    params.handle as Handle
+  )) as Did
 
   if (!profileDid) {
     throw new Response('Profile not found', { status: 404 })
   }
 
   // Fetch all data in parallel
-  const [feedResult, standardProfile, wafrnProfiles, relationship] = await Promise.all([
-    asyncWrap(() => getFeed(request, params.handle as Handle)),
-    asyncWrap(() =>
-      ok(
-        sessionAgent.get('app.bsky.actor.getProfile', {
-          params: { actor: profileDid }
-        })
-      )
-    ),
-    asyncWrap(() =>
-      ok(
-        serverClient.get('app.wafrn.actor.getProfiles', {
-          params: { actors: [profileDid], includeCounts: true }
-        })
-      )
-    ),
-    asyncWrap(() => getRelationship(session, profileDid, session.did))
-  ])
+  const [feedResult, profileResult, wafrnProfilesResult, relationshipResult] =
+    await Promise.all([
+      asyncWrap(() => getFeed(request, params.handle as Handle)),
+      asyncWrap(() =>
+        ok(
+          sessionAgent.get('app.bsky.actor.getProfile', {
+            params: { actor: profileDid }
+          })
+        )
+      ),
+      asyncWrap(() =>
+        ok(
+          serverClient.get('app.wafrn.actor.getProfiles', {
+            params: { actors: [profileDid], includeCounts: true }
+          })
+        )
+      ),
+      asyncWrap(() => getRelationship(session, profileDid, session.did))
+    ])
 
   const [feed, feedError] = feedResult
-  const [profile] = standardProfile
-  const [wafrnData] = wafrnProfiles
-  const [relationshipData] = relationship
+  const [profile, profileError] = profileResult
+  const [wafrnProfile, wafrnProfileError] = wafrnProfilesResult
+  const [relationship, relationshipError] = relationshipResult
+  const error =
+    feedError || profileError || wafrnProfileError || relationshipError
 
   return {
     handle: params.handle,
     feed: feed ?? [],
-    feedError,
+    error,
     profile: profile ?? null,
-    wafrnProfile: wafrnData?.profiles?.[0] ?? null,
-    relationship: relationshipData ?? { following: false, followedBy: false },
+    wafrnProfile: wafrnProfile?.profiles?.[0] ?? null,
+    relationship: relationship ?? { following: false, followedBy: false },
     profileDid,
     isMe: session.did === profileDid
   }
···
 export default function ProfilePage() {
   const {
     feed,
-    feedError,
+    error,
     handle,
     profile,
     wafrnProfile,
···
   const isSubmitting = navigation.state === 'submitting'
 
   // Check for auth errors
-  const isAuthError = feedError?.status === 401 || feedError?.status === 403
+  const isAuthError = error?.status === 401 || error?.status === 403
 
   if (isAuthError) {
     return (
···
       </div>
 
       {/* Posts Feed */}
-      {feedError && (
-        <p className="text-center py-4 text-error">{feedError.message}</p>
-      )}
+      {error && <p className="text-center py-4 text-error">{error.message}</p>}
       <PostFeed feed={feed} />
     </div>
   )