9. 完成详情视图

在本节中，您将编写一个第二GraphQL 查询，该查询请求有关单个发射的详细信息，并使用这些数据在一个 DetailView

为了在详情页上显示更多信息，您有几个选择

您可以在 LaunchList 查询中请求您想要为每个 launch显示的所有详细信息，然后将检索到的对象传递到 DetailViewController。
您可以为 不同的 查询提供 launch 的标识符，然后请求您想要显示的所有详细信息。

如果请求的列表与详情页之间的大小没有实质性差异，第一个选项可能看起来更容易。

但是，记得 GraphQL 的一大优点是您可以为显示在页面上的数据 query 精确。 如此，如果您不打算显示额外的信息，则可以通过在需要数据之前不请求数据来节省带宽、执行时间和电池寿命。

这尤其适用于当您的详情视图的查询比列表视图大得多时。传递标识符并根据该标识符获取数据被视为最佳实践。尽管在这种情况下数据量没有太大差异，但您将建立一个查询来帮助根据 ID 获取详细信息，这样您就会知道如何在未来这样做。

创建详情查询

创建一个新空文件并将其命名为 LaunchDetails.graphql。在文件中，您将添加要显示在详细视图中的详细信息。首先，您希望返回到您的沙盒并确保您的查询正常工作！

在“探索者”标签中，首先在中部操作区域点击“新建标签页”按钮：

将添加一个新标签页，而其中没有任何内容

在左侧列中，点击“文档”下方的“查询”一词，以便显示可能的查询列表：

通过单击旁边的按钮选择 launch 查询。沙盒探索器将自动为您设置查询：

What the launch query will look like immediately after adding it

首先，将操作名称从“查询”更改为“运行详情”，这将反映在标签页名称中，并有助于区分您正在处理的查询：

让我们看看这里添加了什么

同样，我们添加了一个操作，但这次它有一个传入的参数。这是沙盒探索器自动添加的，因为非空 launchId 参数没有默认值。
参数名称前面加有 $，类型紧随其后。注意，这里的 ID 类型有一个感叹号，表示它不能为空。
在这个操作中，我们调用 launch 查询。 id 是查询期望的参数，而 $launchId 是我们上面传入的参数的名称。
再次，这里留有空白供您添加要获取的详细信息的字段，这里是一个 Launch。
最后，在底部，“变量”部分已展开，并添加了一个键为 "launchId" 的字典。在运行时，这将用于填充 $launchId 参数中的空白。

注意：GraphQL对null的可空性的假设与Swift不同。在Swift中，如果你没有用问号或感叹号标注属性的类型，那么该属性是非可空的。

在GraphQL中，如果你没有用感叹号标注字段的类型，那么该字段被认为是可空的。这是因为GraphQL的字段默认是可空的。

在编辑Swift和GraphQL文件之间切换时，请记住这个区别。

现在在沙盒资源管理器中，首先使用复选框或输入来添加你在LaunchList查询中已请求的属性。有一点不同：由于补丁将显示在更大的ImageView中，所以使用LARGE来设置任务补丁的大小：

(沙盒资源管理器)

1
query LaunchDetails($id:ID!) {
2
  launch(id: $id) {
3
    id
4
    site
5
    mission {
6
      name
7
      missionPatch(size:LARGE)
8
    }
9
  }
10
}

接下来，在左侧侧边栏中查看其他哪些字段可用。选中rocket将为请求有关火箭的详细信息添加一组括号，并钻入rocket属性，显示Rocket类型上的可用字段：

点击按钮来勾选name和type。然后，点击左侧侧边栏中Rocket类型旁边的后退按钮返回到Launch：

最后，在Launch上勾选isBooked属性。您的最终查询应如下所示：

(沙盒资源管理器)

1
query LaunchDetails($launchId: ID!) {
2
  launch(id: $launchId) {
3
    id
4
    site
5
    mission {
6
      name
7
      missionPatch(size: LARGE)
8
    }
9
    rocket {
10
      name
11
      type
12
    }
13
    isBooked
14
  }
15
}

在操作部分底部，更新变量部分以传入launch的ID。在这种情况下，它需要是一个包含数字的字符串：

(沙盒资源管理器)

1
{ "id": "25" }

这告诉SandBox Explorer以值$launchId填充该变量，然后运行查询。按下大播放按钮，你应该会为ID号为25的launch得到一些结果：

现在你已经确认它工作正常，请复制查询（可以通过选择所有文本或像之前一样从昆虫菜单中选择“操作”选项），并将其粘贴到你的LaunchDetails.graphql文件中。从终端运行代码生成以生成新查询的代码。

执行查询

现在让我们添加代码来运行此查询以检索数据。

打开DetailViewModel.swift并添加这个import

DetailViewModel.swift

