feat(add cache query): integrate request with reactQuery cache

Author: mehdi-parvizi

web/src/components/internal-ui/ChatBox.tsx

@@ -11,17 +11,20 @@ interface Props {
   messageData: Message[];
   endpoint: ENDPOINTS;
   request: any;
+  id: string;
 }
 
 interface BasicGenApiResponse {
   output: string;
 }
 
-const ChatBox = ({ messageData, endpoint, request }: Props) => {
+const ChatBox = ({ messageData, endpoint, request, id }: Props) => {
   const addMessage = useGptStore((s) => s.addMessage);
+
   const { data, error, isLoading } = usePost<BasicGenApiResponse>(
     endpoint,
-    request
+    request,
+    id
   );
 
   useEffect(() => {

web/src/features/basicGen/BasicGen.tsx

@@ -35,6 +35,7 @@ const BasicGen = () => {
       max_token: data.maxToken,
       service: data.service,
       input: data.input,
+      requestId: uuid(),
     };
     if (data.input) setReq(request);
   };
@@ -57,6 +58,7 @@ const BasicGen = () => {
               endpoint={ENDPOINTS.postBasic}
               request={req}
               messageData={messages}
+              id={req?.requestId ?? ""}
             />
             <HStack
               mt="3"

web/src/features/model.ts

@@ -18,4 +18,5 @@ export interface ApiRequestBasicGen {
   max_token: number;
   service: string;
   input: string;
+  requestId: string;
 }

web/src/hooks/usePost.ts

@@ -3,9 +3,9 @@ import apiClient from "../utils/apiClient";
 import { useQuery } from "@tanstack/react-query";
 import { ENDPOINTS } from "../features/constants";
 
-const usePost = <T>(endpoint: ENDPOINTS, data: T) =>
+const usePost = <T>(endpoint: ENDPOINTS, data: T, id: string) =>
   useQuery({
-    queryKey: [endpoint],
+    queryKey: [endpoint, id],
     queryFn: () =>
       data
         ? apiClient.post<T>(endpoint, data)