Enterprise-backend-API's met NestJS · Les

Resolvers en subscriptions

Implementeer GraphQL-resolvers om gegevens op te halen en te bewerken, en stel subscriptions in voor realtime gegevensupdates.

Les 3 van 311 stappen

Resolvers en subscriptions is een gratis Enterprise-backend-API's met NestJS-les op CoddyKit. Dit is les 3 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.

Introductie tot GraphQL-resolvers

Welkom in de wereld van GraphQL-resolvers in NestJS! Resolvers vormen de kern van je GraphQL-API en fungeren als brug tussen je GraphQL-schema en de gegevensbronnen van je toepassing.

Ze bepalen hoe de gegevens voor een specifiek veld in je schema worden opgehaald.
Je kunt ze zien als functies die worden uitgevoerd wanneer in een GraphQL-query of -mutation om het bijbehorende veld wordt gevraagd.
Resolvers kunnen communiceren met databases, REST-API's en andere gegevensbronnen.

Structuur van een resolver in NestJS

NestJS vereenvoudigt het maken van resolvers met decorators. Je definieert een klasse als resolver en gebruikt vervolgens specifieke decorators voor verschillende GraphQL-bewerkingen:

@Resolver(): markeert een klasse als GraphQL-resolver.
@Query(): koppelt een methode aan een GraphQL-querybewerking (gegevens ophalen).
@Mutation(): koppelt een methode aan een GraphQL-mutationbewerking (gegevens wijzigen).
@Subscription(): koppelt een methode aan een GraphQL-subscriptionbewerking (realtimegegevens).

Een eenvoudige query implementeren

Laten we een eenvoudige query-resolver maken die de tekenreeks 'Hello world!' retourneert. Hiermee zie je de basisconfiguratie voor een query:

import { Module, Injectable } from '@nestjs/common';
import { NestFactory } from '@nestjs/core';
import { GraphQLModule } from '@nestjs/graphql';
import { ApolloDriver, ApolloDriverConfig } from '@nestjs/apollo';
import { join } from 'path';
import { Query, Resolver } from '@nestjs/graphql';

@Injectable()
class AppService {
  getHello(): string {
    return 'Hello world!';
  }
}

@Resolver()
class AppResolver {
  constructor(private readonly appService: AppService) {}

  @Query(() => String)
  hello(): string {
    return this.appService.getHello();
  }
}

@Module({
  imports: [
    GraphQLModule.forRoot<ApolloDriverConfig>({
      driver: ApolloDriver,
      autoSchemaFile: join(process.cwd(), 'src/schema.gql'),
    }),
  ],
  providers: [AppResolver, AppService],
})
class AppModule {}

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);
}
bootstrap();

Queryargumenten verwerken

Queries hebben vaak argumenten nodig om gegevens te filteren of te specificeren. Gebruik de decorator @Args() om argumenten uit het GraphQL-verzoek te halen.

Hier maken we een query die een specifieke naam begroet.

import { Module, Injectable } from '@nestjs/common';
import { NestFactory } from '@nestjs/core';
import { GraphQLModule } from '@nestjs/graphql';
import { ApolloDriver, ApolloDriverConfig } from '@nestjs/apollo';
import { join } from 'path';
import { Args, Query, Resolver } from '@nestjs/graphql';

@Injectable()
class AppService {
  getGreeting(name: string): string {
    return `Hello, ${name}!`;
  }
}

@Resolver()
class AppResolver {
  constructor(private readonly appService: AppService) {}

  @Query(() => String)
  greet(@Args('name') name: string): string {
    return this.appService.getGreeting(name);
  }
}

@Module({
  imports: [
    GraphQLModule.forRoot<ApolloDriverConfig>({
      driver: ApolloDriver,
      autoSchemaFile: join(process.cwd(), 'src/schema.gql'),
    }),
  ],
  providers: [AppResolver, AppService],
})
class AppModule {}

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);
}
bootstrap();

Kennismaken met GraphQL-mutations

Queries halen gegevens op, terwijl mutations worden gebruikt om gegevens op de server te wijzigen. Dit omvat bewerkingen zoals het maken, bijwerken of verwijderen van records.

