开始项目
- 安装依赖包
# For Express and Apollo (default)
$ npm i @nestjs/graphql @nestjs/apollo @apollo/server graphql
# For Fastify and Apollo
npm i @nestjs/graphql @nestjs/apollo @apollo/server @as-integrations/fastify graphql
# For Fastify and Mercurius
npm i @nestjs/graphql @nestjs/mercurius graphql mercurius
项目配置
- 在
app.module.ts中导入GraphQLModule模块
import { Module } from '@nestjs/common'
import { GraphQLModule } from '@nestjs/graphql'
import { ApolloDriver, ApolloDriverConfig } from '@nestjs/apollo'
@Module({
imports: [
GraphQLModule.forRoot<ApolloDriverConfig>({
driver: ApolloDriver,
// 生成 schema.gql 文件，代码优先
autoSchemaFile: true,
}),
],
})
export class AppModule {}
生成 schema.gql 文件
generate-typings.ts文件
import { GraphQLDefinitionsFactory } from '@nestjs/graphql'
import { join } from 'path'
const definitionsFactory = new GraphQLDefinitionsFactory()
definitionsFactory.generate({
typePaths: ['./src/**/*.graphql'],
path: join(process.cwd(), 'src/graphql.ts'),
outputAs: 'class',
})
package.json文件
{
"scripts": {
"generate-typings": "ts-node generate-typings.ts"
}
}
添加插件
Apollo Sandbox插件，替换GraphQL Playground
import { ApolloDriver, ApolloDriverConfig } from '@nestjs/apollo'
import { Module } from '@nestjs/common'
import { GraphQLModule } from '@nestjs/graphql'
import { ApolloServerPluginLandingPageLocalDefault } from '@apollo/server/plugin/landingPage/default'
@Module({
imports: [
GraphQLModule.forRoot<ApolloDriverConfig>({
driver: ApolloDriver,
playground: false,
plugins: [ApolloServerPluginLandingPageLocalDefault()],
}),
],
})
export class AppModule {}
前端对接 GraphQL
vue 项目
react 项目