6. 将查询连接到您的 UI

在本章中，您将展示一个启动项列表列表.

配置 LaunchListViewModel

在LaunchListViewModel添加一个新的变量，用于存放查询返回的启动项：

LaunchListViewModel.swift

1
@Published var launches = [LaunchListQuery.Data.Launches.Launch]() 
2
@Published var appAlert: AppAlert?
3
@Published var notificationMessage: String?

接下来，将TODO方法中的loadMoreLaunches()替换为运行LaunchListQuery的代码：

LaunchListViewModel.swift

1
Network.shared.apollo.fetch(query: LaunchListQuery()) { [weak self] result in
2
    guard let self = self else {
3
        return
4
    }
5

6
    switch result {
7
    case .success(let graphQLResult):
8
        if let launchConnection = graphQLResult.data?.launches {
9
            self.launches.append(contentsOf: launchConnection.launches.compactMap({ $0 }))
10
        }
11

12
        if let errors = graphQLResult.errors {
13
            self.appAlert = .errors(errors: errors)
14
        }
15
    case .failure(let error):
16
        self.appAlert = .errors(errors: [error])
17
    }
18
}

GraphQLResult包含data和errors属性。这是因为在GraphQL中，如果数据非空，允许返回部分数据。

在现在的例子中，理论上我们可以得到launches的列表，然后得到一个错误，表示无法检索具有特定ID的launch。

这就是为什么当您得到GraphQLResult时，通常会检查data属性（以显示您从服务器获得的结果）和错误属性（以尝试处理您从服务器收到的任何错误）。

如代码所示，示例项目已经通过将所需的值分配给appAlert属性，提供了一个显示错误警报的简单方法。

`在界面中使用 Launches`

首先，让我们更新我们的LaunchRow视图，使其能够显示特定Launch的数据。在文件顶部添加import RocketReserverAPI，然后添加以下variable：

LaunchRow.swift

1
let launch: LaunchListQuery.Data.Launches.Launch 
2
private let placeholderImg = Image("placeholder")

然后，让我们更新我们的一个Text视图，以显示launch的位置：

LaunchRow.swift

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

更新LaunchRow后，让我们转到LaunchListView并开始显示我们的Launches列表。

更新ForEach循环，使其遍历viewModel中的每个launch项目，并为其创建一个LaunchRow：

LaunchListView.swift

1
ForEach(0..<viewModel.launches.count, id: \.self) { index in
2
    LaunchRow(launch: viewModel.launches[index])
3
}

最后一步是调用我们之前更新的loadMoreLaunches方法，实际上query服务器上的数据。为此，请将TODO更新为以下内容：

LaunchListView.swift

1
.task {
2
    viewModel.loadMoreLaunches() 
3
}

`测试您的查询`

构建并运行应用程序，您现在可以将UI连接到您的GraphQL查询 🚀。

接下来，您将给列表添加更多信息以使它看起来更美观！

上一页
5. 执行您的第一个查询下一页
7. 给列表添加更多信息