Nå henter slideshowet oppskrifter fra GraphQL (#89)

client/src/graphql/recipes.ts

@@ -1,20 +1,21 @@
 import { gql, type TypedDocumentNode } from '@apollo/client';
 import type { Recipe } from '../types/recipe';
 
+// Graph-QL querys for å hente oppskrifter fra backend istedenfor mocks. 
+// Query-ene henter kun den informasjonen som en komponent trenger, sånn at det sendes minst mulig data.
+
+// Typer for svaret og variablene, sånn at typescript vet hvordan dataene ser ut. 
 type GetRecipesData = { recipes: Recipe[] };
 type GetRecipesVariables = {
   search?: string;
   page?: number;
   pageSize?: number;
 };
-
 type GetRecipeData = { recipe: Recipe | null };
 type GetRecipeVariables = { id: string };
 
-export const GET_RECIPES: TypedDocumentNode<
-  GetRecipesData,
-  GetRecipesVariables
-> = gql`
+// Henter oppskrifter til oppskriftslista. Bruker page og pageSize til paginering. 
+export const GET_RECIPES: TypedDocumentNode<GetRecipesData,GetRecipesVariables> = gql`
   query GetRecipes($search: String, $page: Int, $pageSize: Int) {
     recipes(search: $search, page: $page, pageSize: $pageSize) {
       id
@@ -25,6 +26,9 @@ export const GET_RECIPES: TypedDocumentNode<
     }
   }
 `;
+
+// Henter én oppskrift til detaljevisningen av en oppskrift, med ingredoenser, steps og tags.
+// recipe kan være null dersom det ikke finnes noen oppskrift med den id-en.
 export const GET_RECIPE: TypedDocumentNode<GetRecipeData, GetRecipeVariables> =
   gql`
     query GetRecipe($id: ID!) {
@@ -52,4 +56,22 @@ export const GET_RECIPE: TypedDocumentNode<GetRecipeData, GetRecipeVariables> =
         }
       }
     }
-  `;
+`;
+
+// Henter oppskrifter til slideshowet på forsiden. Trenger bare beskrivelse og tags i tillegg til feltene i GET_RECIPES.
+export const GET_FEATURED_RECIPES: TypedDocumentNode<GetRecipesData, GetRecipesVariables> = gql `
+    query GetFeaturedRecipes($page: Int, $pageSize: Int) {
+        recipes(page: $page, pageSize: $pageSize) {
+            id 
+            title
+            description
+            prepTimeMinutes
+            servings
+            imageUrl
+            tags {
+                id
+                name
+            }
+        }
+    }
+`;

client/src/routes/HomePage.tsx

@@ -1,22 +1,29 @@
 import { useState } from 'react'
 import { Tag } from '../components/ui/Tag'
 import { RecipeSlideshow } from '../components/slideshow/RecipeSlideshow'
-import { recipes } from '../mocks/recipes'
+import { useQuery } from '@apollo/client/react'
+import { GET_FEATURED_RECIPES } from '../graphql/recipes'
 
 
 
 export default function HomePage() {
   const [vegetarSelected, setVegetarSelected] = useState(false)
   const [middagSelected, setMiddagSelected] = useState(false)
 
+  // Henter oppskriftene som fra backend som skal brukes i slideshowet. 
+  const { data, loading, error } = useQuery(GET_FEATURED_RECIPES, {
+    variables: { page: 1, pageSize: 5 },
+  });
+
   return (
     <main className="bg-background min-h-screen">
 
       <div className="mx-auto px-6 py-10">
 
-
-        <RecipeSlideshow recipes={recipes.slice(0, 5)}/>
-
+        {/* Viser en melding mens oppskriftene lastes eller hvis noe går galt. */}
+        {loading && <p role="status">Laster oppskrifter ...</p>}
+        {error && <p role="alert">Kunne ikke hente oppskriftene. Prøv igjen senere.</p>}
+        {data && <RecipeSlideshow recipes={data.recipes} />}