Implement the data retrieval
With the queries and types in place, it's time to bring them together and retrieve the data in our application.
To implement the data retrieval:
-
In Visual Studio Code, open the starter kit repository and go to the /lib folder.
-
Create a copy of the Recipe folder and name it Events.
-
In the Events folder, rename the recipe-lib.ts file to event-lib.ts. This file will fetch all events, a single event by ID, and events with specific IDs.
-
Open this file and modify it as shown in the following code sample, changing all mentions of recipes to equivalent mentions of events. Ensure the new text matches the case of the original.
import Event, {EventResults} from "../../types/Events/event-type";
import {fetchAPI} from "../Common/api"
import {EVENT_QUERY, ALL_EVENT_QUERY} from "../../graphQl/Events/event-query";
export async function getAllEvents(preview: boolean): Promise Event[] {
const data = await fetchAPI(`${ALL_EVENT_QUERY}`);
return extractPosts(data.data);
}
export async function getEventById(id: string): Promise Event {
const queryEvent = `{
data: event(id: "${id}")
{
${EVENT_QUERY}
}
}`;
const data = await fetchAPI(queryEvent);
return data.data.data;
}
export async function getAllEventsWithIds(): Promise Event[] {
const query = `{
data: allEvents
{
__typename
total
results {
${EVENT_QUERY}
}
}
}`;
const data = await fetchAPI(query);
return extractPosts(data.data);
}
function extractPosts({ data }: { data: EventResults }) {
return data.results.map((post: Event) = {
return post;
});
}
function extractPost({ data }: { data: Event }) {
return data;
}