How do i use Apollo-IOS Subscriptions with AWS Appsync

RickardA · August 19, 2021, 8:36am

Hi,

Im pretty new to the whole GraphQL, AWS Appsync eco system.

I have an IOS app that i want to connect to AWS Appsync and use their functionality.

I have managed to setup Apollo-IOS so that i can do the basic CRUD operations.
But i want to get subscriptions working as well. I followed the basic guide with authentication that is available in the Apollo-IOS documentation.

That guide didn’t really work for me. Se below setup of the Apollo Client:

class Network {
  
    static let shared = Network()
        
    private(set) lazy var apollo: ApolloClient = {
        let client = URLSessionClient()
        let cache = InMemoryNormalizedCache()
        let store = ApolloStore(cache: cache)
        let provider = NetworkInterceptorProvider(client: client, store: store)
        let url = URL(string: "https://someURL.appsync-api.eu-west-1.amazonaws.com/graphql")!
        let transport = RequestChainNetworkTransport(interceptorProvider: provider,
                                                     endpointURL: url)
        
        let socketURL = URL(string: "wss://someURL.appsync-realtime-api.eu-west-1.amazonaws.com/graphql")!
        var request = URLRequest(url: socketURL)
        let webSocketClient = DefaultWebSocket(request: request)
        let authPayload = ["x-api-key": "someAPIKey", "host:" : "someURL.appsync-api.eu-west-1.amazonaws.com"]
        let webSocketTransport = WebSocketTransport(websocket: webSocketClient, connectingPayload: authPayload)
        
        let splitNetworkTransport = SplitNetworkTransport(
          uploadingNetworkTransport: transport,
          webSocketNetworkTransport: webSocketTransport
        )
        
        return ApolloClient(networkTransport: splitNetworkTransport, store: store)
    }()
}

This setup resulted in the following errors:

Websocket error: Unprocessed message {"payload":{"errors":[{"message":"Both, the \"header\", and the \"payload\" query string parameters are missing","errorCode":400}]},"type":"connection_error"}. Error: nil

So i read up on how the authentication works for the subscriptions on the AWS Appsync API and came up with this solution:

import Apollo
import Foundation

class Network {
  
    static let shared = Network()
        
    private(set) lazy var apollo: ApolloClient = {
        let client = URLSessionClient()
        let cache = InMemoryNormalizedCache()
        let store = ApolloStore(cache: cache)
        let provider = NetworkInterceptorProvider(client: client, store: store)
        let url = URL(string: "https://someURL.appsync-api.eu-west-1.amazonaws.com/graphql")!
        let transport = RequestChainNetworkTransport(interceptorProvider: provider,
                                                     endpointURL: url)
        
        var urlWithQueries = URLComponents(string: "wss:/someURL.appsync-realtime-api.eu-west-1.amazonaws.com/graphql")
        urlWithQueries!.queryItems = [URLQueryItem(name: "header", value: String("{\"host\":\"someURL.appsync-api.eu-west-1.amazonaws.com\",\"x-api-key\":\"someAPIKey\"}").toBase64URL()), URLQueryItem(name:"payload", value: String("{}").toBase64URL())]
        let socketURL = urlWithQueries!.url!
        var request = URLRequest(url: socketURL)
        let webSocketClient = DefaultWebSocket(request: request)
        let webSocketTransport = WebSocketTransport(websocket: webSocketClient)
        
        let splitNetworkTransport = SplitNetworkTransport(
          uploadingNetworkTransport: transport,
          webSocketNetworkTransport: webSocketTransport
        )
        
        return ApolloClient(networkTransport: splitNetworkTransport, store: store)
    }()
}

extension String {
    func toBase64URL() -> String {
        var result = Data(self.utf8).base64EncodedString()
        result = result.replacingOccurrences(of: "+", with: "-")
        return result
    }
}

class NetworkInterceptorProvider: DefaultInterceptorProvider {
    override func interceptors<Operation: GraphQLOperation>(for operation: Operation) -> [ApolloInterceptor] {
        var interceptors = super.interceptors(for: operation)
        interceptors.insert(TokenAddingInterceptor(), at: 0)
        return interceptors
    }
}


class TokenAddingInterceptor: ApolloInterceptor {
    func interceptAsync<Operation: GraphQLOperation>(
        chain: RequestChain,
        request: HTTPRequest<Operation>,
        response: HTTPResponse<Operation>?,
        completion: @escaping (Result<GraphQLResult<Operation.Data>, Error>) -> Void) {
        
        request.addHeader(name: "x-api-key", value: "someAPIKey")
        
        chain.proceedAsync(request: request,
                         response: response,
                         completion: completion)
    }
}

