docs(): mention graphql-ws, update links and example

Author: kamilmysliwiec

content/graphql/subscriptions.md

@@ -295,34 +295,30 @@ GraphQLModule.forRoot({
 }),
 ```
 
-#### Authorization over WebSocket
+#### Authentication over WebSocket
 
-Checking that the user is authenticated should be done inside the `onConnect` property of the `subscriptions` options (read [more](https://www.apollographql.com/docs/graphql-subscriptions/authentication/)).
-The `onConnect` will receive as first argument the `connectionParams` passed to the `SubscriptionClient` (read [more](https://www.apollographql.com/docs/react/data/subscriptions/#4-authenticate-over-websocket-optional)).
+Checking that the user is authenticated should be done inside the `onConnect` callback function that you can specify in the `subscriptions` options.
+
+The `onConnect` will receive as a first argument the `connectionParams` passed to the `SubscriptionClient` (read [more](https://www.apollographql.com/docs/react/data/subscriptions/#5-authenticate-over-websocket-optional)).
 
 ```typescript
 GraphQLModule.forRoot({
-  installSubscriptionHandlers: true,
   subscriptions: {
-    onConnect: (connectionParams) => {
-      // extract the token
-      const authToken = connectionParams.authToken;
-      // validate the token (e.g., signature, expiration for jwt)
-      if (!isValid(authToken)) {
-        throw new Error('Token is not valid');
-      }
-      // extract user information from token
-      const user = parseToken(authToken);
-      // return user info to add them to the context later
-      return { user };
-    },
+    'subscriptions-transport-ws': {
+      onConnect: (connectionParams) => {
+        const authToken = connectionParams.authToken;
+        if (!isValid(authToken)) {
+          throw new Error('Token is not valid');
+        }
+        // extract user information from token
+        const user = parseToken(authToken);
+        // return user info to add them to the context later
+        return { user };
+      },
+    }
   },
   context: ({ connection }) => {
-    // connection.context will be equal to what was returned by onConnect
-    // now user info is available inside context.req.user
-    return {
-      req: connection?.context ?? {},
-    };
+    // connection.context will be equal to what was returned by the "onConnect" callback
   },
 }),
 ```
@@ -331,3 +327,16 @@ The `authToken` in this example is only sent once by the client, when the connec
 All subscriptions made with this connection will have the same `authToken`, and thus the same user info.
 
 > warning **Note** There is a bug in `subscriptions-transport-ws` that allows connections to skip the `onConnect` phase (read [more](https://github.com/apollographql/subscriptions-transport-ws/issues/349)). You should not assume that `onConnect` was called when the user starts a subscription, and always check that the `context` is populated.
+
+If you're using the `graphql-ws` package, the signature of the `onConnect` callback will be slightly different:
+
+```typescript
+subscriptions: {
+  'graphql-ws': {
+    onConnect: (context: Context<any>) => {
+      const { connectionParams } = context;
+      // the rest will remain the same as in the example above
+    },
+  },
+},
+```

src/app/homepage/pages/microservices/custom-transport/custom-transport.component.html

@@ -197,8 +197,8 @@ <h4 appAnchor id="message-serialization"><span>Message serialization</span></h4>
 <p>If you need to add some custom logic around the serialization of responses on the client side, you can use a custom class that extends the <code>ClientProxy</code> class or one of its child classes. For modifying successful requests you can override the <code>serializeResponse</code> method, and for modifying any errors that go through this client you can override the <code>serializeError</code> method. To make use of this custom class, you can pass the class itself to the <code>ClientsModule.register()</code> method using the <code>customClass</code> property. Below is an example of a custom <code>ClientProxy</code> that serializes each error into an <code>RpcException</code>.</p>
 
 <span class="filename">
-  {{ 'error-handling.proxy' | extension: appb508b379ce892494d97bbf7fb3f5093638c8e0a8.isJsActive }}
-<app-tabs #appb508b379ce892494d97bbf7fb3f5093638c8e0a8></app-tabs>
+  {{ 'error-handling.proxy' | extension: app6d39c222a0bedd88c115e6126918ef05b8d10064.isJsActive }}
+<app-tabs #app6d39c222a0bedd88c115e6126918ef05b8d10064></app-tabs>
 </span><pre><code class="language-typescript">
 import &#123; ClientTcp, RpcException &#125; from &#39;@nestjs/microservices&#39;;
 
@@ -210,8 +210,8 @@ <h4 appAnchor id="message-serialization"><span>Message serialization</span></h4>
 </code></pre><p>and then use it in the <code>ClientsModule</code> like so:</p>
 
 <span class="filename">
-  {{ 'app.module' | extension: app9edf2a86ee25caf1a636ec7b85e62ffa504bc949.isJsActive }}
-<app-tabs #app9edf2a86ee25caf1a636ec7b85e62ffa504bc949></app-tabs>
+  {{ 'app.module' | extension: app58713f1e88f57e0ba10a9f3a0fbda5dfee0f3b97.isJsActive }}
+<app-tabs #app58713f1e88f57e0ba10a9f3a0fbda5dfee0f3b97></app-tabs>
 </span><pre><code class="language-typescript">
 @Module(&#123;
   imports: [