Mutations hebben een vergelijkbare structuur als queries, maar geven duidelijk aan dat ze een neveneffect hebben.
Ze retourneren meestal het gewijzigde object of een status die aangeeft dat de bewerking is geslaagd.
Gebruik de decorator @Mutation() om ze in NestJS te definiëren.

Een eenvoudige mutation implementeren

Laten we een mutation maken om een eenvoudig 'Item' toe te voegen. We definiëren een type Item en een mutation die een naam accepteert en het nieuw gemaakte item retourneert.

import { Module, Injectable, Field, ObjectType, InputType } from '@nestjs/common';
import { NestFactory } from '@nestjs/core';
import { GraphQLModule } from '@nestjs/graphql';
import { ApolloDriver, ApolloDriverConfig } from '@nestjs/apollo';
import { join } from 'path';
import { Args, Mutation, Query, Resolver } from '@nestjs/graphql';

@ObjectType()
class Item {
  @Field(() => String)
  id: string;

  @Field(() => String)
  name: string;
}

@Injectable()
class ItemsService {
  private readonly items: Item[] = [];
  create(name: string): Item {
    const newItem = { id: String(this.items.length + 1), name };
    this.items.push(newItem);
    return newItem;
  }
  findAll(): Item[] { return this.items; }
}

@Resolver(() => Item)
class ItemsResolver {
  constructor(private readonly itemsService: ItemsService) {}

  @Query(() => [Item])
  items(): Item[] {
    return this.itemsService.findAll();
  }

  @Mutation(() => Item)
  createItem(@Args('name') name: string): Item {
    return this.itemsService.create(name);
  }
}

@Module({
  imports: [
    GraphQLModule.forRoot<ApolloDriverConfig>({
      driver: ApolloDriver,
      autoSchemaFile: join(process.cwd(), 'src/schema.gql'),
    }),
  ],
  providers: [ItemsResolver, ItemsService],
})
class AppModule {}

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);
}
bootstrap();

Wat zijn GraphQL-subscriptions?

Subscriptions zijn een GraphQL-functie waarmee clients realtime-updates van de server kunnen ontvangen. In tegenstelling tot queries en mutations (die volgens het verzoek-en-antwoordmodel werken), zijn subscriptions langdurige verbindingen, meestal via WebSockets.

Wanneer een client zich abonneert, wordt er een permanente verbinding geopend.
De server stuurt gegevens naar de client zodra er een specifieke gebeurtenis plaatsvindt.
Ideaal voor chattoepassingen, live dashboards of meldingen.

PubSub configureren voor subscriptions

Voor de implementatie van subscriptions gebruikt NestJS GraphQL vaak het PubSub-mechanisme (Publish-Subscribe) van graphql-subscriptions. De server publiceert gebeurtenissen en abonnees luisteren hiernaar.

Je moet GraphQLModule configureren voor subscriptions en een exemplaar van PubSub beschikbaar stellen.

import { Module, Injectable } from '@nestjs/common';
import { NestFactory } from '@nestjs/core';
import { GraphQLModule } from '@nestjs/graphql';
import { ApolloDriver, ApolloDriverConfig } from '@nestjs/apollo';
import { join } from 'path';
import { PubSub } from 'graphql-subscriptions';

// We need a module to provide PubSub
@Module({
  providers: [
    {
      provide: 'PUB_SUB', // Token for PubSub instance
      useValue: new PubSub(),
    },
  ],
  exports: ['PUB_SUB'], // Export to use in other modules
})
class PubSubModule {}

@Module({
  imports: [
    GraphQLModule.forRoot<ApolloDriverConfig>({
      driver: ApolloDriver,
      autoSchemaFile: join(process.cwd(), 'src/schema.gql'),
      // Crucial for subscriptions:
      subscriptions: {
        'graphql-ws': true, // Enable WebSocket for subscriptions
        'subscriptions-transport-ws': true,
      },
    }),
    PubSubModule,
  ],
  // No resolvers needed for this example, just setup
})
class AppModule {}

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);
  console.log('GraphQL server with subscriptions running on port 3000');
}
bootstrap();

