Add tRPC error handling and updateSpeaker functionality with image reference support (#351)

Author: Starefossen

__tests__/api/trpc/error-handler.test.ts

@@ -0,0 +1,26 @@
+vi.mock('@/lib/auth', () => ({
+  getAuthSession: vi.fn().mockResolvedValue(null),
+}))
+
+import { isClientError } from '@/server/trpc'
+
+describe('tRPC error handler', () => {
+  describe('isClientError', () => {
+    it.each([
+      'NOT_FOUND',
+      'BAD_REQUEST',
+      'UNAUTHORIZED',
+      'FORBIDDEN',
+      'PARSE_ERROR',
+    ])('should classify %s as a client error', (code) => {
+      expect(isClientError(code)).toBe(true)
+    })
+
+    it.each(['INTERNAL_SERVER_ERROR', 'TIMEOUT', 'TOO_MANY_REQUESTS'])(
+      'should not classify %s as a client error',
+      (code) => {
+        expect(isClientError(code)).toBe(false)
+      },
+    )
+  })
+})

__tests__/lib/speaker/sanity.test.ts

@@ -0,0 +1,104 @@
+const { mockCommit, mockSet, mockPatch, mockFetch } = vi.hoisted(() => {
+  const mockCommit = vi.fn().mockResolvedValue({})
+  const mockSet = vi.fn()
+  mockSet.mockReturnValue({ commit: mockCommit })
+  const mockPatch = vi.fn().mockReturnValue({ set: mockSet })
+  const mockFetch = vi.fn()
+  return { mockCommit, mockSet, mockPatch, mockFetch }
+})
+
+vi.mock('@/lib/sanity/client', () => ({
+  clientReadUncached: {
+    fetch: mockFetch,
+  },
+  clientWrite: {
+    patch: mockPatch,
+  },
+}))
+
+import { updateSpeaker } from '@/lib/speaker/sanity'
+import type { Speaker } from '@/lib/speaker/types'
+
+const baseSpeaker: Speaker = {
+  _id: 'speaker-1',
+  _rev: 'rev-1',
+  _createdAt: '2025-01-01T00:00:00Z',
+  _updatedAt: '2025-01-01T00:00:00Z',
+  name: 'Test Speaker',
+  title: 'Engineer',
+  email: 'test@example.com',
+  slug: 'test-speaker',
+  flags: [],
+}
+
+describe('updateSpeaker', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockFetch.mockResolvedValue(baseSpeaker)
+  })
+
+  it('should update speaker without image', async () => {
+    const { speaker, err } = await updateSpeaker('speaker-1', {
+      name: 'Updated Name',
+      bio: 'New bio',
+    })
+
+    expect(err).toBeNull()
+    expect(speaker).toEqual(baseSpeaker)
+    expect(mockPatch).toHaveBeenCalledWith('speaker-1')
+    expect(mockSet).toHaveBeenCalledWith({
+      name: 'Updated Name',
+      bio: 'New bio',
+    })
+    expect(mockCommit).toHaveBeenCalled()
+  })
+
+  it('should convert image string to Sanity image reference', async () => {
+    const { speaker, err } = await updateSpeaker('speaker-1', {
+      name: 'Updated Name',
+      image: 'image-abc123-500x500-png',
+    })
+
+    expect(err).toBeNull()
+    expect(speaker).toEqual(baseSpeaker)
+
+    // Single .set() call should include both fields and the image reference
+    expect(mockSet).toHaveBeenCalledTimes(1)
+    expect(mockSet).toHaveBeenCalledWith({
+      name: 'Updated Name',
+      image: {
+        _type: 'image',
+        asset: {
+          _type: 'reference',
+          _ref: 'image-abc123-500x500-png',
+        },
+      },
+    })
+  })
+
+  it('should not set image reference when image is undefined', async () => {
+    await updateSpeaker('speaker-1', { name: 'No Image' })
+
+    // set should be called once (without image), not twice
+    expect(mockSet).toHaveBeenCalledTimes(1)
+    expect(mockSet).toHaveBeenCalledWith({ name: 'No Image' })
+  })
+
+  it('should return error when patch fails', async () => {
+    mockCommit.mockRejectedValueOnce(new Error('Sanity error'))
+
+    const { err } = await updateSpeaker('speaker-1', { name: 'Fail' })
+
+    expect(err).toBeInstanceOf(Error)
+    expect(err!.message).toBe('Sanity error')
+  })
+
+  it('should return error when getSpeaker fails after patch', async () => {
+    mockFetch.mockRejectedValueOnce(new Error('Fetch failed'))
+
+    const { err } = await updateSpeaker('speaker-1', { name: 'Fail' })
+
+    expect(err).toBeInstanceOf(Error)
+    expect(err!.message).toBe('Fetch failed')
+  })
+})

src/app/api/trpc/[trpc]/route.ts

@@ -1,6 +1,6 @@
 import { fetchRequestHandler } from '@trpc/server/adapters/fetch'
 import { appRouter } from '@/server/_app'
-import { createTRPCContext } from '@/server/trpc'
+import { createTRPCContext, isClientError } from '@/server/trpc'
 import { NextRequest } from 'next/server'
 
 const handler = (req: NextRequest) =>
@@ -9,12 +9,10 @@ const handler = (req: NextRequest) =>
     req,
     router: appRouter,
     createContext: () => createTRPCContext({ req }),
-    onError:
-      process.env.NODE_ENV === 'development'
-        ? ({ path, error }) => {
-            console.error(`❌ tRPC failed on ${path ?? '<no-path>'}:`, error)
-          }
-        : undefined,
+    onError: ({ path, error }) => {
+      if (isClientError(error.code)) return
+      console.error(`tRPC failed on ${path ?? '<no-path>'}:`, error)
+    },
   })
 
 export { handler as GET, handler as POST }

src/lib/speaker/sanity.ts

@@ -255,19 +255,28 @@ export async function getPublicSpeaker(
 }
 
 export async function updateSpeaker(
-  spekaerId: string,
+  speakerId: string,
   speaker: Partial<SpeakerInput>,
 ): Promise<{ speaker: Speaker; err: Error | null }> {
   let err = null
   let updatedSpeaker: Speaker = {} as Speaker
 
   try {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- image is excluded from patch
-    const { image: _image, ...speakerWithoutImage } = speaker
-    await clientWrite.patch(spekaerId).set(speakerWithoutImage).commit()
+    const { image, ...speakerWithoutImage } = speaker
+
+    const patchData: Record<string, unknown> = { ...speakerWithoutImage }
+
+    if (typeof image === 'string' && image) {
+      patchData.image = {
+        _type: 'image',
+        asset: { _type: 'reference', _ref: image },
+      }
+    }
+
+    await clientWrite.patch(speakerId).set(patchData).commit()
 
     const { speaker: fetchedSpeaker, err: fetchErr } =
-      await getSpeaker(spekaerId)
+      await getSpeaker(speakerId)
     if (fetchErr) {
       throw fetchErr
     }

src/server/trpc.ts

@@ -65,3 +65,15 @@ export const publicProcedure = t.procedure
 export const protectedProcedure = t.procedure.use(requireAuth)
 export const adminProcedure = t.procedure.use(requireAuth).use(requireAdmin)
 export const router = t.router
+
+const CLIENT_ERROR_CODES = new Set([
+  'NOT_FOUND',
+  'BAD_REQUEST',
+  'UNAUTHORIZED',
+  'FORBIDDEN',
+  'PARSE_ERROR',
+])
+
+export function isClientError(code: string): boolean {
+  return CLIENT_ERROR_CODES.has(code)
+}