Apollo GraphQL Part 2

Add to favorites

Make a network call to fetch your data and process it into your own data type

SwiftUI Advanced Handbook

Firebase Auth

8:18

Read from Firestore

8:01

Write to Firestore

5:35

Join an Array of Strings

3:33

Data from JSON

5:08

HTTP Request

6:31

WKWebView

5:25

Code Highlighting in a WebView

5:11

Test for Production in the Simulator

1:43

Debug Performance in a WebView

1:57

Debug a Crash Log

2:22

Simulate a Bad Network

2:11

Archive a Build in Xcode

1:28

Apollo GraphQL Part I

6:21

Apollo GraphQL Part 2

6:43

Apollo GraphQL Part 3

5:08

Configuration Files in Xcode

4:35

App Review

5:43

ImagePicker

5:06

Compress a UIImage

3:32

Firebase Storage

11:11

Search Feature

9:13

Push Notifications Part 1

5:59

Push Notifications Part 2

6:30

Push Notifications Part 3

6:13

Network Connection

6:49

Download Files Locally Part 1

6:05

Download Files Locally Part 2

6:02

Offline Data with Realm

10:20

HTTP Request with Async Await

6:11

Xcode Cloud

9:23

SceneStorage and TabView

3:52

Network Connection Observer

4:37

Apollo GraphQL Caching

9:42

Create a model from an API response

5:37

Multiple type variables in Swift

4:23

Parsing Data with SwiftyJSON

9:36

ShazamKit

12:38

Firebase Remote Config

9:05

Generate the API.swift file

Build your project (⌘ + B). Once it's succeeded, an API.swift file will appear in the same folder as your schema.json file we generated in Apollo GraphQL Part I. If it's not in your Xcode project, remember to drag and drop it from your Finder into your project or click on File > Add new Files to ProjectName and select the API.swift file.

The API.swift file is auto-generated by Apollo and you should never edit it as it can lead to bugs in your application. Every time you create a new query or change something in a query, this file will be re-generated automatically.

Create the Network call

In a new Network.swift file, paste the following code. This will allow you to connect to the server and fetch data with your GraphQL query.

// Network.swift

import Apollo

class Network {
  static let shared = Network()

    let url = "https://apollo-fullstack-tutorial.herokuapp.com" // Udapte this link with your API link

    private(set) lazy var apollo = ApolloClient(url: URL(string: url)!)
}

Create your ViewModel

A ViewModel allows you to process your data before displaying it in a View, and makes your code cleaner as it's easier to read when you separate the functions from the UI. Create a LaunchViewModel.swift file where we'll put the function to fetch our data.

// LaunchViewModel.swift

final class LaunchViewModel: ObservableObject {

    func fetch() {
        Network.shared.apollo.fetch(query: LaunchListQuery()) { result in // Change the query name to your query name
          switch result {
          case .success(let graphQLResult):
            print("Success! Result: \(graphQLResult)")
          case .failure(let error):
            print("Failure! Error: \(error)")
          }
        }
    }

}

Next, initialize your LaunchViewModel as a StateObject in your App.swift file. Don't forget to add launchViewModel as an environmentObject to your ContentView().

// MyProjectNameApp.swift

import SwiftUI

@main
struct ApolloGraphQLApp: App {
    @StateObject var launchViewModel = LaunchViewModel()

    var body: some Scene {
        WindowGroup {
            ContentView()
                .environmentObject(launchViewModel) // Don't forget to add the environmentObject
        }
    }
}

Back in your LaunchViewModel class, add an init() and call your fetch() function so the data is fetched when the LaunchViewModel is initialized in the App.swift file.

// LaunchViewModel.swift

init() {
		fetch()
}

Now run you app (⌘ + ⇧ + R). When the app launches, you should see the result of the GraphQL query in your console.

Note: If you don't see the console in Xcode, ⌘ + C to enable it.

Now that we got our data printed on the console, we need to process it into data we can actually use in our application.

Create a Model