1
import RocketReserverAPI

接下来，让我们更新init()方法并添加一些variables来存储我们的Launch数据：

DetailViewModel.swift

1
let launchID: RocketReserverAPI.ID 
2

3
@Published var launch: LaunchDetailsQuery.Data.Launch?
4
@Published var isShowingLogin = false
5
@Published var appAlert: AppAlert?
6

7
init(launchID: RocketReserverAPI.ID) {
8
    self.launchID = launchID
9
}

接下来需要运行查询，因此在 loadLaunchDetails 方法中将 TODO 替换为此代码：

DetailViewModel.swift

1
func loadLaunchDetails() {
2
    guard launchID != launch?.id else {
3
        return
4
    }
5

6
    Network.shared.apollo.fetch(query: LaunchDetailsQuery(launchId: launchID)) { [weak self] result in
7
        guard let self = self else {
8
            return
9
        }
10

11
        switch result {
12
        case .success(let graphQLResult):
13
            if let launch = graphQLResult.data?.launch {
14
                self.launch = launch
15
            }
16

17
            if let errors = graphQLResult.errors {
18
                self.appAlert = .errors(errors: errors)
19
            }
20
        case .failure(let error):
21
            self.appAlert = .errors(errors: [error])
22
        }
23
    }
24
}

现在我们已经启动了查询，需要更新 UI 代码来使用新的数据。

更新 UI 代码

首先，转到 DetailView.swift，并添加以下 import声明：

DetailView.swift

1
import RocketReserverAPI
2
import SDWebImageSwiftUI

接下来，需要更新 init() 方法，以使用 launchID 来初始化 DetailViewModel：

DetailView.swift

1
init(launchID: RocketReserverAPI.ID) {
2
    _viewModel = StateObject(wrappedValue: DetailViewModel(launchID: launchID))
3
}

几乎完成了！让我们更新 body 视图变量，使用从 DetailViewModel 得到的 launch 数据，并调用 loadLaunchDetails 方法：

DetailView.swift

1
var body: some View {
2
    VStack {
3
        if let launch = viewModel.launch { 
4
            HStack(spacing: 10) {
5
                if let missionPatch = launch.mission?.missionPatch { 
6
                    WebImage(url: URL(string: missionPatch)) 
7
                        .resizable() 
8
                        .placeholder(placeholderImg) 
9
                        .indicator(.activity) 
10
                        .scaledToFit() 
11
                        .frame(width: 165, height: 165) 
12
                } else { 
13
                    placeholderImg
14
                        .resizable()
15
                        .scaledToFit()
16
                        .frame(width: 165, height: 165)
17
                } 
18

19
                VStack(alignment: .leading, spacing: 4) {
20
                    if let missionName = launch.mission?.name { 
21
                        Text(missionName)
22
                            .font(.system(size: 24, weight: .bold))
23
                    }
24

25
                    if let rocketName = launch.rocket?.name { 
26
                        Text("🚀 \(rocketName)")
27
                            .font(.system(size: 18))
28
                    }
29

30
                    if let launchSite = launch.site { 
31
                        Text(launchSite)
32
                            .font(.system(size: 14))
33
                    }
34
                }
35

36
                Spacer()
37
            }
38

39
            if launch.isBooked { 
40
                cancelTripButton()
41
            } else {
42
                bookTripButton()
43
            }
44
        }
45
        Spacer()
46
    }
47
    .padding(10)
48
    .navigationTitle(viewModel.launch?.mission?.name ?? "") 
49
    .navigationBarTitleDisplayMode(.inline)
50
    .task {
51
        viewModel.loadLaunchDetails() 
52
    }
53
    .sheet(isPresented: $viewModel.isShowingLogin) {
54
        LoginView(isPresented: $viewModel.isShowingLogin)
55
    }
56
    .appAlert($viewModel.appAlert)
57
}

另外，还需要更新 DetailView 的预览代码，如下所示：

DetailView.swift

1
struct DetailView_Previews: PreviewProvider {
2
    static var previews: some View {
3
        DetailView(launchID: "110") 
4
    }
5
}

现在，我们需要将 DetailView 连接到我们的 LaunchListView。让我们转到 LaunchListView.swift 并更新我们的 List，如下所示：

LaunchListView.swift

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

这将允许我们点击列表中的任何 LaunchRow，并加载对应的 DetailView。

测试 DetailView

现在，一切都已连接，构建并运行应用程序，当你点击任何 launch 时，你应该看到一个相应的 DetailView，如下所示：

你可能已经注意到详细信息视图包括一个 Book Now! 按钮，但Currently there is no way to book a seat. To fix this, let's 学习如何通过 mutations 在你的图中对对象进行更改，包括身份验证。

8. 分页结果

10. 编写你的第一个mutation