Apollo GraphQL Caching

Disclaimer

This tutorial assumes that you already know how to fetch data from a server using Apollo GraphQL. You can learn how by following the three part Apollo GraphQL tutorial of this handbook (Part 1, Part 2 and Part 3).

Add ApolloSQLite library

If you've followed the three-part tutorial on Apollo GraphQL mentioned above, you should already have the Apollo SDK installed in your Xcode project. For now, only the Apollo library should have been included in your project. However, to be able to cache data locally on the user's device, we'll need to add another library, which is the ApolloSQLite one.

Open your Xcode project, click on your ProjectName > Targets > iOS > General > Frameworks, Libraries, and Embedded Content. You should see the Apollo library there.

Click on the + sign at the bottom of the list. In the modal that appears, search for ApolloSQLite and add it to your project.

Apollo's caching system

With Apollo, we can cache our data two ways: InMemoryNormalizedCache or SQLiteCache.

• InMemoryNormalizedCache is the default way of caching data with Apollo. It caches the data until the user kills the app. At the next launch, Apollo will fetch the data again if there's a network connection. This caching strategy is included in the Apollo library, so if you've followed the 3-part tutorial, this is the strategy that is used in your app.
• SQLiteCache is included in the ApolloSQLite library. This method create a SQLite file within the app - which means the app size will be bigger. However, saving everything in a SQLite file locally means that we don't need a network connection to fetch the data again, which is good for when users are offline, as they can still navigate the app without Internet. This is the method we'll be exploring in this tutorial, and that's why we added the ApolloSQLite library to our project.

You can read more about Apollo's caching system in Apollo GraphQL's documentation.

Specify the caching method

To cache data locally, we'll need to set our preferred caching method to SQLiteCache. If you remember, we created a file called Network in which we initialized our ApolloClient. We only passed the URL of our server to ApolloClient.

Now, we'll create another client and, instead of passing a URL, we'll specify the caching method we want. Don't remove any code that's already in the Network class. We'll create another client on top of the default one.

First, we'll import ApolloSQLite.

// Network.swift

import ApolloSQLite

Right below the first ApolloClient we created, let's create another one called apolloSQLite. We'll set it equal to a closure with parentheses in the end, because we'll need to do a bit of setup first before returning the actual ApolloClient instance.

// Network.swift

private(set) lazy var apolloSQLite: ApolloClient = {

}()

We'll then need to specify where we want to save the SQLite file that'll be created by ApolloSQLite. Since accessing the documents directory from FileManager might throw an error, we need to add the try keyword and wrap everything in a do catch statement. We'll be saving our apollo_cache.sqlite file in the Documents directory of our application.

// Network.swift

do {
		var documentsPath = try FileManager.default.url(for: .documentDirectory, in: .userDomainMask, appropriateFor: nil, create: false)
		let fileUrl = documentsPath.appendingPathComponent("apollo_cache.sqlite")    
} catch {
		print("Error creating ApolloSQLite Client: \(error)")
}

Next, we'll need the fileUrl to initialize the SQLite cache.

// Network.swift

let sqliteCache = try SQLiteNormalizedCache(fileURL: fileUrl)

Once this is done, let's create an ApolloStore with the sqliteCache we juste created.

// Network.swift

let store = ApolloStore(cache: sqliteCache)

If we take a look at Apollo's documentation on the ApolloClient class, we have two ways of instantiating an ApolloClient. One is by only providing the URL of our server, and the other one is by providing two arguments: a NetworkTransport and an ApolloStore. We'll be creating the ApolloClient the second way, as we need to specify the caching method as SQLiteCache. We already have the ApolloStore, but not the NetworkTransport. Let's create that.

A NetworkTransport is how you send your fetch request to the server. With Apollo, we can send the request three different ways:

• With RequestChainNetworkTransport, which is the standard way and uses HTTP to send the request.
• With WebSocketTransport, which uses WebSocket and allows us to get instant updates from the server. If you use this method, you'll need to add the ApolloWebSocket library to your project.
• With SplitNetworkTransport, which is a mix of RequestChainNetworkTransport and WebSocketTransport. If you use this method, you'll need to add the ApolloWebSocket library to your project.

You can read more about NetworkTransport in Apollo's documentation about Advanced Client Creation. In our case, we'll use the RequestChainNetworkTransport method. We'll pass a DefaultInterceptorProvider with our store as the interceptorProvider, as well as the endpointURL of our server.

// Network.swift

let normalTransport: RequestChainNetworkTransport = RequestChainNetworkTransport(interceptorProvider: DefaultInterceptorProvider(store: store), endpointURL: URL(string: url)!)

Finally, we'll return an ApolloClient instance created by passing the normalTransport variable and the store as arguments.

// Network.swift

return ApolloClient(networkTransport: normalTransport, store: store)

Since we're in a do catch statement, the catch statement doesn't return anything, and Xcode is complaingin. Even if creating the apolloSQLite client fails, we also need to return an ApolloClient.

Let's return the ApolloClient we created by using the server URL, that we named apollo.

// Network.swift

} catch {
		print("Error creating ApolloSQLite Client: \(error)")
		return apollo
}

Below is the final code for the apolloSQLite instance that we're creating.

// Network.swift

private(set) lazy var apolloSQLite: ApolloClient = {
    do {
        let documentsPath = try FileManager.default.url(for: .documentDirectory, in: .userDomainMask, appropriateFor: nil, create: false)
        let fileUrl = documentsPath.appendingPathComponent("apollo_cache.sqlite")

        let sqliteCache = try SQLiteNormalizedCache(fileURL: fileUrl)

        let store = ApolloStore(cache: sqliteCache)

        let normalTransport: RequestChainNetworkTransport = RequestChainNetworkTransport(interceptorProvider: DefaultInterceptorProvider(store: store), endpointURL: URL(string: url)!)

        return ApolloClient(networkTransport: normalTransport, store: store)
    } catch {
        print("Error creating ApolloSQLite Client: \(error)")
        return apollo
    }
}()

Use apolloSQLite

The final step is to update the ApolloClient we're using in our view model to fetch the data. Let's go to the LaunchViewModel.

In our fetch function, instead of calling apollo, we'll be calling apolloSQLite, so that the data fetched is saved locally in the SQLite file.

// LaunchViewModel.swift

Network.shared.apolloSQLite.fetch(query: LaunchListQuery()) { result in
	// More code...
}

Test the code

Now, let's just test our code! Build your application once with a network connection, and make sure that all the data is displayed correctly. Then, build the app again, but this time, disconnect from the Internet. The data should have been saved in the SQLite file and you should data on your screen, even offline. Sweet!