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をDevtoolsに直接追加します。

インストール

# 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

使用方法

1. 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 */
         },
       ],
     ],
   })
   

2. serverフォルダー内の.graphqlファイルでGraphQLスキーマを定義します。
3. 以下の内容で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) => {
       /*...*/
     },
   })
   

4. オプションで、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実装はデモ目的であることに注意してください。これはサーバーの単一インスタンスでしか動作せず、数個の接続を超えてスケーリングしません。本番環境での使用には、外部ストア（例：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 }),
})

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

オプション

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

url

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

schema

GraphQLスキーマ（.graphql）ファイルを検索する方法のグロブパターン。

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

コード生成

このモジュールは、内部で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ライセンスの下で公開されています。