Nuxt 的 GraphQL 伺服器工具組

此套件讓您可以在 Nuxt 3 應用程式中輕鬆開發 GraphQL 伺服器。

若要在客戶端使用 GraphQL API，我們建議使用 Nuxt Apollo、Nuxt GraphQL Client 或 nuxt/graphql-client 等模組。

功能

提供一個虛擬模組 #graphql/schema，您可以從中匯入您的 schema。在底層，它會自動將多個 schema 檔案合併成一個完整的 schema。此外，您不再需要擔心部署 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 schema。

透過建立包含以下內容的 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.config.ts 中指定 GraphQL 端點的（相對）URL，以啟用 Nuxt Devtools 整合。
```
graphqlServer: {
   url: '/api/graphql',
}
```

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

GraphQL 端點的相對 URL，以啟用 Nuxt Devtools 整合。

schema

有關如何定位 GraphQL Schema (.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 授權下發佈。