docs: improve graphql documentation

docs/.vuepress/config.base.js

@@ -260,7 +260,8 @@ module.exports = ({title, description, base = "", url, apiRedirectUrl = "", them
               {
                 text: "Temporal",
                 link: `${base}/tutorials/temporal.html`
-              },     {
+              },
+              {
                 text: "BullMQ",
                 link: `${base}/tutorials/bullmq.html`
               },
@@ -452,6 +453,10 @@ module.exports = ({title, description, base = "", url, apiRedirectUrl = "", them
           base + "/tutorials/mikroorm",
           base + "/tutorials/mongoose",
           base + "/tutorials/graphql",
+          base + "/tutorials/graphql-ws",
+          base + "/tutorials/graphql-apollo",
+          base + "/tutorials/graphql-typegraphql",
+          base + "/tutorials/graphql-nexus",
           base + "/tutorials/socket-io",
           base + "/tutorials/swagger",
           base + "/tutorials/ajv",

docs/readme.md

@@ -125,14 +125,17 @@ frameworks:
     href: /tutorials/ioredis.html
     src: /ioredis.svg
   - title: Apollo
-    href: /tutorials/graphql.html#apollo
+    href: /tutorials/graphql-apollo.html
     src: /apollo-graphql-compact.svg
   - title: TypeGraphQL
-    href: /tutorials/graphql.html#typegraphql
+    href: /tutorials/graphql-typegraphql.html
     src: /typegraphql.png
   - title: Nexus
-    href: /tutorials/graphql.html#nexus
+    href: /tutorials/graphql-nexus.html
     src: /nexus.png
+  - title: Nexus
+    href: /tutorials/graphql-ws.html
+    src: /graphql-ws.png
   - title: Socket.io
     href: /tutorials/socket-io.html
     src: /socketio.svg

docs/tutorials/graphql-apollo.md

@@ -0,0 +1,194 @@
+---
+meta:
+  - name: description
+    content: Use Apollo, Nexus or Type-graphql with Ts.ED framework. GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data.
+  - name: keywords
+    content: ts.ed express koa typescript apollo node.js javascript decorators
+---
+
+# Apollo
+
+<Banner src="/apollo-graphql-compact.svg" height="200" />
+
+Unlock microservices potential with Apollo GraphQL. Seamlessly integrate APIs, manage data, and enhance performance. Explore Apollo's innovative solutions.
+Ts.ED provides a module to create multiple Apollo server and bind it with Ts.ED server (Express or Koa).
+
+## Feature
+
+- Create [Apollo](https://www.apollographql.com/docs/apollo-server/api/apollo-server.html) Server and bind it with
+  Ts.ED,
+- Create multiple servers,
+- Support [TypeGraphQL](https://typegraphql.com/), [Nexus](https://nexusjs.org/) or standalone Apollo server (or whatever).
+- Support subscription with [GraphQL WS](/tutorials/graphql-ws.md)
+
+## Installation
+
+<Tabs class="-code">
+<Tab label="Express.js">
+
+```bash
+npm install --save @tsed/apollo graphql apollo-server-express
+npm install --save-dev apollo-server-testing
+```
+
+</Tab>
+<Tab label="Koa.js">
+
+```bash
+npm install --save @tsed/apollo graphql apollo-server-koa
+npm install --save-dev apollo-server-testing
+```
+
+</Tab>
+</Tabs>
+
+```typescript
+import {Configuration} from "@tsed/common";
+import "@tsed/platform-express";
+import "@tsed/apollo";
+import {join} from "path";
+
+@Configuration({
+  apollo: {
+    server1: {
+      // GraphQL server configuration
+      path: "/",
+      playground: true, // enable playground GraphQL IDE. Set false to use Apollo Studio
+      plugins: [] // Apollo plugins
+      // Give custom server instance
+      // server?: (config: Config) => ApolloServer;
+
+      // ApolloServer options
+      // ...
+      // See options descriptions on https://www.apollographql.com/docs/apollo-server/api/apollo-server.html
+    }
+  }
+})
+export class Server {}
+```
+
+## Register plugins
+
+You can register plugins with the `plugins` property. The plugins are executed in the order of declaration.
+
+```typescript
+import {Configuration} from "@tsed/common";
+import "@tsed/platform-express";
+import "@tsed/apollo";
+import {join} from "path";
+
+@Configuration({
+  apollo: {
+    server1: {
+      plugins: [] // Apollo plugins
+    }
+  }
+})
+export class Server {}
+```
+
+But if you need to register and access to the injector, you can use the `$alterApolloServerPlugins` hook. For example,
+you can register the `graphql-ws` necessary to support the `subscription` feature of GraphQL like this:
+
+```typescript
+import {Constant, Inject, InjectorService, Module} from "@tsed/di";
+import {useServer} from "graphql-ws/lib/use/ws";
+import Http from "http";
+import Https from "https";
+import {WebSocketServer} from "ws";
+import {GraphQLWSOptions} from "./GraphQLWSOptions";
+
+@Module()
+export class GraphQLWSModule {
+  @Constant("graphqlWs", {})
+  private settings: GraphQLWSOptions;
+
+  @Inject(Http.Server)
+  private httpServer: Http.Server | null;
+
+  @Inject(Https.Server)
+  private httpsServer: Https.Server | null;
+
+  @Inject()
+  private injector: InjectorService;
+
+  async $alterApolloServerPlugins(plugins: any[], settings: GraphQLWSOptions) {
+    const wsServer = await this.createWSServer(settings);
+
+    this.injector.logger.info(`Create GraphQL WS server on: ${settings.path}`);
+
+    return plugins.concat({
+      serverWillStart() {
+        return {
+          async drainServer() {
+            await wsServer.dispose();
+          }
+        };
+      }
+    } as any);
+  }
+
+  protected createWSServer(settings: GraphQLWSOptions) {
+    const wsServer = new WebSocketServer({
+      ...(this.settings.wsServerOptions || {}),
+      ...settings.wsServerOptions,
+      server: this.httpsServer || this.httpServer!,
+      path: settings.path
+    });
+
+    return useServer(
+      {
+        ...(this.settings.wsUseServerOptions || {}),
+        ...settings.wsUseServerOptions,
+        schema: settings.schema
+      },
+      wsServer
+    );
+  }
+}
+```
+
+::: tip Note
+Ts.ED provide a `@tsed/graphql-ws` package to support the `subscription` feature of GraphQL. See [here](https://tsed.io/api/graphql-ws.html) for more details.
+:::
+
+## Get Server instance
+
+ApolloService (or TypeGraphQLService) lets you retrieve an instance of ApolloServer.
+
+```ts
+import {AfterRoutesInit} from "@tsed/common";
+import {Inject, Injectable} from "@tsed/di";
+import {ApolloService} from "@tsed/apollo";
+import {ApolloServerBase} from "apollo-server-core";
+
+@Injectable()
+export class UsersService implements AfterRoutesInit {
+  @Inject()
+  private ApolloService: ApolloService;
+  // or private typeGraphQLService: TypeGraphQLService;
+
+  private server: ApolloServerBase;
+
+  $afterRoutesInit() {
+    this.server = this.apolloService.get("server1")!;
+  }
+}
+```
+
+For more information about ApolloServer, look at its
+documentation [here](https://www.apollographql.com/docs/apollo-server/api/apollo-server.html);
+
+## Author
+
+<GithubContributors users="['Romakita']"/>
+
+## Maintainers
+
+<GithubContributors users="['Romakita']"/>
+
+<div class="flex items-center justify-center p-5">
+<Button href="/contributing.html" class="rounded-medium">
+ Become maintainer
+</Button>
+</div>

docs/tutorials/graphql-nexus.md

@@ -0,0 +1,125 @@
+---
+meta:
+  - name: description
+    content: Nexus
+  - name: keywords
+    content: ts.ed express typescript graphql websocket node.js javascript decorators
+---
+
+# GraphQL Nexus
+
+<Banner src="/graphql-nexus.png" height="200" />
+
+GraphQL Nexus' APIs were designed with type-safety in mind. We auto-generate type-definitions as you develop, and infer
+them in your code, giving you IDE completion and type error catching out of the box!
+
+## Installation
+
+This example need to be used with `@tsed/apollo` module. So, you must install it before (see [here](/tutorials/graphql-apollo.md)).
+
+<Tabs class="-code">
+<Tab label="Express.js">
+
+```bash
+npm install --save @tsed/apollo
+npm install --save nexus graphql apollo-server-express
+npm install --save-dev apollo-server-testing
+```
+
+</Tab>
+<Tab label="Koa.js">
+
+```bash
+npm install --save @tsed/apollo graphql
+npm install --save nexus graphql apollo-server-koa
+npm install --save-dev apollo-server-testing
+```
+
+</Tab>
+</Tabs>
+
+Now, we can configure the Ts.ED server by importing `@tsed/apollo` in your Server:
+
+```typescript
+import {Configuration} from "@tsed/common";
+import "@tsed/platform-express";
+import "@tsed/apollo";
+import {schema} from "./schema";
+import {join} from "path";
+
+@Configuration({
+  apollo: {
+    server1: {
+      // GraphQL server configuration
+      path: "/",
+      playground: true, // enable playground GraphQL IDE. Set false to use Apollo Studio
+      schema,
+      plugins: [] // Apollo plugins
+
+      // Give custom server instance
+      // server?: (config: Config) => ApolloServer;
+
+      // ApolloServer options
+      // ...
+      // See options descriptions on https://www.apollographql.com/docs/apollo-server/api/apollo-server.html
+    }
+  }
+})
+export class Server {}
+```
+
+Then create `schema/index.ts`:
+
+```typescript
+import {makeSchema} from "nexus";
+import {join} from "path";
+
+export const schema = makeSchema({
+  types: [], // 1
+  outputs: {
+    typegen: join(process.cwd(), "..", "..", "nexus-typegen.ts"), // 2
+    schema: join(process.cwd(), "..", "..", "schema.graphql") // 3
+  }
+});
+```
+
+### Data Source
+
+Data source is one of the Apollo server features which can be used as option for your Resolver or Query. Ts.ED provides
+a @@DataSourceService@@ decorator to declare a DataSource which will be injected to the Apollo server context.
+
+```typescript
+import {DataSource} from "@tsed/typegraphql";
+import {RESTDataSource} from "apollo-datasource-rest";
+import {User} from "../models/User";
+@DataSource()
+export class UserDataSource extends RESTDataSource {
+  constructor() {
+    super();
+    this.baseURL = "https://myapi.com/api/users";
+  }
+
+  getUserById(id: string): Promise<User> {
+    return this.get(`/${id}`);
+  }
+}
+```
+
+## Need help
+
+This documentation isn't complete. You can find more documentation on the [official website](https://nexusjs.org/).
+But code example with Ts.ED + Nexus are welcome.
+
+## Author
+
+<GithubContributors users="['Romakita']"/>
+
+## Maintainers
+
+<GithubContributors users="['Romakita']"/>
+
+<div class="flex items-center justify-center p-5">
+<Button href="/contributing.html" class="rounded-medium">
+ Become maintainer
+</Button>
+</div>