Skip to content

🏗rendering stories

Yasser Al Sleiman edited this page Jun 19, 2023 · 2 revisions

Code rendering stories

import type { PageServerLoad } from './$types';
import { client } from "../../../vendors/utils";

export const load: PageServerLoad = async ({ params }) => {
	const query = `
    query Story($id: ID) {
        story(where: {id: $id}) {
            title
            content {
                html
            }
        }
    }`;
	const data = await client({ query, variables: { id: params.id }, fetch: fetch });

	return { ...data.story };
};

De bovenstaande code is een module die een load-functie exporteert. Deze functie maakt gebruik van de GraphQL-querytaal om gegevens op te halen van een externe server. Laten we de code stap voor stap uitleggen:

In de eerste regel wordt het type PageServerLoad geïmporteerd uit het ./$types-bestand. Dit type wordt waarschijnlijk ergens anders in het project gedefinieerd en wordt gebruikt om het type van de load-functie te specificeren.

De tweede regel importeert een object genaamd client vanuit een bestand in de ../../../vendors/utils-map. Dit object fungeert hoogstwaarschijnlijk als een hulpprogramma om API-verzoeken naar een externe server uit te voeren.

Vervolgens wordt de load-functie gedefinieerd, die overeenkomt met het type PageServerLoad. Deze functie accepteert een object destructuring-parameter met de naam params.

Binnen de functie wordt een GraphQL-querystring gedefinieerd in de query-variabele. Deze query vraagt naar een specifiek verhaal op basis van een ID.

Daarna wordt de client-functie aangeroepen met een object dat de query, variables en fetch-parameters bevat. De query bevat de GraphQL-querystring, variables bevat het ID dat is verkregen uit params.id, en fetch verwijst waarschijnlijk naar de fetch-functie die wordt gebruikt om het API-verzoek uit te voeren.

Het resultaat van de client-functie wordt toegewezen aan de data-variabele.

De functie retourneert een object door gebruik te maken van de spread operator (...data.story). Dit object bevat waarschijnlijk de gegevens van het opgehaalde verhaal, zoals de titel en de inhoud.

Kort samengevat: deze code definieert een load-functie die de GraphQL-querytaal gebruikt om gegevens op te halen van een externe server. Het specifieke doel is om een verhaal op te halen op basis van een ID. De functie retourneert de gegevens van het verhaal in de vorm van een object.

Clone this wiki locally