Join us for GraphQL Summit, October 10-12 in San Diego. Use promo code ODYSSEY for $400 off your pass.
Launch GraphOS Studio
You're viewing documentation for a previous version of this software. Switch to the latest stable version.

3. Execute your first query

The most common GraphQL is the query, which requests data from your graph in a structure that conforms to your server's . If you return to the Sandbox for your server, you can see available queries in the Reference tab you opened earlier.

Scroll down to the launches query to get details about it:

Detail about launches query

Here, you see both the query term itself, the return type, and information about parameters that can be passed to the query. You can use this information to write a query you'll eventually add to your app.

To start working with this query in the Sandbox , select the "play" button to the right side of the information:

Open in Explorer

This brings you back into Sandbox's tab with the sidebar on the left showing documentation for the query you've selected:

Docs open in the left sidebar

Notice the small button next to the launches icon. Click this button to add the query to the middle "s" panel:

Click the button to add this query

When the query is added, it will look like this:

The query once it's been added to the Operations section

Let's break down what you're seeing here:

  • The type of the , query, followed by the name of the , currently Query (we'll make that more specific in a second), is the outermost set of brackets.
  • The actual query being called is the next set of brackets in. Since the arguments for this query both have default values, they are not automatically added to the query for you.
  • An error in the empty space between the brackets, which is where you'll put the list of information you want back from each launch.

The Apollo iOS SDK requires every query to have a name (even though this isn't required by the GraphQL spec). Since you're going to be creating more than one query, it's also a good idea to give this a specific name other than Query. Change the name of the to LaunchList:

Renaming the query

Next, on the left hand side, you can select what s you want back in the returned object. Start by clicking the button next to the cursor . It will mark that field as selected, then insert it into your s:

After adding the cursor field.

This is probably the easiest way to add s to your object, since it knows how everything is spelled and what type everything is.

However, you can also use auto-complete to help you with this. Add a newline below cursor in the s panel and start typing ha. An autocomplete box pops up and shows you options based on what's in the :

Example of autocomplete

The Sandbox is a great tool for building and verifying queries so you don't have to repeatedly rebuild your project in Xcode to try out changes.

As the indicates, the launches query returns a LaunchConnection object. This object includes a list of launches, along with s related to pagination (cursor and hasMore). The query you've written so far indicates exactly which s of this LaunchConnection object you want to be returned.

Run this query by pressing the "Submit " button, which should now have the name of your query, LaunchList:

Submit the operation

You'll quickly see the query returns results as a JSON object on the right-hand side of the page:

Query JSON in Sandbox Explorer

This query executes successfully, but it doesn't include any information about the launches! That's because we didn't include the necessary in the query.

Click the button next to the launches at the bottom of the left column. It will add a set of braces for launches to the s section, and then move the documentation to show information for the Launch type:

Status after adding launches field

The s you add in this set of brackets will be fetched for every launch in the list. Click the buttons next to id and site properties to add those two s. When you're done, your should look like this:

query LaunchList {
launches {
launches {

Run the again, and you'll now see that in addition to the information you got back before, you're also getting a list of launches with their ID and site information:

Updated query JSON in Sandbox Explorer

Adding your query to Xcode

Now that your query is fetching the right data, head back to Xcode.

  1. Go to File > New > File... and select the Empty file template:
Empty file template
  1. Click Next and name the file LaunchList.graphql. Make sure it's saved at the same level as your schema.json file. As previously, don't add it to any target.

  2. Copy your final from Sandbox by selecting the three dot (aka "meatball") menu to the right of your and selecting "Copy Operation":

Copy operation from Explorer Sandbox
  1. Paste the copied into LaunchList.graphql

You're now ready to generate code from the combination of your saved query and .

Running code generation

  1. Return to your project's Apollo Run Script build phase. Comment out the line that you added to the bottom (that includes schema:download). The isn't changing between builds, which means you don't need to refetch it.

  2. Uncomment the line you previously commented out (that includes codegen:generate).

  3. Build your project. When the build completes, an API.swift file appears in the same folder as schema.json.

  4. Drag the API.swift file into Xcode. This time, do check the Add to target box for the RocketReserver app. You include this file in your application's bundle to enable you to execute the query you defined.

The API.swift file

Open the API.swift file. It defines a root class, LaunchListQuery, with many nested structs below it. If you compare the structs to the JSON data returned in Sandbox , you see that the structure matches. These structs include properties only for the s that your query requests.

Try commenting out the id property in LaunchList.graphql using a #, saving, then building again. When the build completes, the innermost Launch now only includes the built-in __typename and the requested site property.

Uncomment id in LaunchList.graphql and rebuild to restore the property.

Now that you've generated code and had a chance to see what's in there, it's time to get everything working end to end!

Running a test query

To use the generated s in API.swift, you first create an instance of ApolloClient. This instance takes your generated code and uses it to make network calls to your server. It's recommended that this instance is a singleton or static instance that's accessible from anywhere in your codebase.

  1. Create a new Swift file called Network.swift and copy the code from Basic client creation into it. Make sure to add import Apollo to the top of the file.

  2. Update the URL string to be instead of the localhost URL in the example.

  3. To make sure your ApolloClient instance is communicating correctly with the server, add the following code to AppDelegate.swift in the application:didFinishLaunchingWithOptions method, above return true:

    Network.shared.apollo.fetch(query: LaunchListQuery()) { result in
    switch result {
    case .success(let graphQLResult):
    print("Success! Result: \(graphQLResult)")
    case .failure(let error):
    print("Failure! Error: \(error)")

Build and run your application. The web host might take a few seconds to spin up your GraphQL server if nobody's been using it recently, but once it's up, you should see a response that resembles the following:

Success log output

You're now successfully fetching data from the network using generated code! Now it's time to move on to displaying query results in your UI.

2. Obtain your GraphQL schema
4. Connect your queries to your UI
Edit on GitHubEditForumsDiscord