Nuxt用GraphQLサーバーツールキット

このパッケージを使用すると、Nuxt 3アプリケーションで簡単にGraphQLサーバーを開発できます。

クライアント側でGraphQL APIを使用する場合は、Nuxt Apollo、Nuxt GraphQL Client、またはnuxt/graphql-clientモジュールをお勧めします。

機能

仮想モジュール#graphql/schemaを提供します。これにより、スキーマをインポートできます。内部的には、複数のスキーマファイルを自動的にマージして完全なスキーマを作成します。さらに、スキーマgraphqlファイルのデプロイについて心配する必要がなくなります。
仮想モジュール#graphql/resolverを介して、レゾルバーのTypeScript定義を自動生成します。
GraphQLサブスクリプションをサポート。
Nuxt Devtoolsとの統合：開発ツールにApollo Studio Sandboxを追加します。

インストール

# nuxi
npx nuxi@latest module add graphql-server

# npm
npm install @apollo/server graphql @as-integrations/h3 nuxt-graphql-server

# yarn
yarn add @apollo/server graphql @as-integrations/h3 nuxt-graphql-server

# pnpm
pnpm add @apollo/server graphql @as-integrations/h3 nuxt-graphql-server

使用方法

nuxiを使用しない場合は、nuxt.config.tsにモジュールを追加します。

export default defineNuxtConfig({
  modules: ['nuxt-graphql-server'],
  // Optional top-level config
  graphqlServer: {
    // config
  },
})

// or

export default defineNuxtConfig({
  modules: [
    [
      'nuxt-graphql-server',
      {
        /* Optional inline config */
      },
    ],
  ],
})

serverフォルダーにある.graphqlファイルにGraphQLスキーマを定義します。

以下の内容でserver/api/graphql.tsを作成し、GraphQL APIエンドポイントを公開します。

import { Resolvers } from '#graphql/resolver'
import { typeDefs } from '#graphql/schema'
import { ApolloServer } from '@apollo/server'
import { startServerAndCreateH3Handler } from '@as-integrations/h3'

const resolvers: Resolvers = {
  Query: {
    // Typed resolvers
  },
}

const apollo = new ApolloServer({ typeDefs, resolvers })

export default startServerAndCreateH3Handler(apollo, {
  // Optional: Specify context
  context: (event) => {
    /*...*/
  },
})

Nuxt Devtools統合を有効にするには、必要に応じてnuxt.config.tsでGraphQLエンドポイントへの（相対）URLを指定します。
```
graphqlServer: {
   url: '/api/graphql',
}
```

サブスクリプション

サブスクリプションを有効にするには、さらにいくつかの依存関係をインストールする必要があります。

# npm
npm install graphql-ws graphql-subscriptions

# yarn
yarn add graphql-ws graphql-subscriptions

# pnpm
pnpm add graphql-ws graphql-subscriptions

graphql-wsパッケージは、GraphQLサブスクリプションを処理するために使用できる軽量なWebSocketサーバーです。graphql-subscriptionsパッケージは、イベントの公開と購読に使用できるPubSubクラスを提供します。

デフォルトのPubSub実装はデモ目的のものであり、サーバーのインスタンスが1つだけで、接続が数件を超えるスケールには対応しません。本番環境では、外部ストア（例：Redis）をバックエンドとするPubSub実装のいずれかを使用する必要があります。

nuxt.config.tsでWebSocketサポートを有効にします。

nitro: {
  experimental: {
    websocket: true,
  },
},

次に、以下の内容でserver/api/graphql.tsエンドポイントを作成します。

import { ApolloServer } from '@apollo/server'
import {
  startServerAndCreateH3Handler,
  defineGraphqlWebSocket,
} from '@as-integrations/h3'
import { makeExecutableSchema } from '@graphql-tools/schema'
import type { Resolvers } from '#graphql/resolver'
import { typeDefs } from '#graphql/schema'

const resolvers: Resolvers = {
  Query: {
    // Typed resolvers
  },
  Subscription: {
    // Typed resolvers
  },
}

const schema = makeExecutableSchema({ typeDefs, resolvers })
const apollo = new ApolloServer({ schema })
export default startServerAndCreateH3Handler(apollo, {
  websocket: defineGraphqlWebSocket({ schema }),
})

完全な例は、server/api/subscription.tsのplaygroundフォルダーにあります。

オプション

graphqlServer: {
  url: '/relative/path/to/your/graphql/endpoint',
  schema: './server/**/*.graphql',
  codegen: {
    maybeValue: T | null | undefined
  }
}

url

Nuxt Devtools統合を有効にするためのGraphQLエンドポイントへの相対URL。

schema

GraphQLスキーマ（.graphql）ファイルの場所を指定するglobパターン。

デフォルト：'./server/**/*.graphql'

codegen

このモジュールは内部でGraphQL Code Generatorを使用しており、TypeScriptおよびTypeScript Resolversプラグインを使用しています。そのため、ニーズに基づいて、これらのプラグインのオプションをここで渡すことができます。

たとえば、次のようにしたい場合があります。

export default defineNuxtConfig({
  modules: ['nuxt-graphql-server'],

  graphqlServer: {
    codegen: {
      // Map your internal enum values to your GraphQL's enums.
      enumValues: '~/graphql/enums/index',

      // Make use of your custom GraphQL Context type and let codegen use it so that the
      // generated resolvers automatically makes use of it.
      contextType: '~/server/graphql/GraphQLContext#GraphQLContext',

      // Change the naming convention of your enum keys
      namingConvention: {
        enumValues: 'change-case-all#constantCase',
      },

      // ... and many more, refer to the plugin docs!
    },
  },
})

💻 開発

このリポジトリをクローンします。
corepack enableを使用してCorepackを有効にします（Node.js < 16.10の場合はnpm i -g corepackを使用します）。
pnpm installを使用して依存関係をインストールします。
pnpm dev:prepareを実行して型スタブを生成します。
pnpm devを使用して、開発モードでplaygroundを起動します。

ライセンス

💛を使って作成

MITライセンスで公開。