Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

2487 graphql v1v2 endpoints does not work #2503

Merged
merged 6 commits into from
Nov 1, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion docs/.vuepress/config.base.js
Original file line number Diff line number Diff line change
Expand Up @@ -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`
},
Expand Down Expand Up @@ -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",
Expand Down
Binary file added docs/.vuepress/public/graphql-nexus.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/.vuepress/public/graphql-ws-large.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/.vuepress/public/graphql-ws.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 6 additions & 3 deletions docs/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
194 changes: 194 additions & 0 deletions docs/tutorials/graphql-apollo.md
Original file line number Diff line number Diff line change
@@ -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>
125 changes: 125 additions & 0 deletions docs/tutorials/graphql-nexus.md
Original file line number Diff line number Diff line change
@@ -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>
Loading
Loading