fix(OUT-4107): await SWR mutate refetches and enrich fetcher errors

src/app/configure-tasks-app/ui/Subtemplates.tsx

@@ -66,7 +66,7 @@
     }
 
     debounceMutate(cacheKey)
   }, [activeTemplate?.subTaskTemplates])
 
   const handleSubtemplateCreation = (payload: CreateTemplateRequest) => {
     const tempId = generateRandomString('temp-template')
@@ -90,7 +90,7 @@
     const optimisticData = sortTaskByDescendingOrder([...currentSubtemplates, tempSubtemplate])
 
     try {
-      mutate(
+      await mutate(
         cacheKey,
         async () => {
           const subTask = await createSubTemplate(token, template_id, payload)

src/app/detail/ui/ActivityWrapper.tsx

@@ -77,7 +77,7 @@
       }
       setLastUpdated(task?.lastActivityLogUpdated)
     }
   }, [task?.lastActivityLogUpdated])
 
   const currentUserId = tokenPayload.internalUserId ?? tokenPayload.clientId
 
@@ -102,7 +102,7 @@
     const optimisticData = getOptimisticData(postCommentPayload, activities.data, tempLog)
 
     try {
-      mutate(
+      await mutate(
         cacheKey,
         async () => {
           shouldRefetchRef.current = false

src/app/detail/ui/Subtasks.tsx

@@ -82,7 +82,7 @@
       debounceMutate(cacheKey)
     }
     setLastUpdated(activeTask?.lastSubtaskUpdated)
   }, [activeTask?.lastSubtaskUpdated])
 
   const handleSubTaskCreation = (payload: CreateTaskRequest) => {
     const tempId = generateRandomString('temp-task')
@@ -104,7 +104,7 @@
     )
     const optimisticData = subTasks?.tasks ? sortSubtasksByPriority([...subTasks.tasks, tempSubtask]) : [tempSubtask]
     try {
-      mutate(
+      await mutate(
         cacheKey,
         async () => {
           const subTask = await handleCreate(token, payload, { disableSubtaskTemplates: true })

src/utils/fetcher.test.ts

@@ -0,0 +1,35 @@
+import { fetcher } from '@/utils/fetcher'
+
+describe('fetcher', () => {
+  const originalFetch = global.fetch
+
+  afterEach(() => {
+    global.fetch = originalFetch
+    jest.restoreAllMocks()
+  })
+
+  it('returns parsed JSON for successful responses', async () => {
+    global.fetch = jest.fn().mockResolvedValue({
+      ok: true,
+      json: async () => ({ tasks: [] }),
+    })
+
+    await expect(fetcher('/api/tasks/?token=test')).resolves.toEqual({ tasks: [] })
+  })
+
+  it('throws an error with status, url, and response body for failed responses', async () => {
+    global.fetch = jest.fn().mockResolvedValue({
+      ok: false,
+      status: 500,
+      text: async () => 'Internal server error',
+    })
+
+    await expect(fetcher('/api/tasks/?token=test')).rejects.toThrow(
+      'An error occurred while fetching the data. [500] /api/tasks/?token=test: Internal server error',
+    )
+  })
+
+  it('returns undefined when url is null', async () => {
+    await expect(fetcher(null)).resolves.toBeUndefined()
+  })
+})

src/utils/fetcher.ts

@@ -4,8 +4,9 @@ export const fetcher = async (url: string | null) => {
   const res = await fetch(url)
 
   if (!res.ok) {
-    const error = new Error('An error occurred while fetching the data.')
-    throw error
+    const responseText = await res.text().catch(() => '')
+    const detail = responseText ? `: ${responseText.slice(0, 200)}` : ''
+    throw new Error(`An error occurred while fetching the data. [${res.status}] ${url}${detail}`)
   }
 
   return res.json()