Enterprise-backend-API's met NestJS · Les

NestJS GraphQL instellen

Configureer NestJS om een GraphQL-API aan te bieden en kies tussen een code-first- en schema-first-aanpak.

Les 2 van 312 stappen

NestJS GraphQL instellen is een gratis Enterprise-backend-API's met NestJS-les op CoddyKit. Dit is les 2 van 3. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Enterprise-backend-API's met NestJS. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Enterprise-backend-API's met NestJS bevat in totaal 3 lessen.

Welkom bij de configuratie van GraphQL

Hallo! In deze les leer je hoe je GraphQL in je NestJS-toepassing integreert. We behandelen de essentiële configuratiestappen en bekijken twee belangrijke benaderingen:

Schema-First: je API definiëren met de GraphQL Schema Definition Language (SDL).
Code-First: je schema rechtstreeks opbouwen vanuit TypeScript-klassen en decorators.

Na afloop kun je de beste benadering voor je project kiezen en een eenvoudige GraphQL-server uitvoeren!

GraphQL-afhankelijkheden installeren

Voordat we code schrijven, moeten we de benodigde pakketten installeren. NestJS gebruikt @nestjs/graphql samen met een onderliggende GraphQL-bibliotheek zoals Apollo.

Open je terminal en voer de volgende opdracht uit om de vereiste pakketten toe te voegen:

npm install @nestjs/graphql @nestjs/apollo graphql

graphql is de kernbibliotheek van GraphQL en @nestjs/apollo biedt de integratie met de Apollo-server.

GraphQLModule configureren

De kern van GraphQL in NestJS is de GraphQLModule. Je moet deze in je hoofdmodule (meestal AppModule) importeren en configureren. Dit is een eenvoudige configuratie:

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: ontwerpen met SDL

Bij de aanpak Schema-First definieer je eerst je GraphQL-schema met de Schema Definition Language (SDL). Dit is vergelijkbaar met het maken van een blauwdruk voor je API.

Je schrijft je typen, queries en mutations in een .graphql- of .gql-bestand.
NestJS gebruikt dit bestand vervolgens om de structuur van je API te begrijpen.
Later koppel je deze schemadefinities aan de logica die de gegevens verwerkt (resolvers).

Schema-First: voorbeeld van een basistype

Laten we een eenvoudig type Author definiëren in een SDL-bestand. Dit bestand beschrijft de gegevensstructuur, zonder al implementatiedetails te bevatten.

// src/graphql.schema.gql

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

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

Schema-First: schema aan module koppelen

Om NestJS op de hoogte te brengen van je SDL-bestand, configureer je de GraphQLModule zodat deze naar het bestand verwijst. Zo weet NestJS waar het de schemadefinitie kan vinden.

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-magie

De aanpak Code-First gebruikt TypeScript-decorators om je GraphQL-schema te definiëren. In plaats van SDL te schrijven, definieer je klassen die NestJS automatisch omzet in een GraphQL-schema.

Je gebruikt decorators zoals @ObjectType() en @Field() op je TypeScript-klassen.
Deze aanpak biedt sterke typeveiligheid en uitstekende ondersteuning in je IDE.
Je voorkomt dubbel werk, omdat je TypeScript-typen rechtstreeks je GraphQL-schema definiëren.

Code-First: een objecttype maken

Zo definieer je hetzelfde type Author met de Code-First-aanpak. Let op het gebruik van de decorators @ObjectType en @Field.

// 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: schema automatisch genereren

Bij de Code-First-aanpak genereert de GraphQLModule automatisch het schema door in je project te zoeken naar klassen met decorators zoals @ObjectType() en @InputType().

Je geeft alleen aan waar het gegenereerde schemabestand moet worden opgeslagen (optioneel, maar handig om het te bekijken).

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 versus Code-First

Beide benaderingen zijn geldig. Je keuze hangt vaak af van de voorkeur van je team en de behoeften van je project:

Schema-First: uitstekend voor samenwerking aan het API-ontwerp. Het schema is de enige bron van waarheid, waardoor frontendteams de API al vroeg gemakkelijk kunnen gaan gebruiken.
Code-First: populair bij TypeScript-ontwikkelaars vanwege de sterke typeveiligheid, het geringere wisselen tussen contexten en minder dubbel werk tussen schema en code. Deze aanpak sluit beter aan bij de gebruikelijke NestJS-stijl.

NestJS ondersteunt beide, zodat je kunt kiezen wat het beste werkt!

Test je begrip

Laten we je kennis over het configureren van GraphQL in NestJS testen.

Beantwoord dit in de interactieve les

Samenvatting van de les

Goed gedaan! Je hebt de belangrijkste stappen geleerd om een GraphQL-API in NestJS te configureren.

We hebben de benodigde pakketten @nestjs/graphql en @nestjs/apollo geïnstalleerd.
Je hebt gezien hoe je de GraphQLModule in je AppModule integreert en configureert.
We hebben zowel de aanpak Schema-First (met SDL-bestanden) als de aanpak Code-First (met TypeScript-decorators) bekeken.

Je hebt nu een basis om je favoriete GraphQL-configuratie in NestJS te kiezen en te implementeren!

Gratis beginnen

Leer TypeScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 20
Lessen: 76

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “NestJS GraphQL instellen” gratis?

Ja — de volledige tekst van “NestJS GraphQL instellen” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Enterprise-backend-API's met NestJS wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Enterprise-backend-API's met NestJS bevat in totaal 3 lessen.

Wat leer ik in “NestJS GraphQL instellen”?

Configureer NestJS om een GraphQL-API aan te bieden en kies tussen een code-first- en schema-first-aanpak. Je oefent met Enterprise-backend-API's met NestJS door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Enterprise-backend-API's met NestJS te beginnen?

Ervaring vooraf is niet nodig. Enterprise-backend-API's met NestJS op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 3.

Hoe lang duurt de les “NestJS GraphQL instellen”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Enterprise-backend-API's met NestJS?

Ja. Elke les over Enterprise-backend-API's met NestJS bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Enterprise-backend-API's met NestJS