NestJS Enterprise Backend APIs · レッスン

NestJSのGraphQL設定

NestJSでGraphQL APIを提供できるよう設定し、コードファーストとスキーマファーストのアプローチから選択します。

「NestJSのGraphQL設定」はCoddyKit上の無料NestJS Enterprise Backend APIsレッスンです。これはレッスン2/3です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはNestJS Enterprise Backend APIs学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 NestJS Enterprise Backend APIsコースには全3レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Welcome to GraphQL Setup

Hello! In this lesson, you'll learn how to integrate GraphQL into your NestJS application. We'll cover the essential setup steps and explore two primary approaches:

Schema-First: Defining your API using GraphQL Schema Definition Language (SDL).
Code-First: Building your schema directly from TypeScript classes and decorators.

By the end, you'll be able to choose the best approach for your project and have a basic GraphQL server running!

Install GraphQL Dependencies

Before we write any code, we need to install the necessary packages. NestJS uses @nestjs/graphql along with an underlying GraphQL library like Apollo.

Open your terminal and run the following command to add the required packages:

npm install @nestjs/graphql @nestjs/apollo graphql

graphql is the core GraphQL library, and @nestjs/apollo provides the Apollo server integration.

Configure GraphQLModule

The heart of NestJS GraphQL is the GraphQLModule. You need to import it into your root module (usually AppModule) and configure it. Here's a basic setup:

import { Module } from '@nestjs/common';
import { GraphQLModule } from '@nestjs/graphql';
import { ApolloDriver, ApolloDriverConfig } from '@nestjs/apollo';

@Module({
  imports: [
    GraphQLModule.forRoot<ApolloDriverConfig>({
      driver: ApolloDriver, // Use Apollo for GraphQL server
    }),
  ],
  controllers: [],
  providers: [],
})
export class AppModule {}

// main.ts (entry point for NestJS)
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);
  console.log('GraphQL server ready on http://localhost:3000/graphql');
}
bootstrap();

Schema-First: Design with SDL

The Schema-First approach means you define your GraphQL schema using the Schema Definition Language (SDL) first. This is like creating a blueprint for your API.

You write your types, queries, and mutations in a .graphql or .gql file.
NestJS then uses this file to understand your API structure.
You'll later connect these schema definitions to actual data handling logic (resolvers).

Schema-First: Basic Type Example

Let's define a simple Author type in an SDL file. This file describes the data structure without any implementation details yet.

// src/graphql.schema.gql

type Author {
  id: ID!
  firstName: String
  lastName: String
}

type Query {
  authors: [Author!]!
  author(id: ID!): Author
}

Schema-First: Link Schema to Module

To make NestJS aware of your SDL file, you configure the GraphQLModule to point to it. This tells NestJS where to find your schema definition.

import { Module } from '@nestjs/common';
import { GraphQLModule } from '@nestjs/graphql';
import { ApolloDriver, ApolloDriverConfig } from '@nestjs/apollo';

@Module({
  imports: [
    GraphQLModule.forRoot<ApolloDriverConfig>({
      driver: ApolloDriver,
      typePaths: ['./**/*.gql'], // Tells NestJS where to find .gql files
    }),
  ],
  controllers: [],
  providers: [],
})
export class AppModule {}

// main.ts (entry point for NestJS)
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);
  console.log('GraphQL server ready on http://localhost:3000/graphql');
}
bootstrap();

Code-First: TypeScript Magic

The Code-First approach leverages TypeScript decorators to define your GraphQL schema. Instead of writing SDL, you define classes that NestJS automatically converts into a GraphQL schema.

You use decorators like @ObjectType() and @Field() on your TypeScript classes.
This approach offers strong type safety and excellent IDE support.
It reduces duplication, as your TypeScript types directly define your GraphQL schema.

Code-First: Create an Object Type

Here's how you define the same Author type using the code-first approach. Notice the use of @ObjectType and @Field decorators.

// src/authors/models/author.model.ts
import { Field, ID, ObjectType } from '@nestjs/graphql';

@ObjectType()
export class Author {
  @Field(type => ID) // Explicitly define GraphQL type
  id: number;

  @Field({ nullable: true }) // Field can be null
  firstName?: string;

  @Field({ nullable: true }) 
  lastName?: string;
}

Code-First: Auto-Generating Schema

For the code-first approach, the GraphQLModule automatically generates the schema by scanning your project for classes decorated with @ObjectType(), @InputType(), etc.

You simply tell it where to save the generated schema file (optional, but good for inspection).

import { Module } from '@nestjs/common';
import { GraphQLModule } from '@nestjs/graphql';
import { ApolloDriver, ApolloDriverConfig } from '@nestjs/apollo';

@Module({
  imports: [
    GraphQLModule.forRoot<ApolloDriverConfig>({
      driver: ApolloDriver,
      autoSchemaFile: 'src/schema.gql', // Path to save the generated schema
      sortSchema: true, // Optional: keeps schema consistent
    }),
  ],
  controllers: [],
  providers: [],
})
export class AppModule {}

// main.ts (entry point for NestJS)
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);
  console.log('GraphQL server ready on http://localhost:3000/graphql');
}
bootstrap();

Schema-First vs. Code-First

Both approaches are valid, and your choice often depends on team preference and project needs:

Schema-First: Great for API design collaboration. The schema is the single source of truth, making it easy for frontend teams to start consuming the API early.
Code-First: Favored by TypeScript developers for its strong type safety, less context switching, and reduced schema-code duplication. It feels more idiomatic to NestJS.

NestJS supports both, allowing you to pick what works best!

Check Your Understanding

Let's test your knowledge about setting up GraphQL in NestJS.

Lesson Summary

Great job! You've learned the fundamental steps to set up a GraphQL API in NestJS.

We installed the necessary @nestjs/graphql and @nestjs/apollo packages.
You saw how to integrate and configure the GraphQLModule in your AppModule.
We explored both the Schema-First approach (using SDL files) and the Code-First approach (using TypeScript decorators).

You now have the foundation to choose and implement your preferred GraphQL setup in NestJS!

よくある質問

「NestJSのGraphQL設定」レッスンは無料ですか？

はい。「NestJSのGraphQL設定」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、NestJS Enterprise Backend APIsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 NestJS Enterprise Backend APIsコースには全3レッスンが含まれています。

「NestJSのGraphQL設定」で何を学びますか？

NestJSでGraphQL APIを提供できるよう設定し、コードファーストとスキーマファーストのアプローチから選択します。ブラウザで直接実行するハンズオンコードでNestJS Enterprise Backend APIsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

NestJS Enterprise Backend APIsを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのNestJS Enterprise Backend APIsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/3です。

「NestJSのGraphQL設定」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このNestJS Enterprise Backend APIsレッスンでコードを書いて実行できますか？

はい。すべてのNestJS Enterprise Backend APIsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← NestJS Enterprise Backend APIsに戻る