7. Add more info to the list

Go back to LaunchList.graphql. Your query is already fetching most of the information you want to display, but it would be nice to display both the name of the mission and an image of the patch.

Looking at the schema in Sandbox Explorer, you can see that Launch has a property of mission, which allows you to get details of the mission. A mission has both a name and a missionPatch property, and the missionPatch can optionally take a parameter about what size something needs to be.

Because loading a list view with large images can impact performance, ask for the name and a SMALL mission patch. Update your query to look like the following:

1query LaunchList {
2  launches {
3    hasMore
4    cursor
5    launches {
6      id
7      site
8      mission {
9        name
10        missionPatch(size: SMALL)
11      }
12    }
13  }
14}

When you re-run code generation if you look in LaunchListQuery.graphql.swift, you'll see a new nested type, Mission, with the two properties you requested.

Any GraphQL field can take arguments like missionPatch above, and arguments can be of scalar or complex types. In this case, SMALL is an enum in the GraphQL schema. It can take a finite list of values. If you look at the Schema section in Sandbox, you can see a list of the enums. You can then click in to see that PatchSize can only take two values: SMALL and LARGE

Connect the data to the UI

Go to LaunchRow.swift and add the following import to the top of the file:

1import RocketReserverAPI
2import SDWebImageSwiftUI
3import SwiftUI

Next replace the existing placeholderImg reference with the following code:

1if let missionPatch = launch.mission?.missionPatch {
2    WebImage(url: URL(string: missionPatch))
3        .resizable()
4        .placeholder(placeholderImg)
5        .indicator(.activity)
6        .scaledToFit()
7        .frame(width: 50, height: 50)
8} else {
9    placeholderImg
10        .resizable()
11        .scaledToFit()
12        .frame(width: 50, height: 50)
13}

Finally let's update the text label for the mission name:

1VStack(alignment: .leading) {
2    Text(launch.mission?.name ?? "Mission Name")
3    Text(launch.site ?? "Launch Site")
4        .font(.system(size: 14))
5}

Test your query

Build and run the application, and you will see all the information for current launches.

If you scroll down, you'll see the list includes only about 20 launches. This is because the list of launches is paginated, and you've only fetched the first page.

Next, you will use a cursor-based loading system to load the entire list of launches.