Beginner’s Guide to Fullstack Development with GraphQL, NestJS, and NextJS #01

Trong loạt bài viết này, chúng ta sẽ tìm hiểu cách xây dựng một ứng dụng fullstack sử dụng GraphQL, NestJS và NextJS. GraphQL là một ngôn ngữ truy vấn mạnh mẽ cho API và NestJS cung cấp một cấu trúc đơn giản và mạnh mẽ để xây dựng API. NextJS là một framework React cho phép chúng ta xây dựng các ứng dụng web phong phú và mạnh mẽ.

Bài viết này sẽ tập trung vào cài đặt backend bằng NestJS. NestJS là một framework NodeJS giúp chúng ta xây dựng các ứng dụng server-side mạnh mẽ và hiệu quả. Chúng ta sẽ bắt đầu bằng cách tạo một project NestJS mới và cài đặt GraphQL.

Bước 1: Tạo một project NestJS mới

Để tạo một project NestJS mới, chúng ta có thể sử dụng NestJS CLI. Đầu tiên, cài đặt NestJS CLI bằng cách chạy lệnh sau trong terminal:

npm install -g @nestjs/cli

Sau đó, chúng ta sẽ tạo một project mới bằng lệnh sau:

nest new my-graphql-app

Chạy lệnh trên và nhập các thông tin cần thiết cho project của bạn. NestJS CLI sẽ tạo một project mới với cấu trúc mặc định.

Bước 2: Cài đặt GraphQL

Để cài đặt GraphQL vào project NestJS, chúng ta cần cài đặt một số package cần thiết. Chúng ta cần cài đặt @nestjs/graphql, graphql, @nestjs/core, apollo-server-express và graphql-tools. Để cài đặt các package này, chạy lệnh sau trong thư mục gốc của project:

npm install @nestjs/graphql graphql apollo-server-express graphql-tools

Sau khi cài đặt xong, chúng ta cần thêm module GraphQL vào ứng dụng NestJS. Mở file src/app.module.ts và import module GraphQL vào file:

import { Module } from '@nestjs/common';
import { GraphQLModule } from '@nestjs/graphql';

@Module({
  imports: [
    GraphQLModule.forRoot({
      autoSchemaFile: true,
    }),
  ],
})
export class AppModule {}

Bước 3: Tạo Resolver và Schema

Bây giờ, chúng ta cần tạo các resolvers và schema cho GraphQL API của chúng ta. Chúng ta sẽ tạo một resolver đơn giản để trả về "Hello World". Tạo một file src/app.resolver.ts và thêm nội dung sau:

import { Resolver, Query } from '@nestjs/graphql';

@Resolver()
export class AppResolver {
  @Query(() => String)
  hello(): string {
    return 'Hello World!';
  }
}

Tiếp theo, chúng ta cần tạo schema cho API của mình. Tạo một file src/app.schema.ts và thêm nội dung sau:

import { buildSchemaSync } from 'type-graphql';
import { AppResolver } from './app.resolver';

export const schema = buildSchemaSync({
  resolvers: [AppResolver],
});

Bước 4: Chạy ứng dụng

Sau khi đã tạo các resolvers và schema cho GraphQL API của chúng ta, chúng ta sẽ cần chạy ứng dụng để kiểm tra xem GraphQL API đã hoạt động chưa. Để chạy ứng dụng, chạy lệnh sau trong terminal:

npm run start:dev

Sau đó, truy cập vào http://localhost:3000/graphql để truy cập vào GraphQL Playground và thử truy vấn GraphQL mà chúng ta vừa tạo.

Đó là bước đầu tiên trong việc xây dựng một ứng dụng fullstack với GraphQL, NestJS và NextJS. Trong các bài viết sau, chúng ta sẽ tìm hiểu cách kết nối frontend của chúng ta bằng NextJS và giao tiếp với GraphQL API mà chúng ta vừa tạo. Hy vọng rằng bài viết này đã giúp bạn hiểu rõ hơn về cách sử dụng GraphQL và NestJS trong dự án của bạn.