Updating README for Using Authorization and Subscription links with Apollo Client V3 (#716)

Co-authored-by: Tyler Austin <austyle@amazon.com>

Author: tyler-austin

README.md

@@ -6,15 +6,15 @@
 
 You can use any HTTP or GraphQL client to connect to a GraphQL API on AppSync.
 
-For front-end web and mobile development, we recommend using the  [Amplify](https://aws-amplify.github.io/)  clients which are optimized to connect to the AppSync backend.
+For front-end web and mobile development, we recommend using the [Amplify](https://aws-amplify.github.io/) clients which are optimized to connect to the AppSync backend.
 
-* For DynamoDB data sources, use the DataStore category in the Amplify client. It provides the best developer experience and built-in conflict detection and resolution.
-* For non-DynamoDB data sources in scenarios where you have no offline requirements, use the API (GraphQL) category in the Amplify client.
-* For use cases where you are utilizing the Apollo V3 client, use the Apollo Links in this repository to help with authorization and subscriptions.
+- For DynamoDB data sources, use the DataStore category in the Amplify client. It provides the best developer experience and built-in conflict detection and resolution.
+- For non-DynamoDB data sources in scenarios where you have no offline requirements, use the API (GraphQL) category in the Amplify client.
+- For use cases where you are utilizing the Apollo V3 client, use the Apollo Links in this repository to help with authorization and subscriptions.
 
 ## [AWS AppSync](https://aws.amazon.com/appsync/) Links for Apollo V3
 
-If you would like to use the [Apollo JavaScript client version 3](https://www.apollographql.com/docs/react/) to connect to your AppSync GraphQL API, this repository (on the current stable branch) provides Apollo links to use the different AppSync authorization modes, and to setup subscriptions over web sockets. Please log questions for this client SDK in this repo and questions for the AppSync service in the  [official AWS AppSync forum](https://forums.aws.amazon.com/forum.jspa?forumID=280&start=0) .
+If you would like to use the [Apollo JavaScript client version 3](https://www.apollographql.com/docs/react/) to connect to your AppSync GraphQL API, this repository (on the current stable branch) provides Apollo links to use the different AppSync authorization modes, and to setup subscriptions over web sockets. Please log questions for this client SDK in this repo and questions for the AppSync service in the [official AWS AppSync forum](https://forums.aws.amazon.com/forum.jspa?forumID=280&start=0) .
 
 ![npm](https://img.shields.io/npm/dm/aws-appsync-auth-link.svg)
 ![npm](https://img.shields.io/npm/dm/aws-appsync-subscription-link.svg)
@@ -88,23 +88,23 @@ npx pod-install
 
 Please visit the [documentation with the Amplify Framework](https://aws-amplify.github.io/docs/js/api) for detailed instructions.
 
-* [React / React Native](#react--react-native)
-* [Using Authorization and Subscription links with Apollo Client V3 (No offline support)](#using-authorization-and-subscription-links-with-apollo-client-v3-no-offline-support)
-  * [Queries and Subscriptions using Apollo V3](#queries-and-subscriptions-using-apollo-v3)
-* [Creating a client (Apollo V2)](#creating-a-client-apollo-v2)
-  * [Queries](#queries)
-  * [Mutations & optimistic UI (with graphqlMutation helper)](#mutations--optimistic-ui-with-graphqlmutation-helper)
-  * [Mutations & optimistic UI (without graphqlMutation helper)](#mutations--optimistic-ui-without-graphqlmutation-helper)
-  * [Subscriptions (with buildSubscription helper)](#subscriptions-with-buildsubscription-helper)
-  * [Subscriptions (without buildSubscription helper)](#subscriptions-without-buildsubscription-helper)
-* [Offline configuration (Apollo V2)](#offline-configuration-apollo-v2)
-  * [Error handling](#error-handling)
-  * [Custom storage engine](#custom-storage-engine)
-  * [Offline helpers](#offline-helpers)
-* [Vue](#vue)
-  * [main.js](#mainjs)
-  * [App.vue](#appvue)
-  * [connected component](#connected-component)
+- [React / React Native](#react--react-native)
+- [Using Authorization and Subscription links with Apollo Client V3 (No offline support)](#using-authorization-and-subscription-links-with-apollo-client-v3-no-offline-support)
+  - [Queries and Subscriptions using Apollo V3](#queries-and-subscriptions-using-apollo-v3)
+- [Creating a client (Apollo V2)](#creating-a-client-apollo-v2)
+  - [Queries](#queries)
+  - [Mutations & optimistic UI (with graphqlMutation helper)](#mutations--optimistic-ui-with-graphqlmutation-helper)
+  - [Mutations & optimistic UI (without graphqlMutation helper)](#mutations--optimistic-ui-without-graphqlmutation-helper)
+  - [Subscriptions (with buildSubscription helper)](#subscriptions-with-buildsubscription-helper)
+  - [Subscriptions (without buildSubscription helper)](#subscriptions-without-buildsubscription-helper)
+- [Offline configuration (Apollo V2)](#offline-configuration-apollo-v2)
+  - [Error handling](#error-handling)
+  - [Custom storage engine](#custom-storage-engine)
+  - [Offline helpers](#offline-helpers)
+- [Vue](#vue)
+  - [main.js](#mainjs)
+  - [App.vue](#appvue)
+  - [connected component](#connected-component)
 
 ### React / React Native
 
@@ -119,10 +119,13 @@ For versions of the Apollo client newer than 2.4.6 you can use custom links for
 import { createAuthLink } from "aws-appsync-auth-link";
 import { createSubscriptionHandshakeLink } from "aws-appsync-subscription-link";
 
-import { ApolloLink } from "apollo-link";
-import { createHttpLink } from "apollo-link-http";
-import ApolloClient from "apollo-client";
-import { InMemoryCache } from "apollo-cache-inmemory";
+import {
+  ApolloProvider,
+  ApolloClient,
+  InMemoryCache,
+  HttpLink,
+  ApolloLink,
+} from "@apollo/client";
 
 import appSyncConfig from "./aws-exports";
 
@@ -135,7 +138,7 @@ const auth = {
   // credentials: async () => credentials, // Required when you use IAM-based auth.
 };
 
-const httpLink = createHttpLink({ uri: url });
+const httpLink = new HttpLink({ uri: url });
 
 const link = ApolloLink.from([
   createAuthLink({ url, region, auth }),
@@ -146,6 +149,10 @@ const client = new ApolloClient({
   link,
   cache: new InMemoryCache(),
 });
+
+const ApolloWrapper = ({ children }) => {
+  return <ApolloProvider client={client}>{children}</ApolloProvider>;
+};
 ```
 
 #### Queries and Subscriptions using Apollo V3
@@ -561,8 +568,8 @@ export default graphql(listPosts, {
 
 When using the AWS AppSync SDK offline capabilities (e.g. `disableOffline: false`), you can provide configurations for the following:
 
-* Error handling
-* Custom storage engine
+- Error handling
+- Custom storage engine
 
 #### Error handling