diff --git a/frontend/src/components/molecules/tasklist/TaskList.tsx b/frontend/src/components/molecules/tasklist/TaskList.tsx
index 1567045e28..bdc4fb2280 100644
--- a/frontend/src/components/molecules/tasklist/TaskList.tsx
+++ b/frontend/src/components/molecules/tasklist/TaskList.tsx
@@ -1,14 +1,17 @@
 import { useMemo } from 'react';
+import useSWR from 'swr';
 import { grey } from 'theme';
 
 import { Box, Chip, List, Theme, useTheme } from '@mui/material';
 
-import { useApi, useChatData } from '@chainlit/react-client';
+import { useChatData } from '@chainlit/react-client';
 
 import { Translator } from 'components/i18n';
 
 import { ITaskList, Task } from './Task';
 
+const fetcher = (url: string) => fetch(url).then((r) => r.json());
+
 const Header = ({ status }: { status: string }) => {
   const theme = useTheme();
   return (
@@ -70,7 +73,7 @@ const TaskList = ({ isMobile }: { isMobile: boolean }) => {
     return parsedUrl.pathname + parsedUrl.search;
   }, [tasklist?.url]);
 
-  const { isLoading, error, data } = useApi<ITaskList>(url ? url : null, {
+  const { error, data, isLoading } = useSWR(url, fetcher, {
     keepPreviousData: true
   });
 
@@ -90,7 +93,7 @@ const TaskList = ({ isMobile }: { isMobile: boolean }) => {
     );
   }
 
-  const content = data as ITaskList;
+  const content = data as unknown as ITaskList;
 
   if (!content) {
     return null;