GraphQL in iOS — Part 2: Use GraphQL in iOS

This is the part that will show how to integrate GraphQL to your iOS application. We will use Apollo, a framework that allows you to query, mutate GraphQL server and returns results as Swift types.

1. Install apollo-codegen:

First, we need to install apollo-codegen, a tool to generate code and annotations from GraphQL schema and query documents. Now we open Terminal and type this: npm install -g apollo-codegen

2. Install Apollo framework

Create your Xcode project. I’ve already created a project called GraphQLExample. To add Apollo to this project, I used Cocoapods. Add this line to pod file

pod 'Apollo'

Run “pod install” to install Apollo. We need to add a new Run Script Phase. Open Build Phases in the target settings and create a new Run Script.

Rename that new script to Generate Apollo GraphQL API. Copy the following code snippet to the shell:

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-codegen.sh generate $(find . -name '*.graphql') --schema schema.json --output API.swift

Build the project to finish installing.

3. Add schema file:

Next, you need to add the schema file of your GraphQL server to the project. Go to your Graph.cool dashboard to get the endpoint link. This is a link with the format https://api.graph.cool/simple/v1/xxx. Open Terminal and type this:

apollo-codegen download-schema SIMPLE_API_ENDPOINT --output schema.json

This will download a file name schema.json to your computer. Add this file to the root of your Xcode project.

Now let’s code.

Open AppDelegate and add this to the top

Let’s talk a little bit about this project. It has a table view to display girl’s information, and can add a new girl or edit information of a girl.

Please ignore this stupid UI since this is just a small demo.

Now start with GraphQL. We’ll create a file which extension .graphql to keep all GraphQL commands.

The first time apollo-codegen run, it will create a file call API.swift in your project’s root folder. Although this file is in your folder already, you still need to add it to the project. Note: remember to uncheck option Copy items if needed.

Next, we will try with query information. Paste this code to your graphql file:

In GraphQL, fragment is a reusable unit that bundle a number of fields of a type. You can reuse a fragment to any query or mutation by using its name. When the query is executed, fragment will be replaced by all the fields contained within the fragment. Note: remember to put … before fragment’s name.

Build the project. Open API.swift, you’ll see a struct called GirlFullDetails and class GirlsDetailsQuery. These struct and class is generated by apollo-codegen, so you don’t need to do anything to create your own model to map with GraphQL syntax.

Open ViewController, create function queryAllGirls and paste this code

It’s very easy. In apollo.fetch function, pass your query object. The return result is what you defined in your query.

This is the UI for creating new data. Open graphql file and put this code:

Build the project to generate code into API.swift file. Open ViewController, add this code to create new girl information.

However, you might run into a problem that after the mutation executes successfully, the data on the app is not change. You go to the Graph.cool dashboard and saw the data is changed already, but the query in the app is still the same as before. That’s because Apollo framework has cached data locally, so it won’t affect if you execute the same query. To solve this, change your query code by passing the cachePolicy: apollo.fetch(query: girlDetailsQuery, cachePolicy: .fetchIgnoringCacheData).

For update the information, add the update mutation:

The call to update is the same as create.

This is the finish of some basic information about GraphQL and how to integrate to your iOS app. You might say that GraphQL may be the future and will replace REST soon. I’m not sure about this, but these 2 things are totally different. REST is a architecture, whereas GraphQL is a query language. If you want to know more about the differences between REST and GraphQL, take a look at this article: https://philsturgeon.uk/api/2017/01/24/graphql-vs-rest-overview/.

My sample project is at here: https://github.com/dzungnguyen1993/GraphQLExample

Thanks for reading!