docs(): update graphql docs to mention apollo v3

Author: kamilmysliwiec

content/graphql/quick-start.md

@@ -9,10 +9,13 @@ In this chapter, we assume a basic understanding of GraphQL, and focus on how to
 Start by installing the required packages:
 
 ```bash
-$ npm i @nestjs/graphql graphql apollo-server-express@2.x.x
+$ npm i @nestjs/graphql graphql apollo-server-express
 ```
+
 > info **Hint** If using Fastify, instead of installing `apollo-server-express`, you should install `apollo-server-fastify`.
 
+> warning **Warning** `@nestjs/graphql@^9` is compatible with **Apollo v3** (check out Apollo Server 3 [migration guide](https://www.apollographql.com/docs/apollo-server/migration/) for more details), while `@nestjs/graphql@^8` only supports **Apollo v2** (e.g., `[email protected]` package). Both versions (v9 and v8) are fully compatible with Nest v8 (`@nestjs/common@^8`, `@nestjs/core@^8`, etc.).
+
 #### Overview
 
 Nest offers two ways of building GraphQL applications, the **code first** and the **schema first** methods. You should choose the one that works best for you. Most of the chapters in this GraphQL section are divided into two main parts: one you should follow if you adopt **code first**, and the other to be used if you adopt **schema first**.

content/graphql/subscriptions.md

@@ -14,6 +14,20 @@ GraphQLModule.forRoot({
 }),
 ```
 
+> warning **Warning** The `installSubscriptionHandlers` configuration option has been removed from the latest version of Apollo server and will be soon deprecated in this package as well. By default, `installSubscriptionHandlers` will fallback to use the `subscriptions-transport-ws` ([read more](https://github.com/apollographql/subscriptions-transport-ws)) but we strongly recommend using the `graphql-ws`([read more](https://github.com/enisdenjo/graphql-ws)) library instead.
+
+To switch to use the `graphql-ws` package instead, use the following configuration:
+
+```typescript
+GraphQLModule.forRoot({
+  subscriptions: {
+    'graphql-ws': true
+  },
+}),
+```
+
+> info **Hint** You can also use both packages (`subscriptions-transport-ws` and `graphql-ws`) at the same time, for example, for backward compatibility.
+
 #### Code first
 
 To create a subscription using the code first approach, we use the `@Subscription()` decorator and the `PubSub` class from the `graphql-subscriptions` package, which provides a simple **publish/subscribe API**.
@@ -23,10 +37,10 @@ The following subscription handler takes care of **subscribing** to an event by
 ```typescript
 const pubSub = new PubSub();
 
-@Resolver(of => Author)
+@Resolver((of) => Author)
 export class AuthorResolver {
   // ...
-  @Subscription(returns => Comment)
+  @Subscription((returns) => Comment)
   commentAdded() {
     return pubSub.asyncIterator('commentAdded');
   }
@@ -255,13 +269,28 @@ We instantiated a local `PubSub` instance above. The preferred approach is to de
 
 #### Customize subscriptions server
 
-To customize the subscriptions server (e.g., change the listener port), use the `subscriptions` options property (read [more](https://www.apollographql.com/docs/apollo-server/v2/api/apollo-server.html#constructor-options-lt-ApolloServer-gt)).
+To customize the subscriptions server (e.g., change the path), use the `subscriptions` options property.
+
+```typescript
+GraphQLModule.forRoot({
+  installSubscriptionHandlers: true,
+  subscriptions: {
+    'subscriptions-transport-ws': {
+      path: '/graphql'
+    },
+  }
+}),
+```
+
+If you're using the `graphql-ws` package for subscriptions, replace the `subscriptions-transport-ws` key with `graphql-ws`, as follows:
 
 ```typescript
 GraphQLModule.forRoot({
   installSubscriptionHandlers: true,
   subscriptions: {
-    keepAlive: 5000,
+    'graphql-ws': {
+      path: '/graphql'
+    },
   }
 }),
 ```

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: app0de82fc4a8bf2d269aeca1e7e184438efcf3e0d8.isJsActive }}
-<app-tabs #app0de82fc4a8bf2d269aeca1e7e184438efcf3e0d8></app-tabs>
+  {{ 'error-handling.proxy' | extension: appb508b379ce892494d97bbf7fb3f5093638c8e0a8.isJsActive }}
+<app-tabs #appb508b379ce892494d97bbf7fb3f5093638c8e0a8></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: app2750dd81614c4ebfea443f3fdb1c35cf2c1bdc85.isJsActive }}
-<app-tabs #app2750dd81614c4ebfea443f3fdb1c35cf2c1bdc85></app-tabs>
+  {{ 'app.module' | extension: app9edf2a86ee25caf1a636ec7b85e62ffa504bc949.isJsActive }}
+<app-tabs #app9edf2a86ee25caf1a636ec7b85e62ffa504bc949></app-tabs>
 </span><pre><code class="language-typescript">
 @Module(&#123;
   imports: [