From 55f95630873568195cb23d89b594b0a728f78141 Mon Sep 17 00:00:00 2001
From: Amalie <amalisso@stud.ntnu.no>
Date: Wed, 14 Oct 2026 16:53:15 +0200
Subject: [PATCH] =?UTF-8?q?Henter=20detaljevisningen=20til=20=C3=A9n=20opp?=
 =?UTF-8?q?skrift=20fra=20GraphQL=20(#70)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/recipe/RecipeDetail.tsx |  2 +-
 client/src/graphql/recipes.ts                 | 30 +++++++++++++++++++
 client/src/routes/RecipeDetailPage.tsx        | 18 +++++++++--
 3 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/client/src/components/recipe/RecipeDetail.tsx b/client/src/components/recipe/RecipeDetail.tsx
index 572e1a9..6e310ff 100644
--- a/client/src/components/recipe/RecipeDetail.tsx
+++ b/client/src/components/recipe/RecipeDetail.tsx
@@ -22,7 +22,7 @@ export function RecipeDetail({ recipe }: RecipeDetailProps) {
                             </li>
                         ))}
                     </ul>
-                    {recipe.averageRating !== null ?(
+                    {recipe.averageRating != null ?(
                         <div className="flex items-center gap-1">
                             <Rating
                                 value={recipe.averageRating}
diff --git a/client/src/graphql/recipes.ts b/client/src/graphql/recipes.ts
index fba0b40..9394999 100644
--- a/client/src/graphql/recipes.ts
+++ b/client/src/graphql/recipes.ts
@@ -4,6 +4,9 @@ import type { Recipe } from '../types/recipe';
 type GetRecipesData = { recipes: Recipe[] };
 type GetRecipesVariables = { page?: number ; pageSize?: number };
 
+type GetRecipeData = { recipe: Recipe | null };
+type GetRecipeVariables = { id: string };
+
 export const GET_RECIPES: TypedDocumentNode<GetRecipesData, GetRecipesVariables> = gql`
     query GetRecipes($page: Int, $pageSize: Int) {
         recipes(page: $page, pageSize: $pageSize) {
@@ -14,4 +17,31 @@ export const GET_RECIPES: TypedDocumentNode<GetRecipesData, GetRecipesVariables>
             servings
         }
     }
+`
+export const GET_RECIPE: TypedDocumentNode<GetRecipeData, GetRecipeVariables> = gql`
+    query GetRecipe($id: ID!) {
+        recipe(id: $id) {
+            id
+            title
+            description
+            prepTimeMinutes
+            servings
+            imageUrl
+            tags {
+                id 
+                name
+            }
+            ingredients {
+                id
+                amount
+                unit
+                name
+            }
+            steps{
+                id
+                order
+                instruction
+            }
+        }
+    }
 `
\ No newline at end of file
diff --git a/client/src/routes/RecipeDetailPage.tsx b/client/src/routes/RecipeDetailPage.tsx
index 2a0060d..e676eaf 100644
--- a/client/src/routes/RecipeDetailPage.tsx
+++ b/client/src/routes/RecipeDetailPage.tsx
@@ -1,11 +1,25 @@
 import { useParams } from 'react-router';
-import { recipes } from '../mocks/recipes';
 import { RecipeDetail } from '../components/recipe/RecipeDetail';
+import { useQuery } from '@apollo/client/react';
+import { GET_RECIPE } from '../graphql/recipes';
 
 // Placeholder for en oppskrift. Henter id fra URL-en. som /recipes/5 gir id = 5
 export default function RecipeDetailPage() {
   const { id } = useParams();
-  const recipe = recipes.find((r) => r.id === id);
+  const { data, loading, error } = useQuery(GET_RECIPE, {
+    variables: { id: id ?? '' },
+    skip: !id,
+  });
+
+  if(loading) {
+    return <p role="status">Laster oppskriften...</p>
+  }
+
+  if (error) {
+    return <p role="alert">Kunne ikke hente oppskriften. Prøv igjen senere.</p>
+  }
+
+  const recipe = data?.recipe;
   if (!recipe) {
     return <p>Fant ikke oppskriften.</p>
   }