Build a website with the starter kit

Implement the GraphQL query

In this part of the tutorial you’ll first implement the GraphQL query you created earlier in the tutorial to fetch data, then create mappings for the content types you’ve already added to Content Hub ONE, and then you’ll retrieve data from the app. During all of this, you’ll modify various files in the starter kit so you can open and view the website.

Note

A predefined query for media items is used so that media items do not need to be included individually, and the query is broken out into files for each content type.

To implement the GraphQL query:

In Visual Studio Code, open the starter kit repository and go to the /graphQL folder.
Create a copy of the Recipe folder and name it Events.
In the Events folder, create two copies of the recipe-query.ts file. This file defines the query.
Name these three files speaker-query.ts, agenda-query.ts, and event-query.ts.

Open each of the three files and modify them as shown in the following code samples, changing all mentions of recipes to the equivalent mentions of speaker, agenda, or event. For each file, ensure the new text matches the case of the original.

import MEDIA_QUERY from "../Common/media-query";

export const SPEAKER_QUERY = ` 
 id
 name
 speakerName
 speakerBio
 speakerImage{
  total
  results{
   ${MEDIA_QUERY}
  }
 }
`;

export const ALL_SPEAKER_QUERY = `{ 
  data: allSpeaker
  {
   __typename
   total
   results {
    ${SPEAKER_QUERY}
   }
  }
}
 `;

export default ALL_SPEAKER_QUERY

import {MEDIA_QUERY} from "../Common/media-query";
import {SPEAKER_QUERY} from "./speaker-query";

export const AGENDA_QUERY = `
 id
 name 
 talkTitle
 talkDescription
 time
 image{
  total
  results {
   ${MEDIA_QUERY}
  }
  }
 speaker {
  total
  results {
  __typename
 ... on Speaker {
 ${SPEAKER_QUERY}
  }
 }
 }
`;

export const ALL_AGENDA_QUERY = `{ 
  data: allTalk
  {
   __typename
   total
   results {
    ${AGENDA_QUERY}
   }
  }
}
 `;

export default ALL_AGENDA_QUERY

import MEDIA_QUERY from "../Common/media-query";
import {AGENDA_QUERY} from "./agenda-query";

export const EVENT_QUERY = ` 
 id
 name
 eventName
 eventDescription
 eventLocation
 eventDate
 eventImage {
  total
  results{
   ${MEDIA_QUERY}
  }
 }
agenda {
 total
 results {
 __typename
 ... on Talk {
  ${AGENDA_QUERY}
 }
 }
}
`;

export const ALL_EVENT_QUERY = `{ 
  data: allEvent
  {
   __typename
   total
   results {
    ${EVENT_QUERY}
   }
  }
}
 `;

export default ALL_EVENT_QUERY

If you have suggestions for improving this article, let us know!