0Pricing
NestJS Enterprise Backend APIs · Pelajaran

Penyiapan GraphQL di NestJS

Konfigurasikan NestJS untuk menyediakan API GraphQL dengan memilih pendekatan berbasis kode atau berbasis skema.

Penyiapan GraphQL di NestJS adalah pelajaran NestJS Enterprise Backend APIs gratis di CoddyKit. Ini adalah pelajaran 2 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar NestJS Enterprise Backend APIs, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus NestJS Enterprise Backend APIs mencakup 3 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

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!

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Penyiapan GraphQL di NestJS” gratis?

Ya — teks lengkap “Penyiapan GraphQL di NestJS” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus NestJS Enterprise Backend APIs, upgrade ke CoddyKit PRO. Kursus NestJS Enterprise Backend APIs mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Penyiapan GraphQL di NestJS”?

Konfigurasikan NestJS untuk menyediakan API GraphQL dengan memilih pendekatan berbasis kode atau berbasis skema. Kamu berlatih NestJS Enterprise Backend APIs dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai NestJS Enterprise Backend APIs?

Tidak diperlukan pengalaman sebelumnya. NestJS Enterprise Backend APIs di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 3.

Berapa lama pelajaran “Penyiapan GraphQL di NestJS” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran NestJS Enterprise Backend APIs ini?

Ya. Setiap pelajaran NestJS Enterprise Backend APIs menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Dasar-Dasar GraphQL
  2. Penyiapan GraphQL di NestJS
  3. Resolver dan Langganan
← Kembali ke NestJS Enterprise Backend APIs