appsync-apollo-links

This is an demonstrating the ability to pair back the libraries you use to the minimum supported without offline support. This example uses the apollo client with react hooks.

This example is built on Create React App.

Configuration

You MUST create a new src/aws-exports.ts file containing the settings, in this example is the cognito pool setup.

export default {
  aws_user_pools_id: "XX-XXXX-X_abcd1234",
  aws_cognito_identity_pool_id:
    "XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab",
  aws_user_pools_web_client_id: "a1b2c3d4e5f6g7h8i9j0k1l2m3",
  aws_cognito_region: "XX-XXXX-X",
  aws_mandatory_sign_in: true,
  oauth: {
    domain: "YOUR_DOMAIN_NAME.auth.XX-XXXX-X.amazoncognito.com",
    scope: [
      "phone",
      "email",
      "profile",
      "openid",
      "aws.cognito.signin.user.admin"
    ],
    redirectSignIn: "https://localhost:3000/auth/callback",
    redirectSignOut: "https://localhost:3000/auth/logout",
    responseType: "code" // or 'token', note that REFRESH token will only be generated when the responseType is code
  },
  aws_appsync_graphqlEndpoint: "https://XXXX.appsync-api.XX-XXXX-X.amazonaws.com/graphql",
  aws_appsync_region: "XX-XXXX-X",
  aws_appsync_authenticationType: "AMAZON_COGNITO_USER_POOLS"
}

Development

npm start

Subscriptions

I used the Event App example schema and added one extra subscription to the Subscription type.

	subscribeToEvents: Event
		@aws_subscribe(mutations: ["createEvent"])

Code

The core of this solution is in App.tsx file.

import React from "react";
import "./App.css";
import awsconfig from "./aws-exports";
import { ApolloLink } from "apollo-link";
import { createSubscriptionHandshakeLink } from "aws-appsync-subscription-link";
import { createAuthLink } from "aws-appsync-auth-link";
import ApolloClient from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
import { ApolloProvider } from "react-apollo";
import EventList from "./EventList";
import LatestEvents from "./LatestEvents";

import Auth from "@aws-amplify/auth";
import useAmplifyAuth from "./useAmplifyAuth";

Auth.configure(awsconfig);

const getAccessToken = (): Promise<string> => {
  return Auth.currentSession().then(session => {
    return session.getAccessToken().getJwtToken();
  });
};

const config = {
  url: awsconfig.aws_appsync_graphqlEndpoint,
  region: awsconfig.aws_appsync_region,
  auth: {
    type: awsconfig.aws_appsync_authenticationType,
    jwtToken: getAccessToken
  },
  disableOffline: true
};

const link = ApolloLink.from([
  // @ts-ignore
  createAuthLink(config),
  // @ts-ignore
  createSubscriptionHandshakeLink(config)
]);

export const client = new ApolloClient({
  link,
  cache: new InMemoryCache({ addTypename: false })
});

const App = () => {
  const {
    state: { user },
    handleSignout
  } = useAmplifyAuth();

  return !user ? (
    <div>
      <button onClick={() => Auth.federatedSignIn()}>Open Hosted UI</button>
    </div>
  ) : (
    <div className="App">
      <button onClick={handleSignout}>Sign Out</button>
      <EventList />
      <LatestEvents />
    </div>
  );
};

const WithProvider = () => (
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>
);

export default WithProvider;

Links

• https://create-react-app.dev/docs/adding-typescript/
• https://www.apollographql.com/docs/react/development-testing/static-typing/
• awslabs/aws-mobile-appsync-sdk-js#450
• https://github.com/awslabs/aws-mobile-appsync-sdk-js#using-authorization-and-subscription-links-with-apollo-client-no-offline-support

License

This code was authored by Mark Wolfe and licensed under the Apache 2.0 license.