A Model is where you define your app's data types. Storing the Models outside of the View makes your code more readable and is easier to test. Following Apollo's Launch playground schema, we will build our Launch type structure.

Create a new file called LaunchModel.swift, and paste the following data model for Launches:

// LaunchModel.swift

typealias LaunchData = LaunchListQuery.Data.Launch

struct Launches: Decodable {
    var launches: [Launch]

    init(_ launches: LaunchData?) {
        self.launches = launches?.launches.map({ launch -> Launch in
            Launch(launch)
        }) ?? []
    }

    struct Launch: Identifiable, Decodable {
        var id: String
        var site: String
        var mission: Mission
        var rocket: Rocket
        var isBooked: Bool

        init(_ launch: LaunchData.Launch?) {
            self.id = launch?.id ?? ""
            self.site = launch?.site ?? ""
            self.mission = Mission(launch?.mission)
            self.rocket = Rocket(launch?.rocket)
            self.isBooked = launch?.isBooked ?? false
        }

        struct Mission: Decodable {
            var name: String

            init(_ mission: LaunchData.Launch.Mission?) {
                self.name = mission?.name ?? ""
            }
        }

        struct Rocket: Identifiable, Decodable {
            var id: String
            var name: String
            var type: String

            init (_ rocket: LaunchData.Launch.Rocket?) {
                self.id = rocket?.id ?? ""
                self.name = rocket?.name ?? ""
                self.type = rocket?.type ?? ""
            }
        }
    }
}

Process the data

Now that we have both the data from GraphQL and the Model, we simply need to create a function to process the data and transform it into the Launches data type we just created.

In LaunchViewModel.swift, create a new variable at the top to store the data we will process. It will be an empty array to start with.

@Published var launches: [Launches.Launch] = []

Then, create a new function to process the data we get from GraphQL. Here, we are dumping the data we get from GraphQL into our model and it will process it for us.

// LaunchViewModel.swift

func process(data: LaunchData) -> [Launches.Launch] {
		return Launches(data).launches
}

We will need to change a little bit of the fetch function in LaunchViewModel.swift so that we can process our data. Right after the case .success(let graphQLResult) line, remove the current print and paste the following code:

// LaunchViewModel.swift

if let launches = graphQLResult.data?.launches {
		print("Success! Result: \(graphQLResult)")
		self.launches = self.process(data: launches)
} else if let errors = graphQLResult.errors {
		print("GraphQL errors \(errors)")
}

Here, we are making sure that we do get data from our Network call, then we're processing it, turning it into our Launches data type, and saving it into the launches variable defined at the top.

Conclusion

We're almost there! In the last section of this three-part Apollo GraphQL tutorial, we'll learn how to display the data in our View. See you in the next section!

Learn with videos and source files. Available to Pro subscribers only.

Purchase includes access to 50+ courses, 320+ premium tutorials, 300+ hours of videos, source files and certificates.

BACK TO

Apollo GraphQL Part I

Download source files

Download the videos and assets to refer and learn offline without interuption.

Design template

Source code for all sections

Video files, ePub and subtitles

Videos

Assets

ePub

Subtitles

Firebase Auth

How to install Firebase authentification to your Xcode project

8:18

Read from Firestore

Install Cloud Firestore in your application to fetch and read data from a collection

8:01

Write to Firestore

Save the data users input in your application in a Firestore collection

5:35

Join an Array of Strings

Turn your array into a serialized String

3:33

Data from JSON

Load data from a JSON file into your SwiftUI application

5:08

HTTP Request

Create an HTTP Get Request to fetch data from an API

6:31

WKWebView

Integrate an HTML page into your SwiftUI application using WKWebView and by converting Markdown into HTML

5:25

Code Highlighting in a WebView

Use Highlight.js to convert your code blocks into beautiful highlighted code in a WebView

5:11

Test for Production in the Simulator

Build your app on Release scheme to test for production

1:43

Debug Performance in a WebView

Enable Safari's WebInspector to debug the performance of a WebView in your application

1:57

Debug a Crash Log

Learn how to debug a crash log from App Store Connect in Xcode

