task: Koble frontend til backend med Apollo Client

[lindeav]

Beskrivelse

Frontend viser ikke data fra backenden ennå. Til innlevering 2 må klienten hente ekte varer, så vi viser at klient og backend virker sammen.

Foreslått løsning

Sett opp Apollo Client med ApolloProvider rundt appen. Lag én side med søkefelt og en resultatliste som viser navn, bilde og pris. Adressen til backenden legges i en miljøvariabel (for eksempel VITE_GRAPHQL_URL), så den kan byttes mellom lokal maskin og VM. Mens issue 2 ikke er ferdig, kan dere bruke mockdata med samme form som GraphQL-svaret, så er det lett å bytte over.

Akseptansekriterier

• ApolloProvider er satt opp, og URL-en leses fra en miljøvariabel. .env.example viser hva som må settes.
• Med backend og frontend kjørende lokalt (npm run dev i begge) viser siden varer fra databasen, ikke mockdata.
• Et søk på «melk» viser varer som matcher.
• Siden viser en lastetekst mens data hentes, og en forståelig feilmelding hvis backenden er nede (test ved å stoppe backenden og laste siden på nytt).
• Et søk uten treff viser «Ingen varer funnet» eller lignende, ikke en tom side.
• npm run build og npm run lint i frontend/ går uten feil.

Design/mockup

Bruk skissene fra innlevering 1.

Avhengigheter

GraphQL-skjemaet (2) for ekte data. Kan startes med mockdata før det.

[annisaam]

Apollo Client er nå satt opp i frontend med ApolloProvider og backend-URL fra VITE_GRAPHQL_URL.

Jeg har testet integrasjonen mot den eksisterende hello-queryen i backenden, og frontend mottar og viser svaret "Hei fra Handlelappen-backend!".

Dette bekrefter at frontend og GraphQL-backend kommuniserer korrekt. Neste steg er å bytte fra den midlertidige hello-queryen til ekte produktdata når products-queryen/resolverne er klare.

[annisaam]

PR #24 er opprettet mot dev.

Frontend viser nå ekte varer fra databasen via Apollo Client, med søk (debounce), lastetekst, feilmelding og «Ingen varer funnet». Bruker Taras products-spørring fra issue #13.