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 集成：直接在 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 许可证下发布。