load usecase details without auth and add debug statements

Author: Deepthi-Chand

app/[locale]/(user)/usecases/[useCaseSlug]/UsecaseDetailsClient.tsx

@@ -7,8 +7,9 @@ import { graphql } from '@/gql';
 import { TypeDataset, TypeUseCase } from '@/gql/generated/graphql';
 import { useQuery } from '@tanstack/react-query';
 import { Card, Text } from 'opub-ui';
+import { useSession } from 'next-auth/react';
 
-import { GraphQLClient } from '@/lib/api';
+import { GraphQLPublic } from '@/lib/api';
 import { formatDate, generateJsonLd } from '@/lib/utils';
 import BreadCrumbs from '@/components/BreadCrumbs';
 import { Icons } from '@/components/icons';
@@ -141,30 +142,50 @@ const UseCasedetails: any = graphql(`
 
 const UseCaseDetailClient = () => {
   const params = useParams();
+  const { data: session, status: sessionStatus } = useSession();
+  
+  // Debug logging
+  console.log('Debug Info:', {
+    useCaseSlug: params.useCaseSlug,
+    sessionStatus,
+    hasSession: !!session,
+    accessToken: session?.access_token ? 'Present' : 'Missing',
+    backendUrl: process.env.NEXT_PUBLIC_BACKEND_GRAPHQL_URL,
+  });
+
   const {
     data: UseCaseDetails,
     isLoading,
     error,
   } = useQuery<{ useCase: TypeUseCase }>(
     [`fetch_UsecaseDetails_${params.useCaseSlug}`],
-    () =>
-      GraphQLClient(
-        UseCasedetails,
-        {},
-        {
-          pk: params.useCaseSlug,
-        }
-      ),
+    async () => {
+      console.log('Making public GraphQL request for usecase:', params.useCaseSlug);
+      try {
+        const result = await GraphQLPublic(
+          UseCasedetails,
+          {},
+          {
+            pk: params.useCaseSlug,
+          }
+        ) as { useCase: TypeUseCase };
+        console.log('Public GraphQL request successful:', result);
+        return result;
+      } catch (err) {
+        console.error('Public GraphQL request failed:', err);
+        throw err;
+      }
+    },
     {
       refetchOnMount: true,
       refetchOnReconnect: true,
       retry: (failureCount, error: any) => {
-        // Don't retry on 401/403 errors
-        if (error?.message?.includes('401') || error?.message?.includes('403')) {
-          return false;
-        }
+        console.log('Retry attempt:', failureCount, 'Error:', error);
         return failureCount < 3;
       },
+      onError: (error: any) => {
+        console.error('Query error:', error);
+      },
     }
   );
   const datasets = UseCaseDetails?.useCase?.datasets || []; // Fallback to an empty array

app/[locale]/(user)/usecases/[useCaseSlug]/page.tsx

@@ -1,7 +1,7 @@
 import { Metadata } from 'next';
 import { graphql } from '@/gql';
 
-import { GraphQL } from '@/lib/api';
+import { GraphQLPublic } from '@/lib/api';
 import { generatePageMetadata } from '@/lib/utils';
 import UseCaseDetailClient from './UsecaseDetailsClient';
 
@@ -28,28 +28,45 @@ export async function generateMetadata({
 }: {
   params: { useCaseSlug: string };
 }): Promise<Metadata> {
-  const data = await GraphQL(UseCaseInfoQuery, {}, { pk: params.useCaseSlug });
+  try {
+    const data = await GraphQLPublic(UseCaseInfoQuery, {}, { pk: params.useCaseSlug });
+    const UseCase = data?.useCase;
 
-  const UseCase = data?.useCase;
-
-  return generatePageMetadata({
-    title: `${UseCase?.title} | Sector Data | CivicDataSpace`,
-    description:
-      UseCase?.summary ||
-      `Explore open data and curated datasets in the ${UseCase?.title} sector.`,
-    keywords: UseCase?.tags?.map((tag: any) => tag.value) || [],
-    openGraph: {
-      type: 'article',
-      locale: 'en_US',
-      url: `${process.env.NEXT_PUBLIC_PLATFORM_URL}/usecases/${params.useCaseSlug}`,
+    return generatePageMetadata({
       title: `${UseCase?.title} | Sector Data | CivicDataSpace`,
       description:
         UseCase?.summary ||
         `Explore open data and curated datasets in the ${UseCase?.title} sector.`,
-      siteName: 'CivicDataSpace',
-      image: `${process.env.NEXT_PUBLIC_PLATFORM_URL}/og.png`,
-    },
-  });
+      keywords: UseCase?.tags?.map((tag: any) => tag.value) || [],
+      openGraph: {
+        type: 'article',
+        locale: 'en_US',
+        url: `${process.env.NEXT_PUBLIC_PLATFORM_URL}/usecases/${params.useCaseSlug}`,
+        title: `${UseCase?.title} | Sector Data | CivicDataSpace`,
+        description:
+          UseCase?.summary ||
+          `Explore open data and curated datasets in the ${UseCase?.title} sector.`,
+        siteName: 'CivicDataSpace',
+        image: `${process.env.NEXT_PUBLIC_PLATFORM_URL}/og.png`,
+      },
+    });
+  } catch (error) {
+    // Fallback to generic metadata if the API call fails
+    return generatePageMetadata({
+      title: `Use Case Details | CivicDataSpace`,
+      description: `Explore open data and curated datasets in this use case.`,
+      keywords: ['usecase', 'data', 'civic', 'open data'],
+      openGraph: {
+        type: 'article',
+        locale: 'en_US',
+        url: `${process.env.NEXT_PUBLIC_PLATFORM_URL}/usecases/${params.useCaseSlug}`,
+        title: `Use Case Details | CivicDataSpace`,
+        description: `Explore open data and curated datasets in this use case.`,
+        siteName: 'CivicDataSpace',
+        image: `${process.env.NEXT_PUBLIC_PLATFORM_URL}/og.png`,
+      },
+    });
+  }
 }
 
 export default function Page() {

lib/api.ts

@@ -62,6 +62,23 @@ export async function GraphQLClient<TResult, TVariables>(
   return data;
 }
 
+// Public GraphQL function that doesn't require authentication
+export async function GraphQLPublic<TResult, TVariables>(
+  document: TypedDocumentNode<TResult, TVariables>,
+  entityHeaders: Record<string, string> = {},
+  ...[variables]: TVariables extends Record<string, never> ? [] : [TVariables]
+) {
+  const data = await request(
+    `${process.env.NEXT_PUBLIC_BACKEND_GRAPHQL_URL}`,
+    document,
+    {
+      ...variables,
+    },
+    entityHeaders
+  );
+  return data;
+}
+
 // wrapper function for react-query to be used by server components
 export const getQueryClient = React.cache(
   () =>