Een subscription implementeren

Laten we nu een subscription bouwen! We maken een subscription postAdded die een gebeurtenis uitzendt telkens wanneer er via een mutation een nieuw bericht wordt gemaakt.

Gebruik @Subscription() om de subscription-methode te definiëren.
Injecteer PubSub om gebeurtenissen te publiceren.
De mutation activeert de gebeurtenis.

import { Module, Injectable, Field, ObjectType, Inject } from '@nestjs/common';
import { NestFactory } from '@nestjs/core';
import { GraphQLModule } from '@nestjs/graphql';
import { ApolloDriver, ApolloDriverConfig } from '@nestjs/apollo';
import { join } from 'path';
import { Args, Mutation, Query, Resolver, Subscription } from '@nestjs/graphql';
import { PubSub } from 'graphql-subscriptions';

const POST_ADDED_EVENT = 'postAdded';

@ObjectType()
class Post {
  @Field(() => String)
  id: string;

  @Field(() => String)
  title: string;

  @Field(() => String)
  content: string;
}

@Injectable()
class PostsService {
  private readonly posts: Post[] = [];
  create(title: string, content: string): Post {
    const newPost = { id: String(this.posts.length + 1), title, content };
    this.posts.push(newPost);
    return newPost;
  }
  findAll(): Post[] { return this.posts; }
}

@Module({
  providers: [
    {
      provide: 'PUB_SUB', // Token for PubSub instance
      useValue: new PubSub(),
    },
  ],
  exports: ['PUB_SUB'], // Export to use in other modules
})
class PubSubModule {}

@Resolver(() => Post)
class PostsResolver {
  constructor(
    private readonly postsService: PostsService,
    @Inject('PUB_SUB') private pubSub: PubSub,
  ) {}

  @Query(() => [Post])
  posts(): Post[] {
    return this.postsService.findAll();
  }

  @Mutation(() => Post)
  async createPost(
    @Args('title') title: string,
    @Args('content') content: string,
  ): Promise<Post> {
    const newPost = this.postsService.create(title, content);
    await this.pubSub.publish(POST_ADDED_EVENT, { postAdded: newPost });
    return newPost;
  }

  @Subscription(() => Post, { name: POST_ADDED_EVENT })
  postAdded() {
    return this.pubSub.asyncIterator(POST_ADDED_EVENT);
  }
}

@Module({
  imports: [
    GraphQLModule.forRoot<ApolloDriverConfig>({
      driver: ApolloDriver,
      autoSchemaFile: join(process.cwd(), 'src/schema.gql'),
      subscriptions: {
        'graphql-ws': true,
        'subscriptions-transport-ws': true,
      },
    }),
    PubSubModule,
  ],
  providers: [PostsResolver, PostsService],
})
class AppModule {}

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);
  console.log('GraphQL server with subscriptions running on port 3000');
  console.log('Try a POST_ADDED_EVENT subscription in your client!');
}
bootstrap();

Controle van resolvers en subscriptions

Tijd om je kennis over NestJS GraphQL-resolvers en subscriptions te testen!

Beantwoord dit in de interactieve les

Samenvatting: resolvers en realtimegegevens

Gefeliciteerd! Je beheerst de basis van GraphQL-resolvers en subscriptions in NestJS.

Resolvers vormen de ruggengraat en verbinden je schema met je gegevens.
Queries halen gegevens op, mutations wijzigen gegevens en subscriptions bieden realtime-updates.
We hebben bekeken hoe je eenvoudige queries en mutations implementeert en realtimefuncties configureert met PubSub voor subscriptions.

Blijf oefenen om dynamische en responsieve GraphQL-API's te bouwen!

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 “Resolvers en subscriptions” gratis?

Ja — de volledige tekst van “Resolvers en subscriptions” 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 “Resolvers en subscriptions”?

Implementeer GraphQL-resolvers om gegevens op te halen en te bewerken, en stel subscriptions in voor realtime gegevensupdates. 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 3 van 3.

Hoe lang duurt de les “Resolvers en subscriptions”?

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