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.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 }),
})

在 server/api/subscription.ts 下的 playground 文件夹中可以找到完整的示例。

选项

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

url

GraphQL 端点的相对 URL，以启用 Nuxt Devtools 集成。

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 许可证发布。