@chillicream/nitro-server-adapter-plugin/README.md

Server Adapter Plugin for Nitro GraphQL IDE

# Nitro Server Adapter Plugin

_Server Adapter Plugin for Nitro GraphQL IDE_

## Description

This plugin allows to setup _Nitro GraphQL IDE_ for your GraphQL Yoga server or any other server that implements the Server Adapter (see `@whatwg-node`).

You can use a **cdn** hosted version of the app or a **self** hosted version using the ad hoc package.

## Installation

Install this package and the required `peerDependencies` in your project:

```sh
npm install @chillicream/nitro-server-adapter-plugin --save-dev
# or
yarn add @chillicream/nitro-server-adapter-plugin --dev
# or
pnpm add @chillicream/nitro-server-adapter-plugin --save-dev
```

**Note**: `@chillicream/nitro-embedded` is optional and only needed if you prefer to **self** host the app.

## Usage

Add the plugin to your server.

```javascript
import { useNitro } from "@chillicream/nitro-server-adapter-plugin";
import { createYoga } from "graphql-yoga";
import { createServer } from "node:http";

const yoga = createYoga({
  schema: // Schema omitted for brevity,
  plugins: [useNitro()], // Adds Nitro
  graphiql: false, // Disables the default GraphQL IDE
});

const server = createServer(yoga);

server.listen(3000, () => {
  console.log("Running a GraphQL API server at http://localhost:3000/graphql");
});
```

### Extended configuration

- To pin a specific version instead of using "latest":

  ```javascript
  useNitro({
    mode: "cdn",
    target: { version: "x.0.0" },
  });
  ```

- To use your own infrastructure:

  ```javascript
  useNitro({
    mode: "cdn",
    target: "https://mycompany.com/nitro",
  });
  ```

### Custom options

- To pass `options` supported by _Nitro GraphQL IDE_:

  ```javascript
  useNitro({
    mode: "cdn",
    options: {
      title: "Nitro",
    },
  });
  ```

## Recipes

<details id="graphql-yoga">
<summary><a href="#graphql-yoga"><sub><sup>🔗</sup></sub></a> With <a href="https://the-guild.dev/graphql/yoga-server">graphql-yoga</a></summary>
<hr>

```javascript
import { useNitro } from "@chillicream/nitro-server-adapter-plugin";
import { createYoga } from "graphql-yoga";
import { createServer } from "node:http";

const yoga = createYoga({
  schema: createSchema({
    typeDefs: /* GraphQL */ `
      type Query {
        greeting: String
      }
    `,
    resolvers: {
      Query: {
        greeting: () => "Hello, World!",
      },
    },
  }),
  plugins: [useNitro()], // Adds Nitro
  graphiql: false, // Disables the default GraphQL IDE
});

const server = createServer(yoga);

server.listen(3000, () => {
  console.log("Running a GraphQL API server at http://localhost:3000/graphql");
});
```

<hr>
</details>

<details id="graphql-yoga-with-grats">
<summary><a href="#graphql-yoga-with-grats"><sub><sup>🔗</sup></sub></a> With <a href="https://the-guild.dev/graphql/yoga-server">graphql-yoga</a> and <a href="https://grats.capt.dev/">grats</a></summary>
<hr>

```typescript
import { useNitro } from "@chillicream/nitro-server-adapter-plugin";
import { createYoga, createSchema } from "graphql-yoga";
import { createServer } from "node:http";
import { getSchema } from "./schema"; // Will be generated by Grats

/** @gqlType */
type Query = unknown;

/** @gqlField */
export function hello(_: Query): string {
  return "Hello world!";
}

const yoga = createYoga({
  schema: getSchema(),
  plugins: [useNitro()], // Adds Nitro
  graphiql: false, // Disables the default GraphQL IDE
});

const server = createServer(yoga);

server.listen(3000, () => {
  console.log("Running a GraphQL API server at http://localhost:3000/graphql");
});
```

<hr>
</details>