Odyssey

Apollo iOS and Swift: Codegen and Queries
beta

Course intro and setupSandbox ExplorerAdd the GraphQL schemaRunning code generationExecute your first queryConnect your queries to your UIAdd more info to the list
7. Add more info to the list
2m

Overview

Let's add more information, including images, to our list of launches. Along the way we'll learn more about GraphQL arguments and enums.

Add mission patches

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 Apollo Sandbox, 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:

LaunchList.graphql
query LaunchList {
  launches {
    hasMore
    cursor
    launches {
      id
      site
      mission {
        name
        missionPatch(size: SMALL)
      }
    }
  }
}

Now we'll need to re-run code generation. If you remember the command, great! If you need a refresher, no judgment here, just take a peek below:

./apollo-ios-cli generate

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.

Task!

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

https://studio.apollographql.com/sandbox/schema

The PatchSize enum field in Sandbox Schema, showing the different available values

Connect the data to the UI

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

LaunchRow.swift
import RocketReserverAPI
import SDWebImageSwiftUI
import SwiftUI

Next replace the existing placeholderImg reference with the following code:

LaunchRow.swift
HStack {
    if let missionPatch = launch.mission?.missionPatch {
        WebImage(url: URL(string: missionPatch))
            .resizable()
            .placeholder(placeholderImg)
            .indicator(.activity)
            .scaledToFit()
            .frame(width: 50, height: 50)
    } else {
        placeholderImg
            .resizable()
            .scaledToFit()
            .frame(width: 50, height: 50)
    }
    VStack(alignment: .leading) {
    // ...
  }
}

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

LaunchRow.swift
VStack(alignment: .leading) {
    Text(launch.mission?.name ?? "Mission Name")
    Text(launch.site ?? "Launch Site")
        .font(.system(size: 14))
}

Type 'Objects' has no member 'Mission'

This error usually occurs when our code generation process is a bit out of sync.

How to fix it: Try restarting XCode, and run the code generation command again. This should clear up the error and get the codegen process on the same page!

Still having trouble? Visit the Odyssey forums to get help.

Test your query

Build and run the application, and... you'll see all the information for current launches!

The resulting UI in our simulator after bringing in new data

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.

Journey's end

And you've done it! We've wired up our frontend to communicate with a GraphQL server, and successfully loaded a list of launches in our UI. Congratuations on completing Part I! In Part II, you'll deepen your understanding of GraphQL and Apollo iOS. Pagination, mutations, and subscriptions are on the launch pad.

When you're ready, we'll see you there: Using Apollo iOS in Swift Applications: Pagination, Mutations, and Subscriptions!

Previous

Share your questions and comments about this lesson

This course is currently in

beta
. Your feedback helps us improve! If you're stuck or confused, let us know and we'll help you out. All comments are public and must follow the Apollo Code of Conduct. Note that comments that have been resolved or addressed may be removed.

You'll need a GitHub account to post below. Don't have one? Post in our Odyssey forum instead.

              launches

              The process of applying a set of updates to a supergraph. Launches are usually triggered by making changes to one of your published subgraph schemas.

              GraphQL

              An open-source query language and specification for APIs that enables clients to request specific data, promoting efficiency and flexibility in data retrieval.

              arguments

              A key-value pair associated with a particular schema field that lets operations pass data to that field's resolver.

              Argument values can be hardcoded as literal values (shown below for clarity) or provided via GraphQL variables (recommended).

              query GetHuman {
                human(id: "200") {
                  name
                  height(unit: "meters")
                }
              }
              query

              A request for specific data from a GraphQL server. Clients define the structure of the response, enabling precise and efficient data retrieval.

              Apollo Sandbox

              A part of GraphOS Studio focused on local development, available at https://studio.apollographql.com/sandbox. Apollo Sandbox does not require an Apollo account.

              query

              A request for specific data from a GraphQL server. Clients define the structure of the response, enabling precise and efficient data retrieval.

              GraphQL

              An open-source query language and specification for APIs that enables clients to request specific data, promoting efficiency and flexibility in data retrieval.

              field

              A unit of data that belongs to a type in a schema. Every GraphQL query requests one or more fields.

              type Author {
                # id, firstName, and lastName are all fields of the Author type
                id: Int!
                firstName: String
                lastName: String
              }
              arguments

              A key-value pair associated with a particular schema field that lets operations pass data to that field's resolver.

              Argument values can be hardcoded as literal values (shown below for clarity) or provided via GraphQL variables (recommended).

              query GetHuman {
                human(id: "200") {
                  name
                  height(unit: "meters")
                }
              }
              arguments

              A key-value pair associated with a particular schema field that lets operations pass data to that field's resolver.

              Argument values can be hardcoded as literal values (shown below for clarity) or provided via GraphQL variables (recommended).

              query GetHuman {
                human(id: "200") {
                  name
                  height(unit: "meters")
                }
              }
              scalar

              A "base" type that resolves to a single value. GraphQL includes the following scalar types by default: Int, Float, String, Boolean, and ID.

              GraphQL schema

              A GraphQL schema defines the structure and types of data that can be queried or mutated, serving as a contract between the server and clients.

              launches

              The process of applying a set of updates to a supergraph. Launches are usually triggered by making changes to one of your published subgraph schemas.

              launches

              The process of applying a set of updates to a supergraph. Launches are usually triggered by making changes to one of your published subgraph schemas.

              GraphQL server

              A server that contains a GraphQL schema and can resolve client-requested operations that are executed against that schema.

              launches

              The process of applying a set of updates to a supergraph. Launches are usually triggered by making changes to one of your published subgraph schemas.

              Apollo iOS

              An open-source library for client-side state management and GraphQL operation handling for iOS. Apollo iOS is a strongly-typed caching GraphQL client written in Swift.

              mutations

              A GraphQL operation that modifies data on the server. It allows clients to perform create, update, or delete operations, altering the underlying data.

              subscriptions

              A long-lived, real-time GraphQL operation that enables real-time communication by allowing clients to receive data updates from the server when specific events or changes occur.

              NEW COURSE ALERT

              Introducing Apollo Connectors

              Connectors are the new and easy way to get started with GraphQL, using existing REST APIs.

              Say goodbye to GraphQL servers and resolvers—now, everything happens in the schema!

              Take the course