Feature/14 apollo integration

[annisaam]

Beskrivelse

Denne PR-en kobler frontend til GraphQL-backend med Apollo Client og viser ekte varer fra databasen i stedet for hello-spørringen og mockdata. Det gjør at klient og backend virker sammen til innlevering 2.

Hvordan dette oppfyller prosjektkravene

• Søk uten unødvendige requests: debounce på 400 ms, slik at det bare sendes en forespørsel når brukeren slutter å skrive.
• Samspill klient og backend (innlevering 2): klienten henter ekte data fra GraphQL-backend via Apollo Client.
• Tilgjengelighet (tidlig start): søkefeltet har en label knyttet til input, bilder har alt-tekst, og feilmeldingen har role="alert" så skjermlesere leser den opp.

Kjent begrensning: noen varer mangler pris eller har ødelagt bildelenke i databasen. Det er en datakvalitet-sak, ikke en feil i frontend.

Relaterte issues

Closes #14

Endringer gjort

• Apollo Client og ApolloProvider satt opp, URL leses fra VITE_GRAPHQL_URL (.env.example viser hva som må settes)
• Byttet hello-spørringen med products-spørringen i App.tsx
• Søkefelt med debounce (400 ms) for å unngå unødvendige requests
• Liste med bilde, navn, merke og laveste pris per vare
• Lastetekst mens data hentes
• Feilmelding hvis backend er nede
• «Ingen varer funnet» ved søk uten treff
• Enkel styling i App.css

Hva slags type fiks inneholder denne PR

• Bug fix
• Ny funksjonalitet
• Refactor
• Dokumentasjon
• Testing

Sjekkliste

• Testet lokalt
• Dokumentert endringer
• Sjekket for feilmeldinger

Skjermbilder

Nettside uten et spesifikt søk

Søkte på melk

Søkte på en vare som ikke finnes

Feilmelding når backend er stoppet

Sidene viser "Laster varer..." når man begynner å skrive i søkefeltet. Det går veldig fort når siden lastes, så får ikke tatt skjermbilde.

[lindeav]

Virker som backend er mye duplikat med hva tara har gjort eller akkurat det samme. Vet ikke om det var meningen å pushe dette egentlig