Henter detaljevisningen til én oppskrift fra GraphQL (#70)

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}

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
+            }
+        }
+    }
 `

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>
   }