The above solution seems to work when it comes to authentication and so on, i don’t get the missing headers error anymore. Instead i get the following error when trying to start a subscription:

Websocket error: Unprocessed message {"type":"error","payload":{"errors":[{"errorType":"UnsupportedOperation","message":"unknown not supported through the realtime channel"}]}}. Error: nil

I have made a fair amount of research and i found that there is a similar issue on the JS version.
But that issue was placed a year ago and is still open.

I also found one guy on here that seemed to have the same problem as i am having right now, but could not really understand how he solved it.

github.com/apollographql/apollo-feature-requests

Document how to use client with AppSync

opened 08:38PM - 28 Apr 20 UTC

StefanSmith

help-wanted

Recently, AWS AppSync published details of their websocket subscription workflow… (https://docs.aws.amazon.com/appsync/latest/devguide/real-time-websocket-client.html). It is now possible to implement a GraphQL client using only Apollo libraries, without the need for AppSync's own SDK. My team did this recently in order to side-step certain AppSync SDK bugs. I think it would be useful to others if this was available somewhere in Apollo's documentation. I provide it here for the Apollo team to disseminate if possible. There is no offline support in this example. A number of customizations were required in order to make it work: - Set connection timeout (default 30 seconds) to 5 minutes since AppSync's keep alive messages are not so frequent - Override `SubscriptionClient` from `subscriptions-transport-ws` to use UUID operation IDs as this is recommended by AppSync - Override browser `WebSocket` class to compute URL on instantiation since `SubscriptionClient` has an invariant websocket URL but `header` query string parameter needs to stay in sync with JWT token - Also override browser `WebSocket` class to filter out messages with `data.type === 'start_ack'` since `SubscriptionClient` cannot handle this type of message sent by AppSync - Schedule async refresh of JWT token every time websocket is instantiated, in case the token has expired. Unfortunately, there is no way to await the refresh so instead we rely on `SubscriptionClient` to retry the websocket connection on authorization failure. Eventually, a connection attempt will be made with a valid JWT token. - Use custom `SubscriptionClient` middleware to modify operations to include serialized GraphQL query and variables in a `data` property and to add authorization information to `extensions` *Example usage* ``` import {ApolloClient, InMemoryCache} from "@apollo/client"; import {createAppSyncHybridLink} from "./appSyncHybridLink"; export const createAppSyncApolloClient = async ({appSyncApiUrl, getJwtToken, cacheConfig, connectToDevTools}) => new ApolloClient({ link: await createAppSyncHybridLink({appSyncApiUrl, getJwtToken}), cache: new InMemoryCache(cacheConfig), connectToDevTools } ); // Note: getJwtToken can be asynchronous, for example with Amplify.js (https://docs.amplify.aws/lib/q/platform/js): // const getJwtToken = async () => (await Auth.currentSession()).getIdToken().getJwtToken() ``` ``` // appSyncHybridLink.js import {ApolloLink} from "@apollo/client"; import {createAppSyncSubscriptionWebsocketLink} from "./appSyncSubscriptionWebSocketLink"; import {createAppSyncHttpLink} from "./appSyncHttpLink"; import {getMainDefinition} from "@apollo/client/utilities"; export const createAppSyncHybridLink = async ({appSyncApiUrl, getJwtToken}) => ApolloLink.split( isSubscriptionOperation, await createAppSyncSubscriptionWebsocketLink({appSyncApiUrl, getJwtToken}), createAppSyncHttpLink({appSyncApiUrl, getJwtToken}) ); const isSubscriptionOperation = ({query}) => { const {kind, operation} = getMainDefinition(query); return kind === 'OperationDefinition' && operation === 'subscription'; }; ``` ``` // appSyncHttpLink.js import {setContext} from "@apollo/link-context"; import {ApolloLink, HttpLink} from "@apollo/client"; export const createAppSyncHttpLink = function ({appSyncApiUrl, getJwtToken}) { const authorizationHeaderLink = setContext(async (request, previousContext) => ({ ...previousContext, headers: { ...previousContext.headers, Authorization: await getJwtToken() } })); return ApolloLink.concat( authorizationHeaderLink, new HttpLink({uri: appSyncApiUrl}) ); }; ``` ``` // appSyncSubscriptionWebSocketLink.js import {WebSocketLink} from "@apollo/link-ws"; import {UUIDOperationIdSubscriptionClient} from "./UUIDOperationIdSubscriptionClient"; import {createAppSyncAuthorizedWebSocket} from "./appSyncAuthorizedWebSocket"; import {cacheWithAsyncRefresh} from "./asyncUtils"; import {createAppSyncGraphQLOperationAdapter} from "./appSyncGraphQLOperationAdapter"; const APPSYNC_MAX_CONNECTION_TIMEOUT_MILLISECONDS = 5 * 60 * 1000; export const createAppSyncSubscriptionWebsocketLink = async ({appSyncApiUrl, getJwtToken}) => { const appSyncApiHost = new URL(appSyncApiUrl).host; const getAppSyncAuthorizationInfo = async () => ({host: appSyncApiHost, Authorization: await getJwtToken()}); return new WebSocketLink( new UUIDOperationIdSubscriptionClient( `wss://${(appSyncApiHost.replace('appsync-api', 'appsync-realtime-api'))}/graphql`, {timeout: APPSYNC_MAX_CONNECTION_TIMEOUT_MILLISECONDS, reconnect: true, lazy: true}, // We want to avoid expired authorization information being used but SubscriptionClient synchronously // instantiates websockets (on connection/reconnection) so the best we can do is schedule an async refresh // and suffer failed connection attempts until a fresh token has been retrieved createAppSyncAuthorizedWebSocket(await cacheWithAsyncRefresh(getAppSyncAuthorizationInfo)) ).use([createAppSyncGraphQLOperationAdapter(getAppSyncAuthorizationInfo)]) ); }; ``` ``` // UUIDOperationIdSubscriptionClient.js // AppSync recommends using UUIDs for Subscription IDs but SubscriptionClient uses an incrementing number import {SubscriptionClient} from "subscriptions-transport-ws"; import {v4 as uuid4} from "uuid"; export class UUIDOperationIdSubscriptionClient extends SubscriptionClient { generateOperationId() { return uuid4(); } } ``` ``` // asyncUtils.js export const cacheWithAsyncRefresh = async asyncSupplier => { let value; const asyncRefresh = async () => value = await asyncSupplier(); // Warm cache await asyncRefresh(); return () => { asyncRefresh().catch(console.error); return value; }; }; ``` ``` // appSyncGraphQLOperationAdapter.js import * as graphqlPrinter from "graphql/language/printer"; export const createAppSyncGraphQLOperationAdapter = getAppSyncAuthorizationInfo => ({ applyMiddleware: async (options, next) => { // AppSync expects GraphQL operation to be defined as a JSON-encoded object in a "data" property options.data = JSON.stringify({ query: typeof options.query === 'string' ? options.query : graphqlPrinter.print(options.query), variables: options.variables }); // AppSync only permits authorized operations options.extensions = {'authorization': await getAppSyncAuthorizationInfo()}; // AppSync does not care about these properties delete options.operationName; delete options.variables; // Not deleting "query" property as SubscriptionClient validation requires it next(); } }); ``` ``` // appSyncAuthorizedWebSocket.js import {asBase64EncodedJson} from "./encodingUtils"; export const createAppSyncAuthorizedWebSocket = (getAppSyncAuthorizationInfo) => { return class extends WebSocket { // SubscriptionClient takes a fixed websocket url so we append query string parameters every time the websocket // is created, in case the authorization information has changed. constructor(url, protocols = undefined) { super( `${url}?header=${asBase64EncodedJson(getAppSyncAuthorizationInfo())}&payload=${asBase64EncodedJson({})}`, protocols ); } // AppSync acknowledges GraphQL subscriptions with "start_ack" messages but SubscriptionClient cannot handle them set onmessage(handler) { super.onmessage = event => { if (event.data) { const data = this._tryParseJsonString(event.data); if (data && data.type === 'start_ack') { return; } } return handler(event); }; } _tryParseJsonString(jsonString) { try { return JSON.parse(jsonString); } catch (e) { return undefined; } } }; }; ``` ``` // encodingUtils.js export const asBase64EncodedJson = value => btoa(JSON.stringify(value)); ```

Is there anyone here that could please help me solve this as i am wanting to use Apollo-IOS in my project as the Amplify framework does not seem to fit my needs.

This is my first time posting in forums like this, so please just let me know if i have to provide more information.

Marcos_Meng · May 19, 2022, 1:48am

I ended that with this solution.

Topic		Replies	Views
Using Apollo with AppSync directly on iOS Help client , mobile , ios	9	3452	May 14, 2022
[SOLVED] Using `client.subscribe` does not work? (to AppSync, from Node) Help client , web	5	4354	November 25, 2023
Apollo 1.0.1, iOS, AWS AppSync Help client , mobile , ios	0	321	October 18, 2022
Hook useSubscription can not found Appsync GraphQL Help client , web	0	635	April 23, 2022
Subscription with "graphql-ws" protocol Help client , mobile , ios	1	1628	December 6, 2021

How do i use Apollo-IOS Subscriptions with AWS Appsync

Related topics