Using GraphQL with Apollo Client iOS SDK

Apollo is a GraphQL client that helps you consume GraphQL APIs.

In this document, we will learn how to use the Apollo client and Contentstack GraphQL queries to power the content of your iOS SDK apps.

Prerequisites

Download your schema

The first step is to construct a GraphQL schema file for your content type and include this file in your project. This schema file is a JSON file named schema.json that contains the results of introspection queries and is used by Apollo iOS for the code generation process.

apolloClient has generic fetch(query:) methods that take a query argument conforming to the Apollo.GraphQLQuery protocol. To generate Swift code for your query models (you need not manually create them), download the GraphQL schema for your content model using Apollo CLI, and place it in the root directory of your Xcode project.

apollo schema:download --endpoint "https://graphql.contentstack.com/stacks/<API_KEY>?access_token=<ENVIRONMENT_SPECIFIC_DELIVERY_TOKEN>&environment=<ENVIRONMENT_NAME>"

Write GraphQL queries

Contentstack provides a GraphQL playground, which is a GraphiQL interface, to test your GraphQL queries in your browser. Use this interface to write and test your queries.

Open a browser of your choice and hit this URL after filling the required details:

https://www.contentstack.com/docs/apis/graphql-content-delivery-api/explorer/

Note: If you have pieces of data you may want to reuse in multiple places, make use of fragments. Refer the Using fragments doc for more details.

Next, we will generate Swift model types from your schema and queries.

Generate Swift query models

Once your queries are working and return the expected data, the next step is to add a code generation build step to your target by invoking Apollo as part of the Xcode build process.

Now, you need to, create a build step and make sure that it runs before ‘Compile Sources’. To do so, perform the steps given below:

  1. Click on the Build Phases settings tab under your application’s TARGETS section.
  2. Click on the ‘+’ (Plus) icon and select New Run Script Phase.
  3. Create a run script and change its name to ‘Generate Apollo GraphQL API’.
  4. Drag this script just above Compile Sources. This opens the script area. Add the following content into it:
    APOLLO_FRAMEWORK_PATH="$(eval find $FRAMEWORK_SEARCH_PATHS -name "Apollo.framework" -maxdepth 1)"
    
    if [ -z "$APOLLO_FRAMEWORK_PATH" ]; then
      echo "error: Couldn't find Apollo.framework in FRAMEWORK_SEARCH_PATHS; make sure to add the framework to your project."
      exit 1
    fi
    
    cd "${SRCROOT}/${TARGET_NAME}"
    $APOLLO_FRAMEWORK_PATH/check-and-run-apollo-cli.sh codegen:generate --queries="$(find . -name '*.graphql')" --schema=schema.json API.swift
    This step allows you to check whether the version of Apollo installed on your system is compatible with the current version of the framework installed in your project. If it isn’t, you will receive a warning.

Now, whenever you build your project, it executes apollo-codegen, which ensures that you will always have an updated set of Swift models and queries.

Creating ApolloClient

After downloading the schema and creating the queries, create a single shared instance of ApolloClient and point it at the GraphQL server.

To do this, define a global variable in AppDelegate.swift by using an immediately invoked closure as follows:

let apollo: ApolloClient = {
  let url = URL(string: "https://graphql.contentstack.com/stacks/api_key?access_token=environment-specific_delivery_token&environment=environment_name")!
  return ApolloClient(networkTransport: HTTPNetworkTransport(url: url))
}()

Queries are represented as instances of generated classes conforming to the GraphQLQuery protocol. When you pass a query object to the ApolloClient.fetch() method, upon a successful API response, the method returns typed results.

Refer the Apollo iOS SDK documentation to see the other arguments of the apolloClient.fetch(query:) method.

Example app

We have created an example app that demonstrates the usage of Contentstack GraphQL queries and Apollo iOS SDK. Refer this guide and create your own apps easily.

Was this article helpful?
top-arrow