API Bahagian Belakang Perusahaan NestJS · Pelajaran

Penyelesai dan Langganan

Laksanakan penyelesai GraphQL untuk mendapatkan dan memanipulasi data, serta sediakan langganan bagi kemas kini data masa nyata.

Pelajaran 3 daripada 311 langkah

Penyelesai dan Langganan ialah pelajaran API Bahagian Belakang Perusahaan NestJS percuma di CoddyKit. Ini ialah pelajaran 3 daripada 3. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran API Bahagian Belakang Perusahaan NestJS, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus API Bahagian Belakang Perusahaan NestJS merangkumi sejumlah 3 pelajaran.

Pengenalan kepada Penyelesai GraphQL

Selamat datang ke dunia penyelesai GraphQL dalam NestJS! Penyelesai ialah teras API GraphQL anda dan bertindak sebagai penghubung antara skema GraphQL dengan sumber data aplikasi anda.

Penyelesai menentukan cara mendapatkan data bagi medan tertentu dalam skema anda.
Anggaplah penyelesai sebagai fungsi yang dilaksanakan apabila medan yang sepadan diminta dalam pertanyaan atau mutasi GraphQL.
Penyelesai boleh berinteraksi dengan pangkalan data, API REST atau mana-mana sumber data lain.

Struktur Penyelesai dalam NestJS

NestJS memudahkan penciptaan penyelesai menggunakan penghias. Anda mentakrifkan kelas sebagai penyelesai, kemudian menggunakan penghias khusus untuk operasi GraphQL yang berbeza:

@Resolver(): Menandakan kelas sebagai penyelesai GraphQL.
@Query(): Memetakan kaedah kepada operasi pertanyaan GraphQL (pengambilan data).
@Mutation(): Memetakan kaedah kepada operasi mutasi GraphQL (pengubahsuaian data).
@Subscription(): Memetakan kaedah kepada operasi langganan GraphQL (data masa nyata).

Laksanakan Pertanyaan Asas

Mari cipta penyelesai pertanyaan mudah yang mengembalikan rentetan 'Hello world!'. Ini menunjukkan persediaan asas bagi pertanyaan:

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();

Kendalikan Argumen Pertanyaan

Pertanyaan selalunya memerlukan argumen untuk menapis atau menentukan data. Gunakan penghias @Args() untuk mengekstrak argumen daripada permintaan GraphQL.

Di sini, kita akan mencipta pertanyaan yang memberikan salam kepada nama tertentu.

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();

Memperkenalkan Mutasi GraphQL

Jika pertanyaan digunakan untuk mendapatkan data, mutasi pula digunakan untuk mengubah data pada pelayan. Ini termasuk operasi seperti mencipta, mengemas kini atau memadam rekod.

Mutasi mempunyai struktur yang serupa dengan pertanyaan, tetapi menandakan kesan sampingan dengan jelas.
Mutasi biasanya mengembalikan objek yang diubah atau status yang menunjukkan kejayaan.
Gunakan penghias @Mutation() untuk mentakrifkannya dalam NestJS.

Laksanakan Mutasi Asas

Mari cipta mutasi untuk menambah Item yang mudah. Kita akan mentakrifkan jenis Item dan mutasi yang menerima nama serta mengembalikan item yang baru dicipta.

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();

Apakah Langganan GraphQL?

Langganan ialah ciri GraphQL yang membolehkan klien menerima kemas kini masa nyata daripada pelayan. Berbeza daripada pertanyaan dan mutasi (yang menggunakan pola permintaan-tindak balas), langganan ialah sambungan berjangka panjang, biasanya melalui WebSockets.

Apabila klien melanggan, klien membuka sambungan berterusan.
Pelayan menolak data kepada klien setiap kali peristiwa tertentu berlaku.
Sesuai untuk aplikasi sembang, papan pemuka langsung atau pemberitahuan.

Sediakan PubSub untuk Langganan

Untuk melaksanakan langganan, GraphQL NestJS selalunya menggunakan mekanisme PubSub (Terbit-Langgan) daripada graphql-subscriptions. Pelayan menerbitkan peristiwa dan pelanggan mendengarnya.

Anda perlu mengkonfigurasikan GraphQLModule untuk langganan dan menyediakan tika PubSub.

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();

Laksanakan Langganan

Sekarang mari bina langganan! Kita akan mencipta langganan postAdded yang mencetuskan peristiwa setiap kali kiriman baharu dicipta melalui mutasi.

Gunakan @Subscription() untuk mentakrifkan kaedah langganan.
Suntik PubSub untuk menerbitkan peristiwa.
Mutasi akan mencetuskan peristiwa tersebut.

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();

Semakan Penyelesai dan Langganan

Sudah tiba masanya untuk menguji pengetahuan anda tentang penyelesai dan langganan GraphQL NestJS!

Jawab dalam pelajaran interaktif

Imbas Kembali: Penyelesai dan Masa Nyata

Tahniah! Anda telah memahami perkara asas penyelesai dan langganan GraphQL dalam NestJS.

Penyelesai ialah tulang belakang yang menghubungkan skema anda kepada data anda.
Pertanyaan mendapatkan data, Mutasi mengubah data dan Langganan menyediakan kemas kini masa nyata.
Kita telah meneroka cara melaksanakan pertanyaan dan mutasi mudah serta menyediakan ciri masa nyata menggunakan PubSub untuk langganan.

Teruskan berlatih untuk membina API GraphQL yang dinamik dan responsif!

Percuma untuk bermula

Pelajari TypeScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 20
Pelajaran: 76

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Penyelesai dan Langganan” percuma?

Ya — teks penuh “Penyelesai dan Langganan” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus API Bahagian Belakang Perusahaan NestJS, tingkat taraf kepada CoddyKit PRO. Kursus API Bahagian Belakang Perusahaan NestJS merangkumi sejumlah 3 pelajaran.

Apakah yang akan saya pelajari dalam “Penyelesai dan Langganan”?

Laksanakan penyelesai GraphQL untuk mendapatkan dan memanipulasi data, serta sediakan langganan bagi kemas kini data masa nyata. Anda berlatih API Bahagian Belakang Perusahaan NestJS menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan API Bahagian Belakang Perusahaan NestJS?

Tiada pengalaman terdahulu diperlukan. Pembelajaran API Bahagian Belakang Perusahaan NestJS di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 3.

Berapa lamakah pelajaran “Penyelesai dan Langganan” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran API Bahagian Belakang Perusahaan NestJS ini?

Ya. Setiap pelajaran API Bahagian Belakang Perusahaan NestJS menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Asas GraphQL
Persediaan GraphQL NestJS
Penyelesai dan Langganan

← Kembali ke API Bahagian Belakang Perusahaan NestJS