Refactor questionnaire response and migrated to TanStack's query (#9995)

public/locale/en.json

@@ -976,6 +976,7 @@
   "error_fetching_slots_data": "Error while fetching slots data",
   "error_fetching_user_data": "Error while fetching user data",
   "error_fetching_user_details": "Error while fetching user details: ",
+  "error_loading_questionnaire_response": "Error loading questionnaire response",
   "error_sending_otp": "Error while sending OTP, Please try again later",
   "error_updating_encounter": "Error to Updating Encounter",
   "error_verifying_otp": "Error while verifying OTP, Please request a new OTP",

src/components/Facility/ConsultationDetails/QuestionnaireResponseView.tsx

@@ -1,3 +1,4 @@
+import { useQuery } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
@@ -9,28 +10,27 @@ import { Skeleton } from "@/components/ui/skeleton";
 import Page from "@/components/Common/Page";
 
 import routes from "@/Utils/request/api";
-import useQuery from "@/Utils/request/useQuery";
+import query from "@/Utils/request/query";
 import { formatDateTime } from "@/Utils/utils";
 import { QuestionnaireResponse as Response } from "@/types/questionnaire/form";
 import { Question } from "@/types/questionnaire/question";
 
 export default function QuestionnaireResponseView({
   responseId,
-
   patientId,
 }: {
   responseId: string;
   patientId: string;
 }) {
   const { t } = useTranslation();
-  const { data: formResponse, loading } = useQuery(
-    routes.getQuestionnaireResponse,
-    {
+  const { data: formResponse, isLoading } = useQuery({
+    queryKey: ["getQuestionnaireResponse", patientId, responseId],
+    queryFn: query(routes.getQuestionnaireResponse, {
       pathParams: { patientId, responseId },
-    },
-  );
+    }),
+  });
 
-  if (loading) {
+  if (isLoading) {
     return (
       <div className="flex h-full items-center justify-center">
         <Skeleton className="h-8 w-64" />

src/components/Questionnaire/QuestionnaireEditor.tsx

@@ -1,5 +1,5 @@
 import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import { useNavigate } from "raviger";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
@@ -29,7 +29,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
 
 import mutate from "@/Utils/request/mutate";
-import useQuery from "@/Utils/request/useQuery";
+import query from "@/Utils/request/query";
 import {
   AnswerOption,
   EnableWhen,
@@ -60,10 +60,13 @@ export default function QuestionnaireEditor({ id }: QuestionnaireEditorProps) {
 
   const {
     data: initialQuestionnaire,
-    loading,
+    isLoading,
     error,
-  } = useQuery(questionnaireApi.detail, {
-    pathParams: { id },
+  } = useQuery({
+    queryKey: ["questionnaireDetail", id],
+    queryFn: query(questionnaireApi.detail, {
+      pathParams: { id },
+    }),
   });
 
   const { mutate: updateQuestionnaire, isPending } = useMutation({
@@ -87,7 +90,7 @@ export default function QuestionnaireEditor({ id }: QuestionnaireEditorProps) {
     }
   }, [initialQuestionnaire]);
 
-  if (loading) return <Loading />;
+  if (isLoading) return <Loading />;
   if (error) {
     return (
       <Alert variant="destructive">

src/components/Questionnaire/QuestionnaireForm.tsx

@@ -1,4 +1,4 @@
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import { t } from "i18next";
 import { useNavigationPrompt } from "raviger";
 import { useEffect, useState } from "react";
@@ -16,7 +16,7 @@ import Loading from "@/components/Common/Loading";
 import { PLUGIN_Component } from "@/PluginEngine";
 import routes from "@/Utils/request/api";
 import mutate from "@/Utils/request/mutate";
-import useQuery from "@/Utils/request/useQuery";
+import query from "@/Utils/request/query";
 import {
   DetailedValidationError,
   QuestionValidationError,
@@ -74,11 +74,14 @@ export function QuestionnaireForm({
 
   const {
     data: questionnaireData,
-    loading: isQuestionnaireLoading,
+    isLoading: isQuestionnaireLoading,
     error: questionnaireError,
-  } = useQuery(questionnaireApi.detail, {
-    pathParams: { id: questionnaireSlug ?? "" },
-    prefetch: !!questionnaireSlug && !FIXED_QUESTIONNAIRES[questionnaireSlug],
+  } = useQuery({
+    queryKey: ["questionnaireDetail", questionnaireSlug],
+    queryFn: query(questionnaireApi.detail, {
+      pathParams: { id: questionnaireSlug ?? "" },
+    }),
+    enabled: !!questionnaireSlug && !FIXED_QUESTIONNAIRES[questionnaireSlug],
   });
 
   const { mutate: submitBatch, isPending } = useMutation({

src/components/Questionnaire/index.tsx

@@ -1,19 +1,23 @@
+import { useQuery } from "@tanstack/react-query";
 import { useNavigate } from "raviger";
 
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 
-import useQuery from "@/Utils/request/useQuery";
+import query from "@/Utils/request/query";
 import { QuestionnaireDetail } from "@/types/questionnaire/questionnaire";
 import questionnaireApi from "@/types/questionnaire/questionnaireApi";
 
 import Loading from "../Common/Loading";
 
 export function QuestionnaireList() {
   const navigate = useNavigate();
-  const { data: response, loading } = useQuery(questionnaireApi.list);
+  const { data: response, isLoading } = useQuery({
+    queryKey: ["questionnaires"],
+    queryFn: query(questionnaireApi.list),
+  });
 
-  if (loading) {
+  if (isLoading) {
     return <Loading />;
   }
 

src/hooks/useQuestionnaireOptions.ts

@@ -17,7 +17,7 @@ const DEFAULT_OPTIONS: EditQuestionnaireOption[] = [
 
 export default function useQuestionnaireOptions(slug: string) {
   const { data } = useQuery({
-    queryKey: ["questionnaire", slug] as const,
+    queryKey: ["questionnaires", slug] as const,
     queryFn: query(questionnaireApi.list, {
       queryParams: {
         tag_slug: slug,