GraphQL, Auto Persisted Queries, CDN Support and Getting it work on Native App.

Henry Hong
Aug 1, 2019 · 7 min read

The challenges of API Integration

To cater the rapidly changed requirements and short release cycle nowadays, we need a powerful version controlled API yet optimized to be high performance in terms of latency and data consumption.

Image for post
Image for post
Image for post
Image for post
Request can be expansive

Image for post
Image for post
High Latency for Peaks due to Breaking News
Image for post
Image for post
Redundant traffic and data consumption on client

Persisted Queries

Persisted Queries is designed to address this issue. `sha256hash` value will be generated with the query document. The query document will be stored in a table in server side, it can be lookup by corresponding hash value.

// payload example for a GraphQL Query Request
{
"extensions": {
"persistedQuery": {
"version": 1,
"sha256Hash": "53e3b...fba805ce"
}
},
"variables": {
"name": "2.....0"
}
}
Image for post
Normal Queries vs Persisted Queries
  1. request with corresponding hash value and variables

Auto Persisted Queries

Since the query document changes from time to time, maintaining the query mapping manually is not practical at all.
Auto Persisted Queries (aka. APQs) allows the query mapping record to be added from a normal request.

  • otherwise, return a special error message
Image for post
Image for post
Graphql APQs interactive diagram
{
"query": "query HeroName($episode: Episode) {\n hero(episode: $episode) {\n __typename\n name\n }\n}",
"extensions": {
"persistedQuery": {
"version": 1,
"sha256Hash": "f6e76545cd03aa21368d9969cb39447f6e836a16717823281803778e7805d671"
}
},
"variables": {
"episode": "EMPIRE"
}
}
Image for post
Image for post
Implementation of GraphQLOperation

APQs on Native App

Despite the fact that GraphQL was originally designed for native app, APQs was not yet implemented or working well in Apollo Mobile SDK.


  1. Integrate APQs with CDN
ApolloClient.builder()
.enableAutoPersistedQueries(true)
.build()
ApolloClient.builder()
.useHttpGetMethodForQueries(true)
.enableAutoPersistedQueries(true)
.build()
// GET query string sample
// When query is missing or Not support
https://<graphql_endpoint>?query=<the_very_large_query_document>&variable=<query variable>&extension=<extension>
// When query exists in table
https://<graphql_endpoint>?variable=<query variable>&extension=<extension>

Solution to CDN Integration

Cloudflare requires URI not exceeding 32KB

  1. If failed, retry with POST with full query document.

Coding for Android SDK

We’ve done a fix for CDN support and it can be found in SCMP Github and PR#1376 to Apollo official.


// usage
ApolloClient.builder()
.useHttpGetMethodForPersistedQueries(true)
.enableAutoPersistedQueries(true)
.build()

Coding for iOS SDK

We’ve implemeneted the APQs and have it support with CDN according to the solution mentioned above, it can be found in support_get_apqs_working and PR#608, #583 to Apollo official.

  1. Update apollo run-script to generate operationIdentifier (sha256hash)
// Podfile
pod ‘Apollo’, :git => ‘https://github.com/scmp-contributor/apollo-ios.git', :commit => ‘04e9ca58da9257e89294cc29fec2cacec3ea9e90’
// Usage
let networkTransport = HTTPNetworkTransport(
url: url,
configuration: sessionConfiguration,
useGETForQueries: false,
enableAutoPersistedQueries: true,
useGETForPersistedQueryRetry: true)

let client = ApolloClient(networkTransport: networkTransport)

Image for post
Image for post
operationIdentifier is missing in API.swift
$(find $APOLLO_FRAMEWORK_PATH/ -name 'check-and-run-apollo-cli.sh') codegen:generate --queries="$(find . -name '*.graphql')" --schema=schema.json --operationIdsPath=operationIdsPath.json --mergeInFieldsFromFragmentSpreads API.swift
Image for post
Image for post
operationIdentifier is generated in API.swift
Image for post
Image for post
Charles logs

SCMP — Inside the Wonton

Applying Data, Product, and Technology to build the best…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store