🪢Added resolvers for lib, dashboard endpoints

examples/frontend/components/ComicDetailContainer.tsx

@@ -0,0 +1,139 @@
+/**
+ * ComicDetailContainer - GraphQL Version
+ * 
+ * This file should replace the existing ComicDetailContainer.tsx
+ * Location: src/client/components/ComicDetail/ComicDetailContainer.tsx
+ * 
+ * Key changes from REST version:
+ * 1. Uses executeGraphQLQuery instead of axios directly
+ * 2. Parses JSON strings from sourcedMetadata
+ * 3. Maps GraphQL 'id' to REST '_id' for backward compatibility
+ * 4. Better error and loading states
+ */
+
+import React, { ReactElement } from "react";
+import { useParams } from "react-router-dom";
+import { ComicDetail } from "../ComicDetail/ComicDetail";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { executeGraphQLQuery, transformComicToRestFormat } from "../../services/api/GraphQLApi";
+import { 
+  GET_COMIC_DETAIL_QUERY, 
+  ComicDetailQueryResponse 
+} from "../../graphql/queries/comicDetail";
+
+export const ComicDetailContainer = (): ReactElement | null => {
+  const { comicObjectId } = useParams<{ comicObjectId: string }>();
+  const queryClient = useQueryClient();
+  
+  const {
+    data: comicBookDetailData,
+    isLoading,
+    isError,
+    error,
+  } = useQuery({
+    queryKey: ["comicBookMetadata", comicObjectId],
+    queryFn: async () => {
+      // Execute GraphQL query
+      const result = await executeGraphQLQuery<ComicDetailQueryResponse>(
+        GET_COMIC_DETAIL_QUERY,
+        { id: comicObjectId }
+      );
+      
+      // Transform to REST format for backward compatibility
+      const transformedComic = transformComicToRestFormat(result.comic);
+      
+      // Return in the format expected by ComicDetail component
+      return {
+        data: transformedComic,
+      };
+    },
+    enabled: !!comicObjectId, // Only run query if we have an ID
+    staleTime: 5 * 60 * 1000, // Consider data fresh for 5 minutes
+    retry: 2, // Retry failed requests twice
+  });
+
+  if (isError) {
+    return (
+      <div className="mx-auto max-w-screen-xl px-4 py-4">
+        <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
+          <strong className="font-bold">Error loading comic: </strong>
+          <span className="block sm:inline">
+            {error instanceof Error ? error.message : 'Unknown error'}
+          </span>
+        </div>
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className="mx-auto max-w-screen-xl px-4 py-4">
+        <div className="flex items-center justify-center">
+          <div className="text-gray-500 dark:text-gray-400">
+            Loading comic details...
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    comicBookDetailData?.data && (
+      <ComicDetail
+        data={comicBookDetailData.data}
+        queryClient={queryClient}
+        comicObjectId={comicObjectId}
+      />
+    )
+  );
+};
+
+/**
+ * Alternative implementation with feature flag for gradual rollout
+ * Uncomment this version if you want to toggle between REST and GraphQL
+ */
+/*
+export const ComicDetailContainer = (): ReactElement | null => {
+  const { comicObjectId } = useParams<{ comicObjectId: string }>();
+  const queryClient = useQueryClient();
+  
+  // Feature flag to toggle between REST and GraphQL
+  const USE_GRAPHQL = import.meta.env.VITE_USE_GRAPHQL === 'true';
+  
+  const {
+    data: comicBookDetailData,
+    isLoading,
+    isError,
+    error,
+  } = useQuery({
+    queryKey: ["comicBookMetadata", comicObjectId],
+    queryFn: async () => {
+      if (USE_GRAPHQL) {
+        // GraphQL implementation
+        const result = await executeGraphQLQuery<ComicDetailQueryResponse>(
+          GET_COMIC_DETAIL_QUERY,
+          { id: comicObjectId }
+        );
+        
+        const transformedComic = transformComicToRestFormat(result.comic);
+        
+        return {
+          data: transformedComic,
+        };
+      } else {
+        // REST implementation (fallback)
+        const response = await axios({
+          url: `${LIBRARY_SERVICE_BASE_URI}/getComicBookById`,
+          method: "POST",
+          data: { id: comicObjectId },
+        });
+        
+        return response;
+      }
+    },
+    enabled: !!comicObjectId,
+  });
+
+  // ... rest of the component remains the same
+};
+*/