App.tsx

import React, { FC } from 'react';
import { ApolloProvider } from '@apollo/react-hooks';
import {
  InMemoryCache,
  ApolloClient,
  HttpLink,
  split,
} from 'apollo-boost';

// WS link from example here - https://github.com/enisdenjo/graphql-ws#apollo-client
class WebSocketLink extends ApolloLink {
 ...
}

const wsLink = new WebSocketLink({
  url: 'wss://{api-id}.execute-api.{region}.amazonaws.com/{stageName}',
  connectionParams: () => ({
    headers: {...}
  }),
  options: {
    reconnect: true
  }
});

 const httpLink = new HttpLink({
   uri: 'YOUR_HTTPS_GRAPHQL_ENDPOINT_HERE',
   headers: {...}
 });

const link = split(
  ({ query }) =>
    query.definitions.some((d) =>
      d.kind === 'OperationDefinition' &&
      d.operation === 'subscription'
    ),
    wsLink,
    httpLink
);

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

const App: FC = () => (
  <ApolloProvider client={client}>
    <div>
      Ready To Start Listening For Subscriptions
    </div>
  </ApolloProvider>
);

export default App;