Implementation of GraphQL subscriptions on React Native using Apollo Client with a Lambda GrahphQL Server

graphql aws lambda apollo

№: 22

24.2022

GraphQL queries and mutations to an AWS Lambda GraphQL api can be achieved by implementing libraries such as Apollo Client. However, implementing subscriptions isn't as straight forward since the AWS Lambda is a serverless architecture. Implementing subscriptions can be done following the AWS implementation docs - although we don't want to go into that rabbit hole as well as the option of using AWS' Amplify JavaScript Libraries.

In our case, we would like to take advantage of Apollo Client's apis that offer useful features within a react application such as hooks, caching, and also since it's simpler (one can argue). 💁

Setup

To get started, working with queries and mutations can be achieved by following Apollo's documentation.. Where it get's interesting is once a subscription is needed to be made by the client.

First, we need to configure our Apollo client to make use of the Apollo links to connect to the AppSync api. These are: aws-appsync-auth-link and aws-appsync-subscription-link. The former provides authentication for the Apollo client to connect to the api while the later provides the subscription tooling that AWS Lambdas need to work with subscriptions, which we would have otherwise needed to implement ourselves.🤢

The example provided in the docs here is pretty straightforward. In our case, the auth provided to the Apollo links would look like:

const auth = {
  type: 'OPENID_CONNECT'
  jwtToken: async () => token, // Required when you use Cognito UserPools OR OpenID Connect. token object is obtained previously
};

Although, the only thing to note is that, since we need to provide a token to the client, we just pass in our token that retrieves the most current Open ID JWT to pass to our requests.

Thus:

const link = ApolloLink.from([
    createAuthLink({
        url: API_URL,
        region: AWS_REGION,
        auth: { type: 'OPENID_CONNECT', jwtToken: async () => await getToken() },
    }),
    createSubscriptionHandshakeLink(
        { url: API_URL, region: AWS_REGION, auth: { type: 'OPENID_CONNECT', jwtToken: async () => await getToken() } },
        httpLink,
    ),
])

This workaround was noted in this issue on Github.

Issues

• Unable to resolve module buffer:

  

This can be solved by installing buffer and adding it to to the App.tsx file as noted in here on Stack overflow.

import { Buffer } from 'buffer';

global.Buffer = Buffer;

Links

• AppSync subscriptions with ApolloClient in React
• Using Authorization and Subscription links with Apollo Client V3 (No offline support)
• Building a real-time WebSocket client