2:22

Simulate a Bad Network

Test your SwiftUI application by simulating a bad network connection with Network Link Conditionner

2:11

Archive a Build in Xcode

Archive a build for beta testing or to release in the App Store

1:28

Apollo GraphQL Part I

Install Apollo GraphQL in your project to fetch data from an API

6:21

Apollo GraphQL Part 2

Make a network call to fetch your data and process it into your own data type

6:43

Apollo GraphQL Part 3

Display the data fetched with Apollo GraphQL in your View

5:08

Configuration Files in Xcode

Create configuration files and add variables depending on the environment - development or production

4:35

App Review

Request an app review from your user for the AppStore

5:43

ImagePicker

Create an ImagePicker to choose a photo from the library or take a photo from the camera

5:06

Compress a UIImage

Compress a UIImage by converting it to JPEG, reducing its size and quality

3:32

Firebase Storage

Upload, delete and list files in Firebase Storage

11:11

Search Feature

Implement a search feature to filter through your content in your SwiftUI application

9:13

Push Notifications Part 1

Set up Firebase Cloud Messaging as a provider server to send push notifications to your users

5:59

Push Notifications Part 2

Create an AppDelegate to ask permission to send push notifications using Apple Push Notifications service and Firebase Cloud Messaging

6:30

Push Notifications Part 3

Tie everything together and test your push notifications feature in production

6:13

Network Connection

Verify the network connection of your user to perform tasks depending on their network's reachability

6:49

Download Files Locally Part 1

Download videos and files locally so users can watch them offline

6:05

Download Files Locally Part 2

Learn how to use the DownloadManager class in your views for offline video viewing

6:02

Offline Data with Realm

Save your SwiftUI data into a Realm so users can access them offline

10:20

HTTP Request with Async Await

Create an HTTP get request function using async await

6:11

Xcode Cloud

Automate workflows with Xcode Cloud

9:23

SceneStorage and TabView

Use @SceneStorage with TabView for better user experience on iPad

3:52

Network Connection Observer

Observe the network connection state using NWPathMonitor

4:37

Apollo GraphQL Caching

Cache data for offline availability with Apollo GraphQL

9:42

Create a model from an API response

Learn how to create a SwiftUI model out of the response body of an API

5:37

Multiple type variables in Swift

Make your models conform to the same protocol to create multiple type variables

4:23

Parsing Data with SwiftyJSON

Make API calls and easily parse data with this JSON package

9:36

ShazamKit

Build a simple Shazam clone and perform music recognition

12:38

Firebase Remote Config

Deliver changes to your app on the fly remotely

9:05

Meet the instructor

We all try to be consistent with our way of teaching step-by-step, providing source files and prioritizing design in our courses.

Stephanie Diep

iOS and Web developer

Developing web and mobile applications while learning new techniques everyday

7 courses - 36 hours

Build Quick Apps with SwiftUI

Apply your Swift and SwiftUI knowledge by building real, quick and various applications from scratch

11 hrs

Advanced React Hooks Handbook

An extensive series of tutorials covering advanced topics related to React hooks, with a main focus on backend and logic to take your React skills to the next level

3 hrs

SwiftUI Concurrency

Concurrency, swipe actions, search feature, AttributedStrings and accessibility were concepts discussed at WWDC21. This course explores all these topics, in addition to data hosting in Contentful and data fetching using Apollo GraphQL

3 hrs

SwiftUI Combine and Data

Learn about Combine, the MVVM architecture, data, notifications and performance hands-on by creating a beautiful SwiftUI application

3 hrs

SwiftUI Advanced Handbook

An extensive series of tutorials covering advanced topics related to SwiftUI, with a main focus on backend and logic to take your SwiftUI skills to the next level

4 hrs

React Hooks Handbook

An exhaustive catalog of React tutorials covering hooks, styling and some more advanced topics

5 hrs

SwiftUI Handbook

A comprehensive series of tutorials covering Xcode, SwiftUI and all the layout and development techniques

7 hrs