iT邦幫忙

2023 iThome 鐵人賽

DAY 24
0
Modern Web

由前向後,從前端邁向全端系列 第 24

24.【從前端到全端,Nextjs+Nestjs】使用Prisma service修改Service並操作

  • 分享至 

  • xImage
  •  

文章重點

  • 如何在Nest.js的service中整合Prisma,以實現資料庫操作的簡化和高效化
  • 通過 GraphQL 的query和mutate來驗證PrismaService的功能並確保資料庫操作的正確性

本文

本文將介紹如何利用prisma來對資料庫進行操作,這裡我們使用nestjs-prisma的PrismaService (See Doc)

打開apps\iron-ecommerce-server\src\api\products\products.service.ts並在constructor中加入PrismaService ,並且將方法全部改成利用Prisma來進行資料的查詢、新增、更新和刪除操作

import { Product } from "./products.model";
import { Injectable } from "@nestjs/common";
import { PrismaService } from "nestjs-prisma";

@Injectable()
export class ProductService {
	constructor(private readonly prisma: PrismaService) {}

	async findAll(): Promise<Product[]> {
		return this.prisma.product.findMany();
	}

	async findOne(id: string): Promise<Product | null> {
		return this.prisma.product.findUnique({ where: { id } });
	}

	async addProduct(newProduct: Omit<Product, "id">): Promise<Product> {
		return this.prisma.product.create({ data: newProduct });
	}

	async updateProduct(updatedProduct: Product): Promise<Product | null> {
		try {
			return await this.prisma.product.update({
				where: { id: updatedProduct.id },
				data: updatedProduct
			});
		} catch (error) {
			console.error(error);
			return null;
		}
	}

	async deleteProduct(id: string): Promise<boolean> {
		try {
			await this.prisma.product.delete({ where: { id } });
			return true;
		} catch (error) {
			console.error(error);
			return false;
		}
	}
}

this.prisma.product中的product是我們使用prisma生成出來的,如果我們想知道更多生成出的product操作的方法。我們可以使用F12前往定義我們能看到裡面的操作資訊。
https://ithelp.ithome.com.tw/upload/images/20231009/20108931jHDjK9pzl4.png
並且我們在使用前往定義找到ProductDelegate,裡面就是我們目前會使用到的方法
https://ithelp.ithome.com.tw/upload/images/20231009/20108931fwmaWJHR6n.png

完成我們的service後,我們更新我們的product module,打開apps\iron-ecommerce-server\src\api\products\products.module.ts加入PrismaService:

import { ProductsResolver } from "./products.resolver";
import { ProductService } from "./products.service";
import { Module } from "@nestjs/common";

import { PrismaService } from "nestjs-prisma";

@Module({
	imports: [],
	providers: [ProductsResolver, ProductService, PrismaService]
})
export class ProductsModule {}

接下來我們進行測試,執行pnpm exec nx run iron-ecommerce-server:serve 並打開http://localhost:3000/graphql來測試

我們先執行query來觀看

{
  getProducts {
    id
    name
    description
    imageUrl
  }
}

https://ithelp.ithome.com.tw/upload/images/20231009/201089319ooc5YriJ4.png
並且打開SQLTool來看一夏我們目前db裡的data。
https://ithelp.ithome.com.tw/upload/images/20231009/20108931z6TwVC4Ecp.png

接下來我們試著進行mutate操作,包括新增、更新和刪除Product

mutation {
  addProduct(input: {
    name: "New-Product",
    price: 20.0,
    description: "This is New-Product",
    imageUrl: "http://example.com/new-product.jpg"
  }) {
    id
    name
    price
    description
    imageUrl
  }
}

// 更新id為clnhcdmrp0001vobo9h7mfsg2的product
mutation {
  updateProduct(input: {
    id: "clnhcdmrp0001vobo9h7mfsg2",
    name: "Updated Product Name",
    price: 25.0,
    description: "Updated Product Description",
    imageUrl: "http://example.com/updated-product.jpg"
  }) {
    id
    name
    price
    description
    imageUrl
  }
}

// 刪除id為clnhcdmrw0002voboxvjlgfnc的product
mutation {
  deleteProduct(id: "clnhcdmrw0002voboxvjlgfnc")
}

接下來我們觀察一下我們目前資料庫的data
https://ithelp.ithome.com.tw/upload/images/20231009/20108931IBbljEnHP7.png

https://ithelp.ithome.com.tw/upload/images/20231009/201089319So8SzMaY6.png


總結

本文介紹了如何在Nest.js的service中整合了 Prisma,並且透過Prisma來操作我們資料庫,並通過簡單的query和mutate來測試是否更改了我們資料庫。下一篇我們會簡單的介紹並實現我們的GraphQL pagination


上一篇
23.【從前端到全端,Nextjs+Nestjs】利用 Prisma 和 Docker 快速搭建並操作 PostgreSQL 資料庫
下一篇
25.【從前端到全端,Nextjs+Nestjs】在Nestjs GraphQL加入Pagination
系列文
由前向後,從前端邁向